Spring Boot制作个人博客-详情页

一、创建详情页面

• 直接拷贝index.html改名为blog.html

• 删除中间内容代码，其他不变
  

二、制作框架

  <!--中间内容-->
    <div class="m-container m-padded-tb-large">
        <div class="ui container">
            <!--头部-->
            <div class="ui top attached segment">
                头部
            </div>
            <!--图片区域-->
            <div class="ui attached segment"><!--attached 将div之间连接没有间隙-->

            </div>

            <!--主要内容-->
            <div class="ui attached segment">

            </div>

            <!--博客信息-->
            <div class="ui attached positive message">

            </div>
            <!--留言区域-->
            <div class="ui bottom attached segment"></div>
        </div>
    </div>

三、编写头部

<!--头部-->
            <div class="ui top attached segment">
                <!--左侧-->
                <div class="ui horizontal link list">
                    <div class="item">
                        <!--头像-->
                        <img src="https://picsum.photos/100/100?image=1010" alt="" class="ui avatar image">
                        <!--名称-->
                        <div class="content">
                            <a href="#" class="header">beauty</a>
                        </div>
                    </div>
                    <!--发文时间-->
                    <div class="item">
                        <i class="calendar icon"></i>2017-10-01
                    </div>
                    <!--浏览次数和眼睛-->
                    <div class="item">
                        <i class="eye icon">2032</i>
                    </div>
                </div>

            </div>

四、编写图片区域

            <!--图片区域-->
            <div class="ui attached segment"><!--attached 将div之间连接没有间隙-->
                <img src="https://picsum.photos/800/450?image=1025" alt="" class="ui fluid rounded image"><!--rounded 圆角-->
            </div>

五、主要内容区域

<!--主要内容-->
            <div class="ui attached padded segment">
            </div>

• 以下代码都放入上方框架之中

1、原创按钮

<!--原创按钮-->
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label">原创</div>
                </div>

2、内容

<!--内容-->
                <h2 class="ui center aligned header">充满智慧的人生格言</h2>
                <br>

                <div id="content" class="m-padded-lr-responsive m-padded-tb-large">
                    <p>有些道理，总要在碰得鼻青脸肿以后才会明白。有些情感，总要到无法挽回以后才去珍惜。人生太多的悲哀与不幸，都是因为自己的眼高手低造成的。</p>
                    <h2>1</h2>
                    <p>看清一个人又何必去揭穿；讨厌一个人又何必去翻脸。活着，总有看不惯的人，就如别人看不惯我们。人的成熟不是年龄，而是懂得了放弃，学会了圆融，知道了不争。</p>
                    <h2>2</h2>
                    <p>年龄越大，越学会了顺其自然，不想再挽留什么，相信该在的不会走。得之坦然，失之淡然，争取必然，顺其自然。遇见的人多了你才会明白，哪些人值得用生命去珍惜，哪些人只适合绕道而行。</p>
                    <h2>3</h2>
                    <p>我们最大的善良莫过于对陌生人礼貌，对家人耐心，对爱人体贴，对旧人不打扰。</p>
                    <h2>4</h2>
                    <p>有些事当你一直说自己非常忙碌，就永远不会得到空间；当你一直说自己没有时间，就永远不会得到时间；当你一直说这件事明天再做，你的明天就永远不会来！</p>
                    <h2>5</h2>
                    <p>你要忍，忍到春暖花开；你要走，走到灯火通明；你要看过世界辽阔，再评判是好是坏；你要卯足劲变好，再旗鼓相当的站在不敢想象的人身边；你要变成想象中的样子，这件事，一步都不能让。</p>
                    <h2>6</h2>
                    <p>回首那些走过的路，每一步都走的好孤独，而学会孤独正是成长的必修课，所以，别慌，一步步走，只要通过了，这就是上天给的礼物。</p>
                    <h2>7</h2>
                    <p>很多关系，不是老的好，也不是新的好，而是一起经历了一些事之后，你还真切的觉得对方挺好，这才是值得你去认真对待和掏心窝子的关系。</p>
                    <p></p>
                    <h2>总结</h2>
                    <p>对未来，要抱最大希望；对目标，要尽最大努力；对结果，要做最坏打算；对成败，要持最好心态。不急不躁，不骄不馁，祝你把握好每分每秒，让成功拥抱！</p>
                </div>

3、标签

<!--标签-->
                <div class="m-padded-lr">
                    <div class="ui basic teal left pointing label">方法论</div>
                </div>

4、赞赏

• 点击赞赏按钮弹出收款二维码
  

<!--赞赏-->
                <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                    <!--二维码-->
                <div class="ui payQR flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image" >
                                <img src="./static/imags/dashang.png" alt="" class="ui rounded bordered image" style="width:120px ">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="./static/imags/dashang.png" alt="" class="ui rounded bordered image" style="width:120px ">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>

5、博客信息

 <!--博客信息-->
            <div class="ui attached positive message">
                <div class="ui middle aligned grid">
                    <!