制作iVX 低代碼項目需要進入在線IDE:https://editor.ivx.cn/
一、博客詳情頁分析
博客詳情頁大體分為頂部標題、發布時間、作者信息、博文內容,底部的評論我們在此不必做懸浮內容,咱們直接放到博文之下進行顯示即可;頂部標題需要注意,不是只限于倆行,因為這是博文詳情頁,頂部標題肯定是需要顯示完畢的,接下來就是發布時間和點贊,點贊在此是需要制作的,接著往下是一個作者信息,在此咱們只需要制作一個頭像和右邊的昵稱即可,因為這是個人博客并不涉及關注內容,接著下面是富文本內容,富文本我們需要使用富文本容器進行顯示,在此處咱們使用富文本框進行代替,在之后的內容編寫時在進行對應的賦值即可。
剩下的評論區并不著急,咱們先把對應的內容進行實現。
二、博客詳情頁標題及發布時間制作
首先咱們先制作博客詳情頁的標題和發布時間,此時先把頂部的頭部欄復制過來,點擊前臺添加一個頁面,命名為詳情頁:
接著復制整個首頁中的主要內容行到詳情頁之中,因為大體布局一致,所以只需要復制過來即可:
隨后刪除不必要的內容,只剩下頭部即可:
隨后在主要內容下新建一個行,命名為博文頭部,在這個行中存放博文標題以及發表時間、點贊:
由于此時你并不清楚標題的具體長度,在此我們只需要設置當前博文頭部行的高度為包裹、背景色為透明即可:
由于頭部標題本身上內邊距是有一定距離的,在此設置這個行的上內邊距以及距離頂部的一段距離,這樣才可以使上部分像有一個隔斷的顏色,當然你也可以設置邊距樣式達到同樣的效果:
接著設置內邊距:
此時頁面效果如下:
接著往這個行中添加一個行命名為標題,同樣設置高度為包裹背景色為透明:
由于標題還距離左右兩側有一定的邊距,并且接下來的所有內容都距離左右有一定邊距,此時直接設置父容器的左右內邊距是最方便的方法:
直接設置主要內容行的內邊距:
接著往標題行中添加文本,設置字體大小以及文本組件的寬度為100%:
此時頁面效果如下:
如果想尾巴弄一個遠程標記,只需要直接添加一個文本,設置小一點字號和背景顏色即可:
此時效果如下:
若想使當前原創標記有一點寬度,直接設置這個文本的內邊距即可:
那么顯示如下效果:
接著這個標題行里新建一個行,命名為時間和點贊:
設置高度為包裹透明色背景后,在內部添加兩個行,一個命名為左一個命名為右:
這兩個行依舊要設置對應的高度包裹、背景色透明,并且還需要設置兩個行的寬度為 50%,因為這兩行需要在同一行中進行顯示。設置完畢后在左行中添加一個文本用于記錄時間:
此時頁面效果如下:
但此時我們的時間和點贊區域應該有一定的內邊距,設置他們的父容器上下內邊距:
此時頁面顯示如下:
接著在右按鈕中添加一個按鈕,按鈕文本為點贊,設置其寬度以及字號,再設置邊框顏色、文字顏色以及背景色透明即可:
但此時再左邊顯示并不是我們想要的,我們想這個按鈕在右側顯示,那么此時需要設置右這一行的水平方向對其為右即可:
那么該部分內容即完成:
隨后再添加一個行,命名為富文本并且選擇高度為撐開即可:
接著在富文本行下添加一個富文本容器:
設置高度為 100%即可占滿整個富文本行:
隨后再通過富文本的編輯去顯示內容即可。