四、博客详情页完成《iVX低代码仿CSDN个人博客制作》

article/2025/10/14 17:06:41

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/

一、博客详情页分析

在这里插入图片描述
博客详情页大体分为顶部标题、发布时间、作者信息、博文内容,底部的评论我们在此不必做悬浮内容,咱们直接放到博文之下进行显示即可;顶部标题需要注意,不是只限于俩行,因为这是博文详情页,顶部标题肯定是需要显示完毕的,接下来就是发布时间和点赞,点赞在此是需要制作的,接着往下是一个作者信息,在此咱们只需要制作一个头像和右边的昵称即可,因为这是个人博客并不涉及关注内容,接着下面是富文本内容,富文本我们需要使用富文本容器进行显示,在此处咱们使用富文本框进行代替,在之后的内容编写时在进行对应的赋值即可。

剩下的评论区并不着急,咱们先把对应的内容进行实现。

二、博客详情页标题及发布时间制作

首先咱们先制作博客详情页的标题和发布时间,此时先把顶部的头部栏复制过来,点击前台添加一个页面,命名为详情页:
在这里插入图片描述
接着复制整个首页中的主要内容行到详情页之中,因为大体布局一致,所以只需要复制过来即可:
在这里插入图片描述
随后删除不必要的内容,只剩下头部即可:
在这里插入图片描述
随后在主要内容下新建一个行,命名为博文头部,在这个行中存放博文标题以及发表时间、点赞:
在这里插入图片描述
由于此时你并不清楚标题的具体长度,在此我们只需要设置当前博文头部行的高度为包裹、背景色为透明即可:
在这里插入图片描述
由于头部标题本身上内边距是有一定距离的,在此设置这个行的上内边距以及距离顶部的一段距离,这样才可以使上部分像有一个隔断的颜色,当然你也可以设置边距样式达到同样的效果:
在这里插入图片描述

接着设置内边距:

在这里插入图片描述
此时页面效果如下:
在这里插入图片描述

接着往这个行中添加一个行命名为标题,同样设置高度为包裹背景色为透明:
在这里插入图片描述
在这里插入图片描述
由于标题还距离左右两侧有一定的边距,并且接下来的所有内容都距离左右有一定边距,此时直接设置父容器的左右内边距是最方便的方法:

在这里插入图片描述

直接设置主要内容行的内边距:
在这里插入图片描述接着往标题行中添加文本,设置字体大小以及文本组件的宽度为100%:
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述

如果想尾巴弄一个远程标记,只需要直接添加一个文本,设置小一点字号和背景颜色即可:
在这里插入图片描述
在这里插入图片描述
此时效果如下:
在这里插入图片描述

若想使当前原创标记有一点宽度,直接设置这个文本的内边距即可:
在这里插入图片描述

那么显示如下效果:
在这里插入图片描述
接着这个标题行里新建一个行,命名为时间和点赞:

在这里插入图片描述
设置高度为包裹透明色背景后,在内部添加两个行,一个命名为左一个命名为右:
在这里插入图片描述
这两个行依旧要设置对应的高度包裹、背景色透明,并且还需要设置两个行的宽度为 50%,因为这两行需要在同一行中进行显示。设置完毕后在左行中添加一个文本用于记录时间:
在这里插入图片描述
此时页面效果如下:
在这里插入图片描述
但此时我们的时间和点赞区域应该有一定的内边距,设置他们的父容器上下内边距:
在这里插入图片描述
此时页面显示如下:
在这里插入图片描述

接着在右按钮中添加一个按钮,按钮文本为点赞,设置其宽度以及字号,再设置边框颜色、文字颜色以及背景色透明即可:
在这里插入图片描述

但此时再左边显示并不是我们想要的,我们想这个按钮在右侧显示,那么此时需要设置右这一行的水平方向对其为右即可:
在这里插入图片描述
那么该部分内容即完成:
在这里插入图片描述

随后再添加一个行,命名为富文本并且选择高度为撑开即可:
在这里插入图片描述
接着在富文本行下添加一个富文本容器:
在这里插入图片描述

设置高度为 100%即可占满整个富文本行:
在这里插入图片描述
随后再通过富文本的编辑去显示内容即可。


http://chatgpt.dhexx.cn/article/ZkZKik4Y.shtml

相关文章

博客中GIF动画超简单制作

