手把手教你用vuepress搭建自己的网站(3)

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

配置插件

有时候,我们想让我们的网站博客更加顺畅,用户体验更好,可以结合一些第三方的插件,开箱即用

配置内置的全局 UI,首先需要在当前项目下使用npm或者yarn安装插件

// 回到顶部插件,推荐使用yarn安装插件,它安装比npm更快,不熟悉的,可以去了解下yarn的,包管理工具
yarn add -D @vuepress/plugin-back-to-top

然后在,config.js 中进行配置

module.exports = {
  plugins: ['@vuepress/back-to-top']
}

警告

1. 安装插件的版本需要与 vuepress 的版本保持一致,如果低版本的back-to-top,会出现不了,其他插件配置也是如此

2. 凡是带有@开头的插件,都是官方维护的插件,需要与当前项目的 vuepress 版本保持一致

3. 非@开头的插件,则是社区或者个人开发的插件,vuepress 版本每个一段时间,或许都会升级,以你自己的为准

// 在package.json中就可以看到安装过的一些插件版本情况
"devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.5.0",
    "vuepress": "^1.5.0",
    "vuepress-plugin-auto-sidebar": "^1.4.1",
    "vuepress-plugin-img-lazy": "^1.0.3",
  }

可配置的插件选项

在vuepress提供的插件系统中,可以对插件进行一些额外的配置,进行控制,分别提供了Babel 式,对象式

module.exports = {
  plugins: [
         [
            "@vuepress/medium-zoom",
            {
              selector: ".medium-zoom", // 指定含有medium-zoom的类缩放,后面这个类名可自定义,markdown中的img的class类保持一致就可以了的,没有指明的图片类将不支持缩放
              delay: 1000, // 延迟1秒
              options: {
                margin: 24,
                scrollOffset: 0
              }
            }
        ],
        [
          "vuepress-plugin-auto-sidebar",
            {
              titleMode: "titlecase", // 标题模式
              collapsable: true,     // 设置为true,开启折叠
              // sidebarDepth: 0,    // 标题的深度
              collapseList: [
                // 折叠的路由列表
                // "/frontend/css/"
              ],
              uncollapseList: [
                // 不折叠的路由列表
              ]
            }
      ],

  ]
}

有时候,当你看到网上一些博客,配置的选项,五花八门,各有不一的,其实无外乎就两种,babel与对象式的,两种方式都可以,取决于你自己,不过我个人比较倾向于babel式风格的,因为每个插件都集中在一块配置,内聚性高,后续修改或者删除之类的也容易,不容易出错,保持