2021-6-7：开发小而美的博客（归档页）

2021-6-7：开发小而美的博客（归档页）

---

1、新建文件archives.html

复制tags.html文件的内容，删除中间部分

2、添加活动显示页面

3、中间部分

3.1 修改头部

3.2 编写中间内容

<h3 class="ui center aligned header">2017</h3>
                <div class="ui fluid vertical menu">
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="mini teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal circle basic left pointing label m-padded-mini">4月15日</div>
                        </span>
                        <div class="ui orange circle basic left pointing label m-padded-mini">原创</div>
                    </a>
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="mini teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal circle basic left pointing label m-padded-mini">5月23日</div>
                        </span>
                        <div class="ui orange circle basic left pointing label m-padded-mini">原创</div>
                    </a>
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="mini teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal circle basic left pointing label m-padded-mini">6月03日</div>
                        </span>
                        <div class="ui orange circle basic left pointing label m-padded-mini">原创</div>
                    </a>
                    <a href="#" target="_blank" class="item">
                        <span>
                            <i class="mini teal circle icon"></i>关于刻意练习的清单
                            <div class="ui teal circle basic left pointing label m-padded-mini">11月21日</div>
                        </span>
                        <div class="ui orange circle basic left pointing label m-padded-mini">原创</div>
                    </a>
                </div>

复制其他年份

4、整体代码

5、CSS文件代码

6、效果展示