四、博客詳情頁完成《iVX低代碼仿CSDN個人博客制作》

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

一、博客詳情頁分析

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

剩下的評論區并不著急,咱們先把對應的內容進行實現。

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

首先咱們先制作博客詳情頁的標題和發布時間,此時先把頂部的頭部欄復制過來,點擊前臺添加一個頁面,命名為詳情頁:
在這里插入圖片描述
接著復制整個首頁中的主要內容行到詳情頁之中,因為大體布局一致,所以只需要復制過來即可:
在這里插入圖片描述
隨后刪除不必要的內容,只剩下頭部即可:
在這里插入圖片描述
隨后在主要內容下新建一個行,命名為博文頭部,在這個行中存放博文標題以及發表時間、點贊:
在這里插入圖片描述
由于此時你并不清楚標題的具體長度,在此我們只需要設置當前博文頭部行的高度為包裹、背景色為透明即可:
在這里插入圖片描述
由于頭部標題本身上內邊距是有一定距離的,在此設置這個行的上內邊距以及距離頂部的一段距離,這樣才可以使上部分像有一個隔斷的顏色,當然你也可以設置邊距樣式達到同樣的效果:
在這里插入圖片描述

接著設置內邊距:

在這里插入圖片描述
此時頁面效果如下:
在這里插入圖片描述

接著往這個行中添加一個行命名為標題,同樣設置高度為包裹背景色為透明:
在這里插入圖片描述
在這里插入圖片描述
由于標題還距離左右兩側有一定的邊距,并且接下來的所有內容都距離左右有一定邊距,此時直接設置父容器的左右內邊距是最方便的方法:

在這里插入圖片描述

直接設置主要內容行的內邊距:
在這里插入圖片描述接著往標題行中添加文本,設置字體大小以及文本組件的寬度為100%:
在這里插入圖片描述
此時頁面效果如下:
在這里插入圖片描述

如果想尾巴弄一個遠程標記,只需要直接添加一個文本,設置小一點字號和背景顏色即可:
在這里插入圖片描述
在這里插入圖片描述
此時效果如下:
在這里插入圖片描述

若想使當前原創標記有一點寬度,直接設置這個文本的內邊距即可:
在這里插入圖片描述

那么顯示如下效果:
在這里插入圖片描述
接著這個標題行里新建一個行,命名為時間和點贊:

在這里插入圖片描述
設置高度為包裹透明色背景后,在內部添加兩個行,一個命名為左一個命名為右:
在這里插入圖片描述
這兩個行依舊要設置對應的高度包裹、背景色透明,并且還需要設置兩個行的寬度為 50%,因為這兩行需要在同一行中進行顯示。設置完畢后在左行中添加一個文本用于記錄時間:
在這里插入圖片描述
此時頁面效果如下:
在這里插入圖片描述
但此時我們的時間和點贊區域應該有一定的內邊距,設置他們的父容器上下內邊距:
在這里插入圖片描述
此時頁面顯示如下:
在這里插入圖片描述

接著在右按鈕中添加一個按鈕,按鈕文本為點贊,設置其寬度以及字號,再設置邊框顏色、文字顏色以及背景色透明即可:
在這里插入圖片描述

但此時再左邊顯示并不是我們想要的,我們想這個按鈕在右側顯示,那么此時需要設置右這一行的水平方向對其為右即可:
在這里插入圖片描述
那么該部分內容即完成:
在這里插入圖片描述

隨后再添加一個行,命名為富文本并且選擇高度為撐開即可:
在這里插入圖片描述
接著在富文本行下添加一個富文本容器:
在這里插入圖片描述

設置高度為 100%即可占滿整個富文本行:
在這里插入圖片描述
隨后再通過富文本的編輯去顯示內容即可。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/286091.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286091.shtml
英文地址,請注明出處:http://en.pswp.cn/news/286091.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【原創】erlang 模塊之 application

2019獨角獸企業重金招聘Python工程師標準>>> kernel-2.15.2 中的內容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 轉載于:https://my.oschina.net/moooofly/blog/595122

RabbitMQ詳解(三)

