- 根据不同年份,展示文章列表
1、创建归档页
- 随意复制一个html改名为archives.html
2、修改代码
(1)修改标题
(2)修改默认选择标签
(3)修改文章列表标题栏
(4)删除中间内容代码
3、按照年份做分类列表
<!--按照年份做列表-->
<h3 class="ui center aligned header">2017</h3>
<div class="ui fluid vertical menu">
<a href="#" target="_blank" class="item">
<span>
<i class=" ui teal circle icon"></i>关于刻意练习的清单
<div class="ui teal basic left pointing label m-padded-tb-mini">9月03</div>
</span>
<div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
</a>
</div>
-
复制标签的内容即可获得此效果
-
复制2017年代码将改为2016年
4、最终效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=debice-width,initial-scale=1.0">
<title>归档</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="static/css/css.css">
</head>
<body>
<!--导航栏-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" ><!--inverted 反色 attached 圆角变直角-->
<!--设置log-->
<div class="ui container">
<div class="ui inverted secondary stackable menu"><!--stackable(可堆叠效果)会根据页面大小改变显示比例-->
<h2 class="ui teal header item">Blog</h2>
<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 首页</a>
<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
<a href="#" class="m-item item m-mobile-hide">