SpringBoot个人博客开发（二）----博客详情页面

博客详情页面

--------------------开始--------------------------
导航页和页尾等信息保持不变，只需改动中间信息即可

改变中间信息开始

创建Blog.html

复制index的全部代码，然后删除掉中间部分

此时页面如图

加入预留位（中间区域分为五个部分，分别为：头部、图片区域、博客内容、博客信息、留言区域。除过博客信息区域，其余的均使用 segment 组件，博客信息区 域使用 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：
这个css定义在…/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>

其中包含了赞赏，