“This is my fourth day of the first Gwen Challenge 2022.First challenge in 2022”.

One, foreword

Today, I had an idea to copy CSDN. As soon as I had an idea, I started working on it. It didn’t take long to realize the following appearance:

The general effect is achieved, and it should be enough for the Web final project.

I’m not going to write it in HTML today, since I said it’s code 0. It was written in a new language called iVx.

IVX is a new development system based on Cloud Native (including front-end and back-end), a programming language without code visualization: no code, visualization, componentization, data driven, Cloud Native, is an important feature of this language; IVX has its own compiler/parser that generates executable code for the selected target system.

At the same time, iVX comes with a powerful IDE, greatly reducing the user programming learning threshold and development threshold, while generating high-quality code and greatly improving the efficiency of product operation and maintenance.

If you’re not familiar with this tool, check out: How to customize a cool browser home page. Or visit the official website.

Second, page analysis

Let’s take a look at the CSDN page layout, as shown below:

Let’s use rectangular blocks to simplify the layout above:

We have divided the page into several sections, of course this partition is not detailed enough, we will do more detailed partition in the implementation.

Now we follow this partition to construct the skeleton of the page.

3. Create the project and build the skeleton (basic layout)

3.1 preparation

Let’s go to iVx: www.ivx.cn/ and log in.

Let’s go to the workbench and create a project:

Let’s go to relative location, change the app name and create it.

Because we are a computer side of the page, so here in the upper right corner to select the corresponding resolution of the computer. Then click the minus sign to allow the computer to display the entire layout. Now we can start writing the layout.

3.2. Build a skeleton

We add the row layout as shown in the diagram:

Then clear the background color of the layout. You can also leave the background color on for easy viewing. We then set the properties of these layouts.

3.3. Set Properties

(1) Menu bar

Let’s make the menu bar 48px high and 100% wide. Notice here that one is px and one is %.

(2) Content body

We set the width of the content body to 100% and the height to spread.

(3) Domain

We set the width of the field to 120px and the height to 100%. Set the horizontal and vertical lines to be centered horizontally. Since the field is some distance from the left in the layout, set a left margin of 180px.

(4) Recommendation by bloggers

The blogger recommended the following Settings:

The blog recommends that we do not set it.

(5) Rotation chart

Let’s set the height to 250px.

(6) Blogs

Blog we set the height to open:

Now we have a detailed layout of each part.

Iv. Menu Bar (Basic property setting)

Subdivide the menu bar into the following sections:

Then we complete the layout for the menu bar. Add the following layout:The logo picture is as follows, you can download it yourself:

4.1 menu bar properties

Let’s start by setting the properties for the menu bar. At first we only set the width and height, now we set the inner margins and alignment.Set the inner left and right margins to 20px. Then set the alignment to center.

4.2. Various parts

We can set a margin for each part, which can be adjusted freely.

(1) logo

We made the logo 80px wide and 44px high.

The image resource is the logo.

(2) Menu

Menu we do not strictly follow the CSDN page entry, here is to add a few text:

Let’s copy and paste 6 text. Then set the menu layout 420px wide and 48px high, and center it. For the text we need to change the font size to 16px.

(3) Search box

The layout of the search box is as follows, since the button has an icon, the layout is used instead of the button.

The input box properties are as follows:

The layout properties that replace the button are as follows:Then reduce the size of the ICONS inside to 30px. Of course, we also need to change the icon.

(4) Head picture

An avatar is a picture, we set the size and width and height. To make the head round, we need to set the border’s rounded corner size to the square’s side length.

(5) Personal menu

Personal menus are similar to menus, but not here:

(6) Creation Center

There is only one button for the reader to adjust. Here’s how the menu bar looks like:The rough pattern is now out. Let’s do the body of the page.

5. Domains (one-dimensional arrays and for loops)

As you can see, the fields are a long list, and creating them one by one is cumbersome. So here we use iVx’s one-dimensional array and for loop.

They are in this position on the page:Combined, it can save us a lot of work.

Let’s start by creating an object container in the foreground. Then create a one-dimensional array inside the container:We can assign a one-dimensional array in the upper left. Then add a for loop to the realm.

We click on the for loop and select the data source for it, selecting the one-dimensional array we created:Using the for loop we get the following:The layout of the wheel broadcast graph is relatively simple, which will not be said here:

6. Blog (Object Array)

When we look closely at the content of the blog, we see a lot of entries that look pretty much the same. But each one has a different content, so we’re going to introduce two new things. Object and object array. We can use objects to represent the content of a blog.

6.1. Create a Blog object

We create the blog object and give the blog object a field:There is no value for the object. Now let’s create an array of objects.

6.2. Object Arrays

The position of the object and the array of objects is as follows. After we have created the array of objects, we can assign values to the array of objects.

6.3. Create a blog list

We click on the object list and associate it with the object we started creating. Assign to the list of objects.

Once the object list has been assigned, we can use it. We write the layout of the individual blog and add the for loop:Here’s how it looks:Now I have the general effect, but I need to resize it. This reader can try to adjust for himself. Finally, the layout of the part recommended by the blogger is relatively simple, and readers can complete it by themselves. Here is a reference layout:The final effect is as follows:At this point, we have completed the replication of CSDN.

There are a lot of drag-and-drop layout tools out there, but there are very few that have objects, arrays, and program structures like iVx. It’s worth a try.