插件使用教程 | 一款简洁.美观.功能强大的vuepress主题

在vuepress中，插件是在配置文件(docs/.vuepress/config.js)中进行配置的，你也可以参照官方的教程

module.exports = {
    plugins: [
        //.....在这里使用插件
        [
            "插件1",{
                //插件1的配置，具体请自己看每个插件的配置
            }
        ],
        [
            "插件2",{
                //插件2的配置，具体请自己看每个插件的配置
            }
        ],
        [
            "插件3",{
                //插件3的配置，具体请自己看每个插件的配置
            }
        ],
        [
            "插件4",{
                //插件4的配置，具体请自己看每个插件的配置
            }
        ],
        [
            "插件5",{
                //插件5的配置，具体请自己看每个插件的配置
            }
        ],
    ]
  }

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

TIP

plugins这个是一个数组，这是一个数组，这是一个数组，你如果需要在你博客中，加入额外的插件，请在此数组中加入，格式就像上面那样

插件使用步骤

比如现在有一个插件，名字和配置项如下，那么其使用步骤为(此插件并不存在，别加，此插件并不存在，别加，此插件并不存在，别加，，只是演示)

name: "aurora-plugin",
配置项: {
    github: "https://github.com/vuepress-aurora/vuepress-theme-aurora",
    author: "qsyyke"
}

1
2
3
4
5

1.查看`config.js`文件，是否有`plugins`项

config.js文件中，存在`plugins`

没加入aurora-plugin插件之前的配置文件内容

const { themeConfig } = require("./themeConfig");
module.exports = {
    plugins: [
        [
            '@vuepress/plugin-search',
            {
                locales: {
                    '/': {
                        placeholder: 'Search',
                    },
                    '/zh/': {
                        placeholder: '搜索',
                    },
                },
            }
        ],
    ],
    theme: 'aurora',
    title: '一款简洁.美观.功能强大的vuepress主题',
    themeConfig: {
        //.....
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果你的config.js文件中，像上面一样，存在plugins项了，那么你就不用再写一个plugins
你的config.js文件，不一定和我的一样，不一定和我的一样，不一定和我的一样，不一定和我的一样

那么现在你要加入aurora-plugin这个插件，最终的config.js文件，就如下

const { themeConfig } = require("./themeConfig");
module.exports = {
    plugins: [
        [
            'aurora-plugin',{
                github: "https://github.com/vuepress-aurora/vuepress-theme-aurora",
                author: "qsyyke"
            }
        ],
        [
            '@vuepress/plugin-search',
            {
                locales: {
                    '/': {
                        placeholder: 'Search',
                    },
                    '/zh/': {
                        placeholder: '搜索',
                    },
                },
            }
        ],
    ],
    theme: 'aurora',
    title: '一款简洁.美观.功能强大的vuepress主题',
    themeConfig: {
        //.....
    }
}

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

config.js文件中，不存在`plugins`

如果你的config.js文件中，不存在plugins，那么就表示，你重来没有在博客中，使用过任何的插件，那么现在你就需要自己写plugins

没加入插件之前的内容

const { themeConfig } = require("./themeConfig");
module.exports = {
    theme: 'aurora',
    title: '一款简洁.美观.功能强大的vuepress主题',
    themeConfig: {
        //.....
    }
}

1
2
3
4
5
6
7
8

加入插件之后的内容

const { themeConfig } = require("./themeConfig");
module.exports = {
    plugins: [
        [
            'aurora-plugin',{
                github: "https://github.com/vuepress-aurora/vuepress-theme-aurora",
                author: "qsyyke"
            }
        ]
    ],
    theme: 'aurora',
    title: '一款简洁.美观.功能强大的vuepress主题',
    themeConfig: {
        //.....
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.下载需要的插件

官方也提供了好几款插件，如果需要的话，请自行配置

这里使用我自己的几款插件举例使用

或者你也可以直接到Npm中搜索对应的vuepress插件，请注意，需要保证此插件能够在vuepress2版本中使用，因为此主题是vuepress2版本的，一版本的插件，并不能正常使用

例如使用官方search插件

此插件地址

定位到依赖安装(在命令行窗口中，执行npm i xxx这个命令)
查看插件使用
使用

错误使用

const { themeConfig } = require("./themeConfig");
module.exports = {
    plugins: [
        [
            'archive',
            {
                //需要排除的页面url，在该数组里面的路径，都不会被统计
                excludes: ['/404.html','/about/','/mood/','/link/','/tag/','/photo/'],
                //当某篇文章没有标题时，将使用下面值进行替换
                noTitle: '暂时没有标题配置'
            }
        ],
    ],
    theme: 'aurora',
    title: '一款简洁.美观.功能强大的vuepress主题',
    themeConfig: {
        //.....
    }
}

/*
下面这个不是这样加的
*/
module.exports = {
  plugins: [
    [
      '@vuepress/plugin-search',
      {
        locales: {
          '/': {
            placeholder: 'Search',
          },
          '/zh/': {
            placeholder: '搜索',
          },
        },
      },
    ],
  ],
}

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

我说的是加入到对应位置，并不是直接复制，然后粘贴到config.js文件里面，对应对应，对应位置

正确使用

const { themeConfig } = require("./themeConfig");
module.exports = {
    plugins: [
        [
            'archive',
            {
                //需要排除的页面url，在该数组里面的路径，都不会被统计
                excludes: ['/404.html','/about/','/mood/','/link/','/tag/','/photo/'],
                //当某篇文章没有标题时，将使用下面值进行替换
                noTitle: '暂时没有标题配置'
            }
        ],
        [
      '@vuepress/plugin-search',
      {
        locales: {
          '/': {
            placeholder: 'Search',
          },
          '/zh/': {
            placeholder: '搜索',
          },
        },
      },
    ],
    ],
    theme: 'aurora',
    title: '一款简洁.美观.功能强大的vuepress主题',
    themeConfig: {
        //.....
    }
}

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

时间轴

链接

安装插件
```
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

说说

安装
```
npm install vuepress-plugin-coze
```
1

使用

//docs/.vuepress/config.js
module.exports = {
    plugins: [
         'vuepress-plugin-coze',
        {
            appId: 'leanCloud中得到的appId',
            appKey: 'leanCloud中得到的appKey',
            masterKey: 'leanCloud中得到的masterKey',
            //下面这些是可选的
            avatarPath: 'https://ooszy.cco.vin/img/blog-note/avatar-aurora.png',//说说头像url
            registerPath: '/aurora-register', //自定义插件默认提供的注册页面路由，请在前面加上/
            onlyAdministrator: false //是否运行其他注册的用户发布说说，true表示只有管理员可以发布

        }
    ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 插件使用步骤

# 1.查看config.js文件，是否有plugins项

# config.js文件中，存在plugins

# config.js文件中，不存在plugins

# 2.下载需要的插件

# 例如使用官方search插件

# 时间轴

# 说说

推荐阅读