四、博客详情页完成《iVX低代码仿CSDN个人博客制作》
制作iVX 低代码项目需要进入在线IDE：https://editor.ivx.cn/
一、博客详情页分析
博客详情页大体分为顶部标题、发布时间、作者信息、博文内容，底部的评论我们在此不必做悬浮内容，咱们直接放到博文之下进行显示即可；顶部标题需要注意，不是只限于俩行，因为这是博文详情页，顶部标题肯定是需要显示完毕的，接下来就是发布时间和点赞，点赞在此是需要制作的，接着往下是一个作者信息，在此咱们只需要制作一个头像和右边的昵称即可，因为这是个人博客并不涉及关注内容，接着下面是富文本内容，富文本我们需要使用富文本容器进行显示，在此处咱们使用富文本框进行代替，在之后的内容编写时在进行对应的赋值即可。
剩下的评论区并不着急，咱们先把对应的内容进行实现。
二、博客详情页标题及发布时间制作
首先咱们先制作博客详情页的标题和发布时间，此时先把顶部的头部栏复制过来，点击前台添加一个页面，命名为详情页：
接着复制整个首页中的主要内容行到详情页之中，因为大体布局一致，所以只需要复制过来即可：
随后删除不必要的内容，只剩下头部即可：
随后在主要内容下新建一个行，命名为博文头部，在这个行中存放博文标题以及发表时间、点赞：
由于此时你并不清楚标题的具体长度，在此我们只需要设置当前博文头部行的高度为包裹、背景色为透明即可：
由于头部标题本身上内边距是有一定距离的，在此设置这个行的上内边距以及距离顶部的一段距离，这样才可以使上部分像有一个隔断的颜色，当然你也可以设置边距样式达到同样的效果：
接着设置内边距：
此时页面效果如下：
接着往这个行中添加一个行命名为标题，同样设置高度为包裹背景色为透明：
由于标题还距离左右两侧有一定的边距，并且接下来的所有内容都距离左右有一定边距，此时直接设置父容器的左右内边距是最方便的方法：
直接设置主要内容行的内边距：
接着往标题行中添加文本，设置字体大小以及文本组件的宽度为100%：
此时页面效果如下：
如果想尾巴弄一个远程标记，只需要直接添加一个文本，设置小一点字号和背景颜色即可：
此时效果如下：
若想使当前原创标记有一点宽度，直接设置这个文本的内边距即可：
那么显示如下效果：
接着这个标题行里新建一个行，命名为时间和点赞：
设置高度为包裹透明色背景后，在内部添加两个行，一个命名为左一个命名为右：
这两个行依旧要设置对应的高度包裹、背景色透明，并且还需要设置两个行的宽度为 50%，因为这两行需要在同一行中进行显示。设置完毕后在左行中添加一个文本用于记录时间：
此时页面效果如下：
但此时我们的时间和点赞区域应该有一定的内边距，设置他们的父容器上下内边距：
此时页面显示如下：
接着在右按钮中添加一个按钮，按钮文本为点赞，设置其宽度以及字号，再设置边框颜色、文字颜色以及背景色透明即可：
但此时再左边显示并不是我们想要的，我们想这个按钮在右侧显示，那么此时需要设置右这一行的水平方向对其为右即可：
那么该部分内容即完成：
随后再添加一个行，命名为富文本并且选择高度为撑开即可：
接着在富文本行下添加一个富文本容器：
设置高度为 100%即可占满整个富文本行：
随后再通过富文本的编辑去显示内容即可。
四、博客详情页完成《iVX低代码仿CSDN个人博客制作》相关推荐
- php博客详情页怎么做,简书仿站报告（四）：如何制作文章详情页
简书仿站的文章详情页的基本功能跟首页差不多,因此制作的过程我就不再详细讲述.而是换一个角度,通过介绍那些文章详情页会使用到的函数的具体使用方法来更深入的理解制作的过程. 文章详情页的制作方法 1.建s ...
- 页面插件集成：博客详情页
导航条内容不变 1.修改博客详情页的排版格式 2.中间内容: <!-- 中间内容--> <div class="m-container-small m-padded-tb- ...
- Django学习之旅（六）自定义URL规则（博客详情页）
本篇博客同样参照追梦人物老师的博客详情页课程,记录自己的学习过程.本篇博客的重点在于自定义URL规则的使用. 整体结构 -- urls模块中自定义URL --- 从访问路径中获取参数pk -- 配置视 ...
- 后台页制作01《ivx低代码签到系统制作》
制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一.签到系统思考 签到系统一般是指公布一个签到链接或者二维码,随后用户扫码后即可完成签到. 那如何制作呢?首先我 ...
- iVX低代码平台系列详解 -- 概述篇(二)
写在前面 ivx动手尝试电梯:ivx在线编辑器 iVX系列教程持续更新中 上篇文章可看:iVX低代码平台系列详解 – 概述篇(一) ivx目录 写在前面 一.iVX优势 1.快速学习 2.快速开发 3 ...
- 发布功能完成02《ivx低代码签到系统制作》
制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一.发布功能思考.数据库.服务创建 上一节我们制作了后台的页面,那么此时我们应该需要制作发布功能了,那么在制作之 ...
- 签到功能完成03《ivx低代码签到系统制作》
制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一.签到页制作 上一节完成了签到内容的发布,那我们接下来如何制作一个签到页面并且签到呢? 此时我们先创建一个页面 ...
- iVX低代码平台系列详解 -- 概述篇(一)
iVX目录 iVX低代码平台概述 1.iVX是什么? iVX--首个通用无代码开发平台 iVX的三大属性和两大能力 2.iVX有什么用? iVX试图解决什么问题? 3.iVX研发目标是什么? 4.iV ...
- 美食杰项目（四）美食详情页
目录 前言: 具体样式 实现效果 代码思路 相应的组件 相关代码 总结: 前言: 本节给大家讲的是美食杰项目的美食详情页的主要功能和具体样式,希望我的代码能够帮助到你,也希望你能够看懂有所收获 具体样 ...
- 小程序中的权限设计_低代码布道师的博客-CSDN博客
日常我们开发小程序的时候,经常需要考虑权限如何设计,比如在我的页面,管理员可以看到一些菜单,而普通用户可以看到另外一些菜单.那如何设计这种带权限的功能呢?本文就以低代码工具为例,看看低代码中是如何设计 ...
最新文章
- iOS 数组中的模型去重
- bootstrap框架下 单选按钮组的选中以及取值问题
- 关于js的回调函数的一点看法
- 获取后台数据-Http
- 命令点无效怎么处理_怎么更好处理闲置包包，买包卖包都要记住这5点
- 递归和分治思想及其应用
- java中线性结构的例子_java数据结构--线性结构
- linux arm下硬件驱动程序放哪里,Arm-Linux摄像头驱动程序的移植
- Java 使用SAX解析XML文档
- 第五章 PCB 设计规则设置及 PCB 绘制
- c语言最好的文本编辑器,【软件分享】两个小巧好用的C语言编辑器
- python gbk 相互转换 utf8
- ARM 汇编基础教程系列
- Excel函数、快捷键等
- 用Html实现世纪佳缘交友注册页面是什么体验？
- Win8.1/Win8/Win7桌面图标无法拖动怎么办
- Keil5 安装使用
- 『NLP学习笔记』HugeGraph套件安装与使用指南
- IEEE之后，学术政治化会成为人类的“潘多拉魔盒”吗？
- html5保护环境作品,保护环境的绘画作品图片