0代码复刻博客网站

·  阅读 726

「这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战」。

一、前言

今天突发奇想,想复刻个CSDN。刚有想法就动起手来,没花多久就实现了下面的样子:

在这里插入图片描述

大致效果还是实现了的,用来做Web期末作业也差不多够了。

既然说了是0代码,所以今天不使用html来写。而是使用一种叫iVx的新型语言来写。

iVX是一种基于云原生的全新开发体系(包括前端和后台),一种无代码可视化的编程语言:无代码,可视化,组件化,数据驱动(data driven),云原生(Cloud Native),是该语言重要的特点;iVX有自身的编译器/解析器,可以生成选定目标系统的可执行代码。

同时iVX自带强大IDE,大大降低用户编程学习门槛和开发门槛,同时生成高质量代码和大大提升产品运维效率。

如果还不了解这个工具可以看看:如何自定义炫酷浏览器主页。或者访问官网

二、页面分析

我们先来看看csdn页面布局,如下图:

在这里插入图片描述

我们用矩形块来简化一下上面的布局:

在这里插入图片描述

我们把页面划分为好几个部分,当然这个划分还不够详细,更详细的划分我们在实现的时候来做。

现在我们按照这个划分来构造页面的骨架。

三、创建项目并构建骨架(基本布局)

3.1、准备工作

我们进入iVx:www.ivx.cn/然后登录。

我们进入工作台创建一个项目:

在这里插入图片描述

我们选择相对定位,修改应用名然后创建即可。

在这里插入图片描述

因为我们是电脑端网页,所以这里在右上角选择相应分辨率的电脑。然后点击减号,让电脑可以显示整个布局。下面我们就可以开始写布局了。

3.2、构建骨架

我们按照图中的结构添加行列布局:

在这里插入图片描述

然后清除布局的背景颜色。你也可以先不清除背景颜色,方便观看。然后我们对这些布局的属性进行设置。

3.3、设置属性

(1)菜单栏

我们设置菜单栏的高为48px,宽为100%。这里需要注意,一个是px,一个是%。 在这里插入图片描述

(2)内容主体

内容主体我们设置宽为100%,高选择撑开。

在这里插入图片描述

(3)领域

领域我们设置宽度为120px,高度100%。并设置横竖水平居中,因为布局中领域部分距离左边有段距离,所以设置了一个左外边距180px。

在这里插入图片描述

(4)博主推荐

博主推荐我们设置如下:

在这里插入图片描述

博客推荐我们不做设置。

(5)轮播图

轮播图我们把高设置为250px。

在这里插入图片描述

(6)博客

博客我们设置高度为撑开:

在这里插入图片描述

现在我们各个部分详细布局。

四、菜单栏(基本属性设置)

把菜单栏细分为如下几部分:

在这里插入图片描述

然后我们为菜单栏完成布局。添加的布局如下: 在这里插入图片描述 logo图片如下,大家可以自己下载: 在这里插入图片描述

4.1、菜单栏属性

我们先来给菜单栏设置属性,开始我们只设置了宽高,现在我们设置内边距和对齐方式。 在这里插入图片描述 这里设置左内和右内边距20px。然后设置对齐方式为居中。

4.2、各个部分

我们可以给各个部分设置个边距,这个可以自由调节。

(1)logo

logo我们设置宽为80px、高为44px。

在这里插入图片描述 图片资源就是logo图。

(2)菜单

菜单我们不严格按照CSDN页面的条目来,这里就是添加几个文本:

在这里插入图片描述 我们复制粘贴6个文本。然后给菜单布局设置宽度420px,高48px,再设置居中。 文本我们需要修改字体大小到16px。

(3)搜索框

搜索框的布局如下,因为按钮带有图标,这里用布局代替按钮。 在这里插入图片描述

输入框属性如下: 在这里插入图片描述

代替按钮的布局属性如下: 在这里插入图片描述 然后把里面的图标尺寸调小到30px就好了。当然我们还需要换图标。

(4)头像

头像就是一张图片,我们设置大小和宽高即可。为了让头像是圆形,我们需要把边框圆角大小设置成正方形的边长大小。 在这里插入图片描述

(5)个人菜单

个人菜单和菜单类似,这里就不说了: 在这里插入图片描述

(6)创作中心

这里只有一个按钮,读者自行调整即可。 下面是菜单栏的效果图: 在这里插入图片描述 大致的样式现在出来了。我们来做网页主体部分。

五、领域(一维数组和for循环)

可以看到,领域是一个很长的列表,如果一个一个创建是非常麻烦的。所以这里我们就要使用到iVx中的一维数组和for循环。

它们在页面的这个位置: 在这里插入图片描述 结合使用,可以减少我们很多工作。

我们先在前台创建一个对象容器。然后在容器里创建一个一维数组: 在这里插入图片描述 我们可以在左上方为一维数组赋值。然后再在领域中添加一个for循环。

我们点击for循环,然后为他选择数据来源,选定我们创建的一维数组: 在这里插入图片描述 使用for循环后我们得到了下面的效果: 在这里插入图片描述 轮播图的布局比较简单,这里就不说了: 在这里插入图片描述

六、博客(对象数组)

我们仔细观察博客的内容,会发现有很多样式大致一样的条目。但是每一个的内容又不一样,因此我们又要引入两个新的东西。对象和对象数组。我们可以用对象来表示一条博客的内容。

6.1、创建博客对象

我们创建博客对象,并给博客对象设置字段: 在这里插入图片描述 这里没给对象设置值。下面我们再来创建一个对象数组。

6.2、对象数组

对象和对象数组的位置如下,我们创建好对象数组后给对象数组赋值即可。

在这里插入图片描述

6.3、创建博客列表

我们点击对象列表,然后与我们开始创建的对象进行关联。再给对象列表赋值。

在这里插入图片描述 对象列表赋值成功后我们就能使用了。我们写好单个博客的布局,然后添加for循环即可: 在这里插入图片描述 下面是效果图: 在这里插入图片描述 现在大致效果出来了,就是需要再调整一下大小。这个读者可以自己去尝试调整。 最后博主推荐部分布局比较简单,读者可以自行完成。下面是一种参考的布局: 在这里插入图片描述 最后实现的效果如下: 在这里插入图片描述 至此我们就完成了CSDN的复刻。

市面上有很多拖拽式布局的工具,但是像iVx这样有对象、数组和程序结构的工具确实是很少。值得大家去尝试。

分类:
后端
标签:
分类:
后端
标签:
收藏成功!
已添加到「」, 点击更改