插件列表

为了方便的统一管理 plugin，需要对 docs/.vuepress/config.js 进行配置：

// docs/.vuepress/config.js
const pluginConf = require('../../config/pluginConf.js');

module.exports = {
  plugins: pluginConf,
}

件的很多服务都需要对 head 标签进行修改：

// docs/.vuepress/config.js
const headConf = require('../../config/headConf.js');

module.exports = {
  head: headConf,
}

之后就可以去修改 config/pluginConf.js 和 config/headConf.js 文件了。

1. PWA

具体的 PWA 配置介绍可以看官方文档

module.exports = {
  '@vuepress/pwa': {
    serviceWorker: true,
    updatePopup: {
      message: "发现新内容可用.",
      buttonText: "刷新",
      // 自定义弹窗
      // popupComponent: 'MySWUpdatePopup',
    }
  },
};

PWA NOTES：

serviceWorker 选项仅仅用来控制 service worker，为了让你的网站完全地兼容 PWA，你需要在 .vuepress/public 提供 Manifest 和 icons，更多细节，请参见 MDN docs about the Web App Manifest. 此外，只有您能够使用 SSL 部署您的站点时才能启用此功能，因为 service worker 只能在 HTTPs 的 URL 下注册。
-- VuePress 官网

因为使用的 Github Pages 服务，所以即使使用 CNAME 后也依然保持 SSL 状态。
Manifest 第六个视频其实存在一些问题，在第九个视频中解决了，利用 App Manifest Generator 直接生成即可。

参考示例：

{
  "name": "飞跃高山与大洋的鱼",
  "short_name": "山与海",
  "description": "飞跃高山与大洋的鱼的文档",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "start_url": "index.html",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

还需要获取一下 favicons 等：

// config/headConf.js

module.exports = [
  ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
  ['link', { rel: 'icon', href: '/favicon-32x32.png' }],
  ['link', { rel: 'manifest', href: '/manifest.json' }],
  ['meta', { name: 'theme-color', content: '#ffffff' }],
];

2.添加评论插件

Valine官方
安装Valine包

npm install leancloud-storage --save
npm install valine --save

评论需要按照你的需求来：如果你希望所有评论可以在 Github 可见，那么使用 Gitalk 吧，正好有一篇新鲜出炉的文章；如果你想要所有非 Github 用户也可以评论的话可以使用 Valine。

这边利用的其实主题的继承，通过修改 VuePress 的默认主题来实现需要的功能.
首先修改默认主题下的 Page 组件（这意味着你不能随便使用 npm install 了）：

3. Back-to-top

具体的 Back-to-top 配置介绍可以看官方文档
安装：

yarn add -D @vuepress/plugin-back-to-top@next # OR npm install -D @vuepress/plugin-back-to-top@next

使用：

// config/pluginConf.js module.exports = { '@vuepress/back-to-top': true, };

效果图：
[图片上传失败...(image-b7ee4a-1557026914118)]

4. google-analytics

具体的 google-analytics 配置介绍可以看官方文档
你需要去 Google 获取对应的 key 。
[图片上传失败...(image-c2c5a0-1557026914118)]
[图片上传失败...(image-9d7829-1557026914118)]

安装

yarn add -D @vuepress/plugin-google-analytics@next # OR npm install -D @vuepress/plugin-google-analytics@next

使用：

// config/pluginConf.js // 此处引申出的隐私问题在最后有说明 const secretKeyConf = require('./secretKeyConf.js'); module.exports = { '@vuepress/google-analytics': { 'ga': secretKeyConf.ga } };

vuepress插件