前言: 在写博客的时候图片和视频是非常通俗易懂的,比文字表述更为清晰,有时候演示过程用动画效果更好,毕竟图片只是静态的,看不出整个过程。而录制成视频,体积大,保存发送也比较麻烦,最重要的事博客中不支持这种格式,所以制作成GIF动画,方便、占用空间又小、博客也支…

一、博客首页搭建搭建《iVX低代码仿CSDN个人博客制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、头部导航栏思路参考 首先我们可以查看CSDN的博客首页,从中查看一下布局: 在以上首页中,我们可以得知其顶部为一个整行,这个行内容左侧为一个logo&am…

《博客页面制作》教程

《博客页面制作》教程 一、《博客页面制作》第一部分 效果图&#xff1a; 参考代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>博客制作-第一部分</title><style type"text/css"&g…

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…

搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…

ES6转ES5,Traceur使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Traceur 使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…

Rxjava:interval的使用

以固定的时间间隔不断发射数据。 测试&#xff1a; Test public void testSimple(){Observable.interval(1, TimeUnit.SECONDS).subscribe(new Action1<Long>() {Overridepublic void call(Long aLong) {System.out.println("aLong " aLong);}});for (;;){…

FlinkSql系列6之 Interval Join

FlinkSql系列6之 Interval Join 前言 本次我们来学习flinksql的Interval Join,这个方式主要是针对两个流在一定时间区间内的join,支持事件时间和处理时间&#xff0c;而且这个流每次只会产生一条数据&#xff0c;是一个完全的追加流。 一、Interval Join是什么&#xff1f; I…

Flink Interval Join使用以及源码解析

1、Interval Join 概述 在之前的Join算子中&#xff0c;一般使用的是coGroup算子&#xff0c;因为一个算子可以提供多种语义&#xff0c;但是也是有一些弊端的。因为coGroup只能实现在同一个窗口的两个数据流之间进行join&#xff0c;在实际的计算过程中&#xff0c;往往会遇到…

mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用

1. INTERVAL INTERVAL代表的是时间间隔 MySQL中的时间间隔类型有如下几种: 1.1 利用INTERVAL做时间的加减法 示例: 加法:SQL>SELECT DATE 2018-11-01 + INTERVAL 10 11 DAY_HOUR; 结果:2018-11-11 11:00:00 减法:SQL> select date 2018-11-11 11:00:00 -INTERVAL 10 11…

ORACLE中的INTERVAL

ORACLE中的INTERVAL 关于INTERVALINTERVAL类型INTERVAL YEAR TO MONTHINTERVAL DAY TO SECOND 关于INTERVAL oracle中提供了两种日期时间类型&#xff0c;分别是DATE和TIMESTAMP用来存储时间点的数据&#xff0c;同时还提供了INTERVAL来存储一段时间的数据。例如你2022年11月1…

Flink SQL之Interval Joins

1.Interval Joins&#xff08;区间Join&#xff09; 区间是双流join的优化&#xff0c;基于处理时间或事件时间&#xff0c;在一定时间区间内数据&#xff0c;相同的key进行join&#xff08;支持 Batch\Streaming&#xff09;。Interval Join 可以让一条流去 Join 另一条流中前…

MySQL INTERVAL 关键字指南

在本教程中&#xff0c;我们将了解 MySQL INTERVAL 关键字及其值以对日期和时间算术执行操作。那么&#xff0c;让我们开始吧&#xff01; 另请阅读&#xff1a;MySQL 中的 While 循环 – 完整参考 MySQL INTERVAL 简介 在 MySQL 中&#xff0c;INTERVAL 关键字用于添加或减…

Flink之IntervalJoin介绍

InterValJoin算子 间隔流&#xff0c;一条流去join另一条流去过去一段时间内的数据&#xff0c;该算子将keyedStream与keyedStream转化为DataStream&#xff1b;再给定的时间边界内&#xff08;默认包含边界&#xff09;&#xff0c;相当于一个窗口&#xff0c;按指定的key对俩…

Mysql的INTERVAL()函数和INTERVAL关键字

一&#xff0c;INTERVAL()函数 INTERVAL()函数可以返回分段后的结果&#xff0c;语法如下&#xff1a; INTERVAL(N,N1,N2,N3,..........) 其中&#xff0c;N是要判断的数值&#xff0c;N1,N2,N3,...是分段的间隔。 这个函数的返回值是段的位置&#xff1a; 如果N<N1&am…