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

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

一、博客详情页分析

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

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

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

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

接着设置内边距:

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

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

在这里插入图片描述

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

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

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

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.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体系结构主体部分的源码已合并到内核主线之中,其余相关代码正在进…

【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/ 五秒挑战游戏指的是点击一个按钮开始计时,随后需要用户再次点击计时按钮,将会停止计时,当计时的时间等于五秒时将挑战成功,否…

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

后台页制作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标准引擎之后,浏览器中可以执行…

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

遇到这种问题应该是迁移SVN库时丢失了文件夹引起的,直接在服务器上找到对应项目的db文件夹,手动创建“transactions”目录和“txn-protorevs”目录即可正常提交。

【MATLAB统计分析与应用100例】案例013:matlab读取Excel数据,调用nlinfit函数作一元非线性回归

1. 一元线性回归分析效果预览 2. matlab完整实现代码 %读取数据,绘制散点图** HeadData = xlsread(examp08_02.xls); %从Excel文

发布功能完成02《ivx低代码签到系统制作》

制作iVX 低代码项目需要进入在线IDE:https://editor.ivx.cn/ 一、发布功能思考、数据库、服务创建 上一节我们制作了后台的页面,那么此时我们应该需要制作发布功能了,那么在制作之前,我们应该思考一下如何制作这个签到内容发布的…

WPF 实现简易北京地铁效果图

本文经原作者授权以原创方式二次分享,欢迎转载、分享。原文作者:眾尋原文地址: https://www.cnblogs.com/ZXdeveloper/p/8600785.html前言这个是百度地图上北京地铁的地址,我们先看下百度上面的效果图;我要实现的内容比…

C#学习笔记-Windows窗体自定义初始位置

根据屏幕大小定义初始位置: (这个不是难,但是最近常常忘记,记着方便查看。) 1 //获取当前屏幕的长和宽2 int ScreenX Screen.PrimaryScreen.Bounds.Width;3 int ScreenY Screen…

【MATLAB统计分析与应用100例】案例014:matlab读取Excel数据,调用stepwise函数作交互式逐步回归分析

文章目录 1. 交互式逐步回归分析结果预览2. 完整matlab代码1. 交互式逐步回归分析结果预览 2. 完整matlab代码 % 从Excel文件examp08_03.xls中读取数值型数据 xydata = xlsread(examp08_03.xls); y = xydata<

MsSql 自定义分数段,按分数段统计考试人次

--分数段分布 DECLARE levels VARCHAR(100) 10,20,30,40,50,60,70,80,90,100; --自定义分数段 DECLARE paperId VARCHAR(100)0000000000001019--试卷编号 WITH tbTemp AS (--处理分数段SELECT L.levelFROM (SELECT [value] CONVERT(XML, <v> REPLACE(levels, ,, &l…

opencv---颜色空间转化并实现物体跟踪

一、图像处理的基本操作 因为这是第一篇写opencv的笔记&#xff0c;故先讲讲在python下写opencv的基本操作。总共总结了三点如下&#xff1a; 开头一定要加编码声明:-*- coding: utf-8 -*-python下记得引入opencv模块:import cv2要知道如何读取并展示图片,代码如下:# -*- codin…