0代码复刻CSDN

以你之姓@ 2022-10-15 12:57 131阅读 0赞

# 0代码复刻CSDN #

## 一、前言 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center]

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

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

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

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

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

## 二、页面分析 ##

我们先来看看csdn页面布局，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 2]

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

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

## 三、创建项目并构建骨架（基本布局） ##

### 3.1、准备工作 ###

我们进入iVx：[https://www.ivx.cn/][https_www.ivx.cn]然后登录。

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

![在这里插入图片描述][2021052217163284.png_pic_center]

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

![在这里插入图片描述][20210522172022245.png_pic_center]

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

### 3.2、构建骨架 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 3]

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

### 3.3、设置属性 ###

#### （1）菜单栏 ####

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

#### （2）内容主体 ####

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

![在这里插入图片描述][20210525134121478.png_pic_center]

#### （3）领域 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 4]

#### （4）博主推荐 ####

博主推荐我们设置如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 5]

博客推荐我们不做设置。

#### （5）轮播图 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 6]

##### （6）博客 #####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 7]

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

## 四、菜单栏（基本属性设置） ##

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

![在这里插入图片描述][2021052513353591.png_pic_center]

然后我们为菜单栏完成布局。添加的布局如下：  
![在这里插入图片描述][20210525134348855.png_pic_center]  
logo图片如下，大家可以自己下载：  
![在这里插入图片描述][202105251347112.png_pic_center]

### 4.1、菜单栏属性 ###

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

### 4.2、各个部分 ###

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

#### （1）logo ####

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

![在这里插入图片描述][20210525140028141.png_pic_center]  
图片资源就是logo图。

#### （2）菜单 ####

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

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

#### （3）搜索框 ####

搜索框的布局如下，因为按钮带有图标，这里用布局代替按钮。  
![在这里插入图片描述][20210525140811379.png_pic_center]

输入框属性如下：  
![在这里插入图片描述][20210525141006325.png_pic_center]

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

#### （4）头像 ####

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

#### （5）个人菜单 ####

个人菜单和菜单类似，这里就不说了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 12]

#### （6）创作中心 ####

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

## 五、领域（一维数组和for循环） ##

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

它们在页面的这个位置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 14]  
结合使用，可以减少我们很多工作。

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

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

## 六、博客（对象数组） ##

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

### 6.1、创建博客对象 ###

我们创建博客对象，并给博客对象设置字段：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 19]  
这里没给对象设置值。下面我们再来创建一个对象数组。

### 6.2、对象数组 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 20]

### 6.3、创建博客列表 ###

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/d3dddce1a1814af09e12f0ec8ce02fc9.png
[Link 1]: https://blog.csdn.net/ZackSock/article/details/117170281?spm=1001.2014.3001.5501
[Link 2]: https://www.ivx.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221014/99a14555b32948a2941a47ea978d1567.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221014/6bf96403ae55483c81fc847315c6e40e.png
[https_www.ivx.cn]: https://www.ivx.cn/
[2021052217163284.png_pic_center]: /images/20221014/891b475eaa684aea87931c80bea14c06.png
[20210522172022245.png_pic_center]: /images/20221014/9918ac92cfef474f877131fa81a9cf34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221014/20f8afcfc7934703b7ea32684778fa5f.png
[20210525134050505.png_pic_center]: /images/20221014/766d3650987b40bdb2b520933c833e20.png
[20210525134121478.png_pic_center]: /images/20221014/8dbb6fb5f9304874b7e215ded0241adb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221014/fc65c670e7a74d6b8a8e2fb5e4460fd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221014/4ad0a38431d5455283a38d4454cb245e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221014/b2fb40485b0c4b5285b5944276b9c8e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221014/9b0eb495caba43d68e3fc82bc117b3fe.png
[2021052513353591.png_pic_center]: /images/20221014/6ad5feec903c4cb8a0ef3ba0917349ef.png
[20210525134348855.png_pic_center]: /images/20221014/6bd5ceed00c04a918aa65e639a871cd2.png
[202105251347112.png_pic_center]: /images/20221014/6eb4134fa7404752809f04a9ba2c0ba4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221014/b7b199d3cf3446b78493a609b45a9e99.png
[20210525140028141.png_pic_center]: /images/20221014/a35df73479df4bbeae2ecbb250db161a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221014/d2a6bc14ba4a4b76a1bc1ce9cafc2e84.png
[20210525140811379.png_pic_center]: /images/20221014/3149e6972a4b48e5a7ced96015cbd44a.png
[20210525141006325.png_pic_center]: /images/20221014/53789f6567dc475d8f853388d6c757e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221014/869a8bd25e2949eea91aba5f674db6b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221014/bd0c8516622546129c1b4ff105b43f05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221014/d3a238447b244c288d7b21386ecba92e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221014/3949169a98444bf68328b91ebae34917.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221014/4065e2cf54ce446ca350b0c760a0cff9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221014/f677f932b9cb4f8d99ca662734ae29bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221014/80bac821852c4092980fde9bdfb4d356.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221014/3446a46f32ee4059b2735ba867fedec0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221014/f382077488b54ad4bd36e70d03700aa0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221014/6c83daf054af4656b6eae89455a86946.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 20]: /images/20221014/a09fa325de394734ac00efb3b1b4d338.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 21]: /images/20221014/93ee7ab54a66421f9180c36da8e6d19f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 22]: /images/20221014/63d8afdc77634170abf8ee6040e2d60b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 23]: /images/20221014/e2d4d5e0880040c38eef1509a17b0bb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 24]: /images/20221014/ef626f98899743dd9c2c6f0da0b1e922.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1phY2tTb2Nr_size_16_color_FFFFFF_t_70_pic_center 25]: /images/20221014/7976b3e3f8a644f887f689c15505cde2.png