SpringBoot个人博客开发（二）----博客详情页面
发布时间
阅读量：
阅读量
博客详情页面
--------------------开始--------------------------
导航页和页尾等信息保持不变，只需改动中间信息即可
改变中间信息开始
创建Blog.html
复制index的全部代码，然后删除掉中间部分
此时页面如图
在预留位置添加中间区域划分内容。该区域划分为头部、图片区域、博客内容、博客信息以及留言五个部分。其中 blog 信息区除外的部分采用 segment 组件进行设计与实现；而 blog 信息区则使用 message 组件，并附加 attached 属性以实现拼接功能。
<div class="ui top attached segment">头部</div>
<div class="ui attached segment">图片区域</div>
<div class="ui attached segment">内容</div>
<div class="ui attached message">博客信息</div>
<div class="ui attached segment">留言区域</div>
如图
区域显示过于宽广。
为上层容器增添自定义的 CSS 样式规则，并将其命名为为主容器小版样式表 m-container-small:。
位于…/static/css/me.css文件内。
将它们用 DIV元素包裹起来，则会呈现为图形化界面效果。
加入注释
方便调试
保持与首页样式的一致性, 包含图标、发布时间、浏览量三部分内容, 请直接按照首页面的内容进行编写。
<!--herder-->
<div class="ui top attached segment">
<div class="ui horizontal link list">
<idv class="item">
<img src="../static/images/demo.jpg" alt="" width="100"
height="100" class="ui avatar image">
<div class="content"><a href="#" class="header">Admin</a></div>
</idv>
<div class="item">
<i class="calendar icon"></i> 年-月-0日
</div>
<div class="item">
<i class="eye icon"></i> 浏览量
</div>
</div>
</div>效果图
----图片区----
直接创建一个 ui segment 的容器，里面加入 img即可：
<!--图片-->
<div class="ui attached segment">
<div class="ui attached segment">
<img src="../static/images/demo.jpg" alt="" class="ui rounded image">
</div>
</div>效果图
-----博客主体-----
该区域先采用 ui segment生成一个容器，在其中放置一个 label元素，并通过 ringht aligned样式使其整体靠右边缘对齐。为了去除容器边框线条，在配置时选择 basic样式选项
关于标题展示方式，在设置部分应用 ui center aligned header样式使得标题居中显示。在内容部分，则采用 p标签进行定义，并根据实际输入情况进行适当调整
<!--内容-->
<div class="ui attached segment">
<!--原创\转载-->
<div class="ui right aligned basic segment">
<div class="ui pink label basic">原创</div>
</div>
<!--内容-->
<h2 class="ui center aligned header">Blog</h2><br>
<!--主题-->
<div id="content" class="m-padded-lr m-padded-tb-tiny">
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
</div>
<!--标签-->
<div class="m-padded-lr m-padded-tb-tiny">
<div class="ui basic teal left pointing label">Blog</div>
</div>
<!-- 赞赏按钮 -->
<div class="ui center aligned basic segment">
<button id="payButton" class="ui pink basic circular button">赞赏</button>
</div>
<!-- 赞赏弹出 -->
<div class="ui payQR flowing popup transition hidden">
<div class="ui blue basic label">
<div class="ui images" style="font-size: inherit !important;">
<div class="image">
<img src="../static/images/demo.jpg" alt="" class="ui rounded bordered image"
style="width: 110px;">
<div>支付宝</div>
</div>
<div class="image">
<img src="../static/images/demo.jpg" alt="" class="ui rounded bordered image"
style="width: 110px;">
<div>微信</div>
</div>
</div>
</div>
</div>
</div>其中包含了赞赏，标签
整体效果如图
采用 grid 布局方式实现码率分配
<!--博客信息-->
<div class="ui attached message">
<div class="ui middle aligned grid">
<div class="eleven wide column">
<ui class="list">
<li style="color: #f698e3">作者：Blog（联系作者）</li>
<li style="color: #f698e3">发表时间：年-月-日</li>
<li style="color: #f698e3">版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
<li style="color: #f698e3">转载：请在文末添加作者微信二维码</li>
</ui>
</div>
<div class="five wide column">
<img src="../static/images/demo.jpg" alt=""
class="ui right floated rounded bordered image" width="110px">
</div>
</div>
</div>如图
--------评论区-------
分为回复框、姓名、邮箱、提交按钮四个部分，除过回复框均使用 feild组件，回复框使用 textarea即可实现
<!--footer留言-->
<div class="ui bottom attached segment">
<!--留言列表-->
<div class="ui teal segment">
<div class="ui comments">
<h3 class="ui dividing header">评论</h3>
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试4</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
叽里呱啦？？？？？
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试3</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
<p>叽里呱啦！！</p>
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试2</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
叽里呱啦！
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
叽里呱啦
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<!--提交留言-->
<div class="ui form">
<form class="ui reply form">
<div class="field">
<textarea placeholder="留言内容"></textarea>
</div>
<div class="fields">
<div class="field m-mobile-wide">
<div class="ui left icon input m-margin-bottom-small">
<i class="user icon"></i>
<input type="text" name="nickname" placeholder="昵称">
</div>
</div>
<div class="field m-mobile-wide">
<div class="ui left icon input m-margin-bottom-small">
<i class="mail icon"></i>
<input type="text" name="email" placeholder="邮箱">
</div>
</div>
<div class="ui teal labeled submit icon button m-margin-bottom-small m-mobile-wide">
<i class="icon edit"></i> 发表
</div>
</div>
</form>
</div>
</div>效果如图
整个主体编辑完毕
po主体代码
<!--详情页主体-->
<div class="m-padded-tb-large m-container-small">
<div class="ui container">
<!--herder-->
<div class="ui top attached segment">
<div class="ui horizontal link list">
<idv class="item">
<img src="../static/images/demo.jpg" alt="" width="100"
height="100" class="ui avatar image">
<div class="content"><a href="#" class="header">Admin</a></div>
</idv>
<div class="item">
<i class="calendar icon"></i> 年-月-0日
</div>
<div class="item">
<i class="eye icon"></i> 浏览量
</div>
</div>
</div>
<!--图片-->
<div class="ui attached segment">
<div class="ui attached segment">
<img src="../static/images/demo.jpg" alt="" class="ui rounded image">
</div>
</div>
<!--内容-->
<div class="ui attached segment">
<!--原创\转载-->
<div class="ui right aligned basic segment">
<div class="ui pink label basic">原创</div>
</div>
<!--内容-->
<h2 class="ui center aligned header">Blog</h2><br>
<!--主题-->
<div id="content" class="m-padded-lr m-padded-tb-tiny">
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦叽里呱啦
</div>
<!--标签-->
<div class="m-padded-lr m-padded-tb-tiny">
<div class="ui basic teal left pointing label">Blog</div>
</div>
<!-- 赞赏按钮 -->
<div class="ui center aligned basic segment">
<button id="payButton" class="ui pink basic circular button">赞赏</button>
</div>
<!-- 赞赏弹出 -->
<div class="ui payQR flowing popup transition hidden">
<div class="ui blue basic label">
<div class="ui images" style="font-size: inherit !important;">
<div class="image">
<img src="../static/images/demo.jpg" alt="" class="ui rounded bordered image"
style="width: 110px;">
<div>支付宝</div>
</div>
<div class="image">
<img src="../static/images/demo.jpg" alt="" class="ui rounded bordered image"
style="width: 110px;">
<div>微信</div>
</div>
</div>
</div>
</div>
</div>
<!--博客信息-->
<div class="ui attached message">
<div class="ui middle aligned grid">
<div class="eleven wide column">
<ui class="list">
<li style="color: #f698e3">作者：Blog（联系作者）</li>
<li style="color: #f698e3">发表时间：年-月-日</li>
<li style="color: #f698e3">版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
<li style="color: #f698e3">转载：请在文末添加作者微信二维码</li>
</ui>
</div>
<div class="five wide column">
<img src="../static/images/demo.jpg" alt=""
class="ui right floated rounded bordered image" width="110px">
</div>
</div>
</div>
<!--footer留言-->
<div class="ui bottom attached segment">
<!--留言列表-->
<div class="ui teal segment">
<div class="ui comments">
<h3 class="ui dividing header">评论</h3>
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试4</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
叽里呱啦？？？？？
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试3</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
<p>叽里呱啦！！</p>
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试2</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
叽里呱啦！
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="../static/images/demo.jpg">
</a>
<div class="content">
<a class="author">测试</a>
<div class="metadata">
<span class="date">1 天前</span>
</div>
<div class="text">
叽里呱啦
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<!--提交留言-->
<div class="ui form">
<form class="ui reply form">
<div class="field">
<textarea placeholder="留言内容"></textarea>
</div>
<div class="fields">
<div class="field m-mobile-wide">
<div class="ui left icon input m-margin-bottom-small">
<i class="user icon"></i>
<input type="text" name="nickname" placeholder="昵称">
</div>
</div>
<div class="field m-mobile-wide">
<div class="ui left icon input m-margin-bottom-small">
<i class="mail icon"></i>
<input type="text" name="email" placeholder="邮箱">
</div>
</div>
<div class="ui teal labeled submit icon button m-margin-bottom-small m-mobile-wide">
<i class="icon edit"></i> 发表
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>博文详情整体效果
结束！
全部评论 (0)
还没有任何评论哟~