总字数0
  时长0
  评论数
  总阅读数

生成海报3 

vuepress-plugin-archive

TIP

这是vuepress2的一个文章归档时间轴的一个插件

image-20211122003904803

安装

npm i vuepress-plugin-archive
1
//docs/.vuepress/config.js

const { path } = require("@vuepress/utils");

module.exports = {
    //在这里配置插件
    plugins: [
        [
            'archive',
            {
                //需要排除的页面url，在该数组里面的路径，都不会被统计
                excludes: ['/footer.html','/404.html','/about/','/mood/','/link/','/tag/','/photo/'],
                //当某篇文章没有标题时，将使用下面值进行替换
                noTitle: '暂时没有标题配置'
            }
        ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

当你配置好之后，该插件会注册一个全局组件<AuroraArchive></AuroraArchive>，你可以在任何地方使用该组件，从而在你网站中，开启文章归档功能，同时该插件会默认注册一个路由，你可以直接在浏览器中，打开该路由，查看归档页面/aurora-archive

如果你使用的不是vuepress-theme-aurora主题，那么你可以像下面这样为你网站添加归档功能

  1. 创建archive.md文件,在docs目录下，创建一个archive.md文件

  2. 在该md文件中，加入下面内容就可以了

    ---
layout: AuroraArchive
---
    1
    2
    3

  3. 打开浏览器，输入localhost:[8080]/archive.html，你就可以看到该归档页面了

配置

noTitle

  • String

暂时没有标题配置

excludes

  • Array

需要排除的页面url，在该数组里面的路径，都不会被统计

excludes: ['/footer.html','message.html','/v1.3.0/']
1

image-20211122004613835

css样式

你可以在docs/.vuepress/styles/index.css文件中，设置下面样式变量

TIP

如果你使用的不是vuepress-theme-aurora主题，那么请先看vuepress官方关于palette的介绍，官方默认使用的就是SASS ，对应的你需要在docs/.vuepress/styles/index.sass中，覆盖下面的样式变量

:root {
    /* 时间线颜色 */
    --archive-timeline: rgba(144, 241, 239, 0.35);

    /* 鼠标移动到某个标题上，时间线上的圆点颜色 */
    --archive-timeline-active: pink;

    /* 鼠标移动到某个标题上，标题颜色 */
    --archive-timeline-active-title: pink;

    /* 归档页面的宽度 */
    --archive-box-width: 80%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

如果你想设置背景颜色，请自行f12查看对应类名，然后在docs/.vuepress/styles/index.css文件中，设置对应类名的css样式

推荐阅读

点击评论