制作iVX 低代碼項目需要進入在線IDE：https://editor.ivx.cn/

一、博客詳情頁分析

博客詳情頁大體分為頂部標題、發(fā)布時間、作者信息、博文內容，底部的評論我們在此不必做懸浮內容，咱們直接放到博文之下進行顯示即可；頂部標題需要注意，不是只限于倆行，因為這是博文詳情頁，頂部標題肯定是需要顯示完畢的，接下來就是發(fā)布時間和點贊，點贊在此是需要制作的，接著往下是一個作者信息，在此咱們只需要制作一個頭像和右邊的昵稱即可，因為這是個人博客并不涉及關注內容，接著下面是富文本內容，富文本我們需要使用富文本容器進行顯示，在此處咱們使用富文本框進行代替，在之后的內容編寫時在進行對應的賦值即可。

剩下的評論區(qū)并不著急，咱們先把對應的內容進行實現(xiàn)。

二、博客詳情頁標題及發(fā)布時間制作

首先咱們先制作博客詳情頁的標題和發(fā)布時間，此時先把頂部的頭部欄復制過來，點擊前臺添加一個頁面，命名為詳情頁：

接著復制整個首頁中的主要內容行到詳情頁之中，因為大體布局一致，所以只需要復制過來即可：

隨后刪除不必要的內容，只剩下頭部即可：

隨后在主要內容下新建一個行，命名為博文頭部，在這個行中存放博文標題以及發(fā)表時間、點贊：

由于此時你并不清楚標題的具體長度，在此我們只需要設置當前博文頭部行的高度為包裹、背景色為透明即可：

由于頭部標題本身上內邊距是有一定距離的，在此設置這個行的上內邊距以及距離頂部的一段距離，這樣才可以使上部分像有一個隔斷的顏色，當然你也可以設置邊距樣式達到同樣的效果：

接著設置內邊距：

此時頁面效果如下：

接著往這個行中添加一個行命名為標題，同樣設置高度為包裹背景色為透明：


由于標題還距離左右兩側有一定的邊距，并且接下來的所有內容都距離左右有一定邊距，此時直接設置父容器的左右內邊距是最方便的方法：

直接設置主要內容行的內邊距：
接著往標題行中添加文本，設置字體大小以及文本組件的寬度為100%：

此時頁面效果如下：

如果想尾巴弄一個遠程標記，只需要直接添加一個文本，設置小一點字號和背景顏色即可：


此時效果如下：

若想使當前原創(chuàng)標記有一點寬度，直接設置這個文本的內邊距即可：

那么顯示如下效果：

接著這個標題行里新建一個行，命名為時間和點贊：

設置高度為包裹透明色背景后，在內部添加兩個行，一個命名為左一個命名為右：

這兩個行依舊要設置對應的高度包裹、背景色透明，并且還需要設置兩個行的寬度為 50%，因為這兩行需要在同一行中進行顯示。設置完畢后在左行中添加一個文本用于記錄時間：

此時頁面效果如下：

但此時我們的時間和點贊區(qū)域應該有一定的內邊距，設置他們的父容器上下內邊距：

此時頁面顯示如下：

接著在右按鈕中添加一個按鈕，按鈕文本為點贊，設置其寬度以及字號，再設置邊框顏色、文字顏色以及背景色透明即可：

但此時再左邊顯示并不是我們想要的，我們想這個按鈕在右側顯示，那么此時需要設置右這一行的水平方向對其為右即可：

那么該部分內容即完成：

隨后再添加一個行，命名為富文本并且選擇高度為撐開即可：

接著在富文本行下添加一個富文本容器：

設置高度為 100%即可占滿整個富文本行：

隨后再通過富文本的編輯去顯示內容即可。

總結

以上是生活随笔為你收集整理的四、博客详情页完成《iVX低代码仿CSDN个人博客制作》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。