开发归档页面
很多博客都有归档页面，就是一个统计哪些文章是哪一年写的页面，别的小朋友都有的，我！不能没有！所以开干！
# 归档页面原理
开发归档页面的原理很简单，就是this.$site.pages中就是所有的文档集合，我们可以将它按年份进行归类
# 配置frontMatter
在docs目录下创建@pages文件夹，这个文件夹以后专门用来存放不是文章的页面，比较好记。然后新建 archives.md文件如下：
---
archivesPage: true
title: 归档
permalink: /archives/
article: false
sidebar: false
---
1
2
3
4
5
6
7
2
3
4
5
6
7
- archivesPage: true : 在Layout.vue中靠这个配置来辨认是不是归档页面
- article: false ：表示不是文章，归档的时候会把article：false的.md文件滤除掉，包括本页
- sidebar：false :禁用侧边栏
# 配置顶部导航栏
想在顶部导航栏里加一个归档的链接，之前也讲过怎么配置nav的，所以不重复了，代码如下：
module.exports = {
...
themeConfig: {
logo: '/img/home.jpg',
sidebarDepth:2,
footer: "MIT Licensed | Copyright © 2021-present 刀刀",
nav: [
...
{text: '索引',
items: [
{text:'归档',link:'/archives/'},
]
},
...
],
...
}
}
```
## 修改布局组件Layout.vue
之前配置`archivesPage: true`就是为了能在Layout.vue中正确识别出归档的配置并显示。代码如下：
```vue {30,32,53,61}
<template>
<div
class="theme-container"
:class="pageClasses"
@touchstart="onTouchStart"
@touchend="onTouchEnd"
>
<Navbar
v-if="shouldShowNavbar"
@toggle-sidebar="toggleSidebar"
/>
<div
class="sidebar-mask"
@click="toggleSidebar(false)"
/>
<Sidebar
:items="sidebarItems"
@toggle-sidebar="toggleSidebar"
>
<template #top>
<slot name="sidebar-top" />
</template>
<template #bottom>
<slot name="sidebar-bottom" />
</template>
</Sidebar>
<Home v-if="$page.frontmatter.home" />
<ArchivesPage v-else-if="$page.frontmatter.archivesPage" />
<Page
v-else
:sidebar-items="sidebarItems"
>
<template #top>
<slot name="page-top" />
</template>
<template #bottom>
<slot name="page-bottom" />
</template>
</Page>
</div>
</template>
<script>
import Home from '@theme/components/Home.vue'
import ArchivesPage from '@theme/components/ArchivesPage.vue'
import Navbar from '@theme/components/Navbar.vue'
import Page from '@theme/components/Page.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import { resolveSidebarItems } from '../util'
export default {
name: 'Layout',
components: {
Home,
ArchivesPage,
Page,
Sidebar,
Navbar
},
...
```
## 开发归档页面组件（ArchivesPage.vue）
```vue
<template>
<div class="archives-content">
<!-- 显示归档页面的标题，但是不用显示时间 -->
<ArticleTitle :showTime="false"></ArticleTitle>
<div class="wrapper">
<!-- 循环出归档的列表 -->
<div class="year-content" v-for="yearobj in list">
<div class="year">{{yearobj.year}}</div>
<router-link tag="li" :to="item.path" v-for="item in yearobj.articles" class="article">
<span class="time">{{item.time}}</span>{{item.title}}
</router-link>
</div>
</div>
</div>
</template>
<script>
import ArticleTitle from '@theme/components/ArticleTitle.vue'
import {filterDateTime } from '../util'
export default {
data(){
return {
list:[]
}
},
components:{
ArticleTitle
},
mounted(){
this.getList()
},
methods:{
getList(){
//首先排除不是文章的页面
let pages = this.$site.pages.filter(item => item.frontmatter.article!==false)
//首先划分年份
let obj = []
for(let i = 0;i<pages.length;i++){
const time = filterDateTime(pages[i].frontmatter.date)
const year = time.year
const month = time.month
const date = time.date
let yearObj = obj.find(item => item.year == year)
if(!yearObj){
yearObj = {
year:year,
articles:[]
}
obj.push(yearObj)
}
yearObj.articles.push({
title:pages[i].title,
path:pages[i].path,
time:month + '-' + date,
fullTime:time.time
})
}
//对年份从大到小排序
obj.sort((a,b) => b.year - a.year)
for(let i = 0;i<obj.length;i++){
obj[i].articles.sort((a,b) => a.fullTime < b.fullTime ? 1 : -1)
}
//对日期从大到小排序
this.list = obj
}
}
}
</script>
<style lang="stylus" scoped>
@require '../styles/wrapper'
.archives-content{
.wrapper{
@extend $wrapper
}
.year-content{
margin-bottom 1rem
.year{
font-size 2rem
color $accentColor
}
.article{
list-style none
line-height 1.8rem
cursor pointer
.time{
margin-right 1rem
}
&:hover{
color $accentColor
}
}
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
好啦。。重启一下项目。。别的小朋友都有的归档页面，现在我也有了！撒花撒花！
上次更新: 2021/07/22, 09:07:42