一、分發到多Consumer(fanout) 二、Routing路由(Direct) 三、主題路由(Topic)一、分發到多Consumer(fanout)將同一個Message deliver到多個Consumer中。這個模式也被稱為"publish/subscribe" 創建一個日志系統,包含兩部分:第一部分發出log(Pro…

重磅 | Linux內核5.19初步支持LoongArch架構

經過龍芯中科與內核社區一年多的緊密合作,北京時間2022年6月4日清晨,Linux內核社區正式合并LoongArch架構支持代碼。隨著Linux-5.19的rc1版本的正式發布,LoongArch體系結構主體部分的源碼已合并到內核主線之中,其余相關代碼正在進…

C語言試題五十之請編寫一個函數void function(char *ss),其功能時:將字符串ss中所有下標為奇數位置上的字母轉換為大寫(若位置上不是字母,則不轉換)。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

【MATLAB統計分析與應用100例】案例011:matlab讀取Excel數據,調用regress函數作一元線性回歸分析

數據擬合效果預覽: 文章目錄 1. 讀取數據,繪制散點圖2. 計算相關系數3. 繪制回歸直線4. 剔除異常數據,重新調用regress函數作一元線性回歸1. 讀取數據,繪制散點圖 ClimateData = xlsread(examp08_01.xls); % 從Excel文件讀取數據 x &

“*** IS NOT TRANSLATED IN …….. 解決辦法

首先引起提示的原因是因為Lint 代碼檢查工具發現你的項目中(或者引用的三方庫)有部分string.xml文件內容做了國際化操作,但卻不完整,有些文本內容并沒有相應的國際化翻譯,在android開發中常見于項目引用的Libraries第三…

[轉] ArcEngine 產生專題圖

小生原文 ArcEngine 產生專題圖 ArcEngine提供多個著色對象用于產生專題圖,可以使用標準著色方案,也可以自定義著色方案,ArcEngine提供8中標準著色方案。 一、SimpleRenderer專題圖 是使用單一符號進行著色分類,不涉及對要素的數據…

iVX無代碼挑戰五秒游戲制作

一、五秒挑戰游戲簡介及思考 制作iVX 低代碼項目需要進入在線IDE:https://editor.ivx.cn/ 五秒挑戰游戲指的是點擊一個按鈕開始計時,隨后需要用戶再次點擊計時按鈕,將會停止計時,當計時的時間等于五秒時將挑戰成功,否…

C語言試題五十一之已知學生的記錄是由學號和學習成績構成,n名學生的數據已存入s結構體數組中。請編寫函數fun,該函數的功能是:找出成績最高的學生記錄,通過形參返回主函數(規定只有一個最高分)。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

CSS 巧用 :before和:after

前幾天的晚上較全面的去看了下css的一些文檔和資料,大部分的樣式運用都沒什么大問題了,只是有些許較陌生,但是也知道他們的存在和實現的是什么樣式。今天主要想在這篇學習筆記中寫的也不多,主要是針對:before和:after寫一些內容&a…

MAUI 入門教程系列(4.通用主機)

前言對于ASP.NET Core 開發人員而言, 這并不陌生, 當ASP.NET Core應用程序啟動時, 會創建默認的應用程序主機, 我們可以為應用程序配置所有的依賴關系、系統設置, 最終啟動。如下所示:using IHost host Host.CreateDefaultBuilder(args).ConfigureServices((_, services) >…

【MATLAB統計分析與應用100例】案例012:matlab讀取Excel數據,調用robustfit函數作穩健回歸

穩健回歸效果預覽: 文章目錄 1. 讀取數據2. 調用robustfit函數作穩健回歸3 .繪制殘差和權重的散點圖4. 繪制regress函數和robustfit函數對應的回歸直線5. 擬合效果1. 讀取數據 ClimateData = xlsread(examp08_01.xls); % 從Excel文件讀取數據 x

Android單擊、長按獲取當前觸點坐標下(TextView)文字字符

package com.*.*.*.utils;import android.graphics.Rect; import android.text.Layout; import android.widget.TextView;public class TextViewUtils {/**獲取TextView某一個字符的坐標位置return 返回的是相對坐標parms tvparms index 字符索引*/public static Rect getTextV…

后臺頁制作01《ivx低代碼簽到系統制作》

制作iVX 低代碼項目需要進入在線IDE:https://editor.ivx.cn/ 一、簽到系統思考 簽到系統一般是指公布一個簽到鏈接或者二維碼,隨后用戶掃碼后即可完成簽到。 那如何制作呢?首先我們可以先不考慮簽到頁面的制作,既然簽到暫時沒有…

個人作業-Week2

第一部分 調研, 評測 運行平臺 win 8 軟件版本:微軟必應詞典桌面版 3.5.2 BUG標題:必應背單詞無法發音 BUG詳細描述:如圖,左邊為必應詞典該單詞的搜索,可以發音,而右邊必應背單詞中該單詞的發音…

Blazor WebAssembly + Grpc Web=未來?

Blazor WebAssembly是什么首先來說說WebAssembly是什么,WebAssembly是一個可以使C#,Java,Golang等靜態強類型編程語言,運行在瀏覽器中的標準,瀏覽器廠商基于此標準實現執行引擎。在實現了WebAssembly標準引擎之后,瀏覽器中可以執行…

C語言試題五十二之學生的記錄由學號和成績組稱個,n名大學生得數據已在主函數中放入結構體數組a中,請編寫函數fun,它的功能時:按分數的高低排列學生的記錄,高分在前。

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 請編寫一個…

Xtrabackup備份MySQL

一、安裝Xtrabackup 1234# wget --no-check-certificate http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona-release-0.1-4.noarch.rpm# rpm -ivh percona-release-0.1-4.noarch.rpm# yum list | grep percona# yum -y install percona-xtrabackup-24二、…

Can't create directory 'E:\Repositories\***\db\transactions\138-41.txn':

遇到這種問題應該是遷移SVN庫時丟失了文件夾引起的,直接在服務器上找到對應項目的db文件夾,手動創建“transactions”目錄和“txn-protorevs”目錄即可正常提交。

[它山之石] 一件事情,假設你不能說清楚,十有八九你就做不好

記得有一次開會。我的頭兒說了標題所寫的這句話,自己深以為然。 有過較多解決這個問題的經歷的人可能會有這種感覺,非常多時候,面對一個問題。我們即使沒有全然將之想清 楚。也可以基于已有的經驗給出一個可以work的解決方式,當然這樣的情況下…