制作iVX 低代碼項(xiàng)目需要進(jìn)入在線IDE：https://editor.ivx.cn/

一、博客詳情頁(yè)分析

博客詳情頁(yè)大體分為頂部標(biāo)題、發(fā)布時(shí)間、作者信息、博文內(nèi)容，底部的評(píng)論我們?cè)诖瞬槐刈鰬腋?nèi)容，咱們直接放到博文之下進(jìn)行顯示即可；頂部標(biāo)題需要注意，不是只限于倆行，因?yàn)檫@是博文詳情頁(yè)，頂部標(biāo)題肯定是需要顯示完畢的，接下來(lái)就是發(fā)布時(shí)間和點(diǎn)贊，點(diǎn)贊在此是需要制作的，接著往下是一個(gè)作者信息，在此咱們只需要制作一個(gè)頭像和右邊的昵稱即可，因?yàn)檫@是個(gè)人博客并不涉及關(guān)注內(nèi)容，接著下面是富文本內(nèi)容，富文本我們需要使用富文本容器進(jìn)行顯示，在此處咱們使用富文本框進(jìn)行代替，在之后的內(nèi)容編寫時(shí)在進(jìn)行對(duì)應(yīng)的賦值即可。

剩下的評(píng)論區(qū)并不著急，咱們先把對(duì)應(yīng)的內(nèi)容進(jìn)行實(shí)現(xiàn)。

二、博客詳情頁(yè)標(biāo)題及發(fā)布時(shí)間制作

首先咱們先制作博客詳情頁(yè)的標(biāo)題和發(fā)布時(shí)間，此時(shí)先把頂部的頭部欄復(fù)制過(guò)來(lái)，點(diǎn)擊前臺(tái)添加一個(gè)頁(yè)面，命名為詳情頁(yè)：

接著復(fù)制整個(gè)首頁(yè)中的主要內(nèi)容行到詳情頁(yè)之中，因?yàn)榇篌w布局一致，所以只需要復(fù)制過(guò)來(lái)即可：

隨后刪除不必要的內(nèi)容，只剩下頭部即可：

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

由于此時(shí)你并不清楚標(biāo)題的具體長(zhǎng)度，在此我們只需要設(shè)置當(dāng)前博文頭部行的高度為包裹、背景色為透明即可：

由于頭部標(biāo)題本身上內(nèi)邊距是有一定距離的，在此設(shè)置這個(gè)行的上內(nèi)邊距以及距離頂部的一段距離，這樣才可以使上部分像有一個(gè)隔斷的顏色，當(dāng)然你也可以設(shè)置邊距樣式達(dá)到同樣的效果：

接著設(shè)置內(nèi)邊距：

此時(shí)頁(yè)面效果如下：

接著往這個(gè)行中添加一個(gè)行命名為標(biāo)題，同樣設(shè)置高度為包裹背景色為透明：


由于標(biāo)題還距離左右兩側(cè)有一定的邊距，并且接下來(lái)的所有內(nèi)容都距離左右有一定邊距，此時(shí)直接設(shè)置父容器的左右內(nèi)邊距是最方便的方法：

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

此時(shí)頁(yè)面效果如下：

如果想尾巴弄一個(gè)遠(yuǎn)程標(biāo)記，只需要直接添加一個(gè)文本，設(shè)置小一點(diǎn)字號(hào)和背景顏色即可：


此時(shí)效果如下：

若想使當(dāng)前原創(chuàng)標(biāo)記有一點(diǎn)寬度，直接設(shè)置這個(gè)文本的內(nèi)邊距即可：

那么顯示如下效果：

接著這個(gè)標(biāo)題行里新建一個(gè)行，命名為時(shí)間和點(diǎn)贊：

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

這兩個(gè)行依舊要設(shè)置對(duì)應(yīng)的高度包裹、背景色透明，并且還需要設(shè)置兩個(gè)行的寬度為 50%，因?yàn)檫@兩行需要在同一行中進(jìn)行顯示。設(shè)置完畢后在左行中添加一個(gè)文本用于記錄時(shí)間：

此時(shí)頁(yè)面效果如下：

但此時(shí)我們的時(shí)間和點(diǎn)贊區(qū)域應(yīng)該有一定的內(nèi)邊距，設(shè)置他們的父容器上下內(nèi)邊距：

此時(shí)頁(yè)面顯示如下：

接著在右按鈕中添加一個(gè)按鈕，按鈕文本為點(diǎn)贊，設(shè)置其寬度以及字號(hào)，再設(shè)置邊框顏色、文字顏色以及背景色透明即可：

但此時(shí)再左邊顯示并不是我們想要的，我們想這個(gè)按鈕在右側(cè)顯示，那么此時(shí)需要設(shè)置右這一行的水平方向?qū)ζ錇橛壹纯?#xff1a;

那么該部分內(nèi)容即完成：

隨后再添加一個(gè)行，命名為富文本并且選擇高度為撐開(kāi)即可：

接著在富文本行下添加一個(gè)富文本容器：

設(shè)置高度為 100%即可占滿整個(gè)富文本行：

隨后再通過(guò)富文本的編輯去顯示內(nèi)容即可。

總結(jié)

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

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