开发归档页面
更新时间: 2021-02-07 17:30:05
很多博客都有归档页面，就是一个统计哪些文章是哪一年写的页面，别的小朋友都有的，我！不能没有！所以开干！
# 归档页面原理
开发归档页面的原理很简单，就是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/'},
]
},
...
],
...
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 修改布局组件Layout.vue
之前配置archivesPage: true就是为了能在Layout.vue中正确识别出归档的配置并显示。代码如下：
<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
},
...
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
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
# 开发归档页面组件（ArchivesPage.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>
<div class="list-wrapper">
<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>
</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
}
.list-wrapper{
display :flex;
flex-wrap:wrap;
.article{
list-style none
width:50%;
line-height 1.8rem
cursor pointer
.time{
margin-right 1rem
}
&:hover{
color $accentColor
}
@media (max-width:700px){
width:100%;
}
}
}
}
}
</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
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
好啦。。重启一下项目。。别的小朋友都有的归档页面，现在我也有了！撒花撒花！