SpringBoot个人博客开发（二）

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

改变中间信息开始

创建Blog.html


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

加入预留位（中间区域分为五个部分，分别为：头部、图片区域、博客内容、博客信息、留言区域。除过博客信息区域，其余的均使用 segment 组件，博客信息区 域使用 message 组件，并且给每个组件均加上 attached ，让其拼接在一起)

如图

可以发现区域过宽，给上层容器添加自定义 css 样式，命名为 m-container-small：
这个css定义在…/static/css/me.css中了
此时用 DIV给他们包裹起来，效果如图

-----详情页头部编写-----
和首页的样式一样，包括图标、发布日期、浏览量三部分，直接复制首页写就行

        <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进行布局，左边信息占比11份，右边二维码占比5份
对于二维码，定义 right floated rounded bordered image，让其居右圆角，太大的话可以指定其尺寸

        <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即可实现

评论

测试4

1 天前

叽里呱啦？？？？？

回复

测试3

1 天前

叽里呱啦！！

回复

测试2

1 天前

叽里呱啦！

回复

测试

1 天前

叽里呱啦

回复

发表

                </form>
            </div>
        </div>