博客归档页面

该页面由两部分构成：博客总篇数统计、时间线博客列表

• 篇数统计：采用分类或者标签页面的统计方式即可
• 时间线布置：
  • 年份定义为 h2标题大小即可
    
  • 文章列表采用竖向菜单模式

    <!-- header -->
    <div class="ui top attached padded segment">
        <div class="ui middle aligned two column grid">
            <div class="column">
                <h3 class="ui teal header">归档</h3>
            </div>
            <div class="right aligned column">
                共<h3 class="ui orange header my-inline-block my-text-thin">&nbsp;105&nbsp;</h3>篇
            </div>
        </div>
    </div>
    <!-- 时间线 -->
    <h2 class="ui center aligned header" style="color: beige">2020</h2>
    <div class="ui fluid vertical menu">
        <a href="#" target="_blank" class="item">
            <span>
                <i class="teal mini circle icon"></i>关于刻意练习
                <div class="ui teal basic left pointing label my-padded-mini">01-03</div>
            </span>
            <div class="ui basic red label my-padded-small">原创</div>
        </a>
        ...
        ...
        ...
        <a href="#" target="_blank" class="item">
            <span>
                <i class="teal mini circle icon"></i>关于刻意练习
                <div class="ui teal basic left pointing label my-padded-mini">07-03</div>
            </span>
            <div class="ui basic red label my-padded-small">转载</div>
        </a>
        ...
        ...
        ...
    </div>

　　最终效果如下：

接下来是关于我页面开发流程及思路......

Semantic UI 个人博客归档页面开发

原文：https://www.cnblogs.com/skygrass0531/p/12470134.html