SpringBoot个人博客开发（三）分类及标签页面

----分类页面开始-----

是同样步骤，先把首页代码除开主体部分复制下来。
创建type.html

首页代码复制进去

修改此处

分类页面中间内容分为三部分：分类数量统计、分类图标及数量、分类所对应博客列表、翻页按钮

<!--页面主体-->
<div class="m-padded-tb-large m-container-small">
    <div class="ui container">
        <!--header-->
        <!--分类列表-->
        <!--博客列表-->
        <!--注意jio下-->

    </div>
</div>

分类数量统计：和首页的博客数量统计设计方式一致，直接按照首页写。

<!--左边头部-->
                        <div class="ui top attached segment">
                            <!--左边头部拆分为两部分-->
                            <div class="ui middle aligned two column grid">
                                <div class="column">
                                    <!--左边-->
                                    <h3 class="ui teal header">分类</h3>
                                </div>
                                <!--右边-->
                                <div class="right aligned column">
                                    共<h2 class="ui orange header m-inline-block m-text-thin">1</h2>个
                                </div>
                            </div>
                        </div>

效果图

分类

<!--分类列表-->
        <div class="ui attached segment m-padded-tb-large">
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui  teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui basic teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui basic teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui basic teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui basic teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui basic teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
            <div class="ui labeled teal button m-margin-tb-tiny">
                <a href="" class="ui basic teal button">Blog</a>
                <div class="ui basic teal left pointing label">1</div>
            </div>
        </div>

效果如图

博客列表

<!--博客列表-->
        <div class="ui top attached teal segment m-padded-tb-large m-mobile-lr-clear">
            <div class="ui mobile reversed stackable grid">
                <!--list left 博客标题和内容-->
                <div class="eleven wide column">
                    <h3 class