呢呢 Blog 呢呢 Blog
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
首页
  • 前端

    • web Worker使用笔记
  • 博客搭建

    • 快速上手
文集
  • 前端公用方法
关于
  • 网站
  • 资源
  • Vue资源
  • 友情链接
GitHub
  • 前端

  • 博客搭建

  • 微前端

  • Cesium天地图

  • bug记录

  • vuepress

    • 基础使用

    • 修改主题

      • 修改默认主题
      • 修改page组件,显示文章标题
      • 开发归档页面
        • 归档页面原理
        • 配置frontMatter
        • 配置顶部导航栏
    • 插件

  • 浏览器架构及原理

  • photoshop

  • vue3+vite

  • react

  • 编程
  • vuepress
  • 修改主题
Ostask
2021-02-07

开发归档页面

很多博客都有归档页面,就是一个统计哪些文章是哪一年写的页面,别的小朋友都有的,我!不能没有!所以开干!

# 归档页面原理

开发归档页面的原理很简单,就是this.$site.pages中就是所有的文档集合,我们可以将它按年份进行归类

# 配置frontMatter

在docs目录下创建@pages文件夹,这个文件夹以后专门用来存放不是文章的页面,比较好记。然后新建 archives.md文件如下:

---
archivesPage: true 
title: 归档
permalink: /archives/
article: false
sidebar: false
---
1
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

好啦。。重启一下项目。。别的小朋友都有的归档页面,现在我也有了!撒花撒花!

编辑
上次更新: 2021/07/22, 09:07:42
修改page组件,显示文章标题
vuepress-plugin-preview插件

← 修改page组件,显示文章标题 vuepress-plugin-preview插件→

最近更新
01
react全家桶搭建全家桶模板
10-19
02
react学习到搭建一个全家桶的基础模板
10-09
03
202108自修图
09-24
更多文章>
Theme by Vdoing | Copyright © 2020-2021 Ni Ni | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×