一文搭建自己博客/文档系统：搭建，自动编译和部署，域名，HTTPS，备案等（1）https://developer.aliyun.com/article/1548918
文档搭建插件和配置
这里主要介绍文档搭建除了默认加载的配置和插件之外，新增加的插件和配置。
添加文档附加样式配置: 主题
注意很多网上的例子还是基于老的版本的，甚至我用vuepress的时候，官网还没有更新过来。
最佳配置请参考: 这里: （其它官网的配置都没有更新）
- index.styl - 覆盖的样式
.custom-page-class{ /* 自定义的样式 */ } // markdown blockquote blockquote font-size 1rem color #2c3e50; border-left .5rem solid #42b983 background-color #f3f5f7 margin 1rem 0 padding 1rem 0 1rem 1rem & > p margin 0 // markdown h2 h2 font-size 1.65rem padding-bottom 1rem border-bottom 1px solid $borderColor
- palette.styl - 样式配置覆盖
// 内容的宽度 $contentWidth = 100% // 颜色 $accentColor = #3eaf7c $textColor = #2c3e50 $borderColor = #eaecef $codeBgColor = #282c34
添加返回最上插件
文章很长，添加右下角一键返回顶部按钮，官网提供了 back-to-top 插件.
安装
yarn add -D @vuepress/plugin-back-to-top@next # OR npm install -D @vuepress/plugin-back-to-top@next
使用
module.exports = { plugins: ['@vuepress/back-to-top'] }
插件使用你还可以参考：插件官网
添加图片缩放插件
图片缩放可以使用@vuepress/plugin-medium-zoom插件，它基于medium-zoom 插件。
yarn add -D @vuepress/plugin-medium-zoom@next # OR npm install -D @vuepress/plugin-medium-zoom@next
简单使用:
module.exports = { plugins: ['@vuepress/medium-zoom'] }
自定义选项:
module.exports = { plugins: { '@vuepress/medium-zoom': { selector: 'img.zoom-custom-imgs', // medium-zoom options here // See: https://github.com/francoischalifour/medium-zoom#options options: { margin: 16 } } } }
效果可以点击本文中的图片查看, 具体使用你可以参考: 插件官网。
添加评论插件
代码托管平台遵从 OAuth 2 spec 提供了 OAuth API。Vssue 利用平台提供的 OAuth API，使得用户可以登录并发表评论。那么有哪些评论插件可以使用？这里使用Vssue，它比较新，可能知道的人还不多。@pdai
Vssue , Gitalk 和 Gitment，为何选择Vssue：
- Vssue 支持 Github、Gitlab 和 Bitbucket，并且很容易扩展到其它平台。Gitment 和 Gitalk 仅支持 Github。
- Vssue 可以发表、编辑、删除评论。Gitment 和 Gitalk 仅能发表评论。
- Vssue 是基于 Vue.js 开发的，可以集成到 Vue 项目中，并且提供了一个 VuePress 插件。 Gitment 基于原生JS，而 Gitalk 基于 Preact。
下面是 Vssue 的简要工作过程：
用户在平台的授权页面允许 Vssue 接入后，平台会带有 code 或 token 重定向回 Vssue 的页面（如果是 code ，Vssue 则会根据 code 向平台请求 token）。
Vssue 获取 token 后，会将 token 存储在 localstorage 中，于是用户就成功使用平台的帐号“登录”到了 Vssue。
接下来， Vssue 就可以获取用户的基本信息、获取当前页面的评论，用户也可以发表评论了。
添加如下配置：具体参考Vssue 官网教程
plugins: { '@vssue/vuepress-plugin-vssue': { // 设置 `platform` 而不是 `api` platform: 'github', // 其他的 Vssue 配置 owner: 'OWNER_OF_REPO', repo: 'NAME_OF_REPO', clientId: 'YOUR_CLIENT_ID', clientSecret: 'YOUR_CLIENT_SECRET', }, },
效果如下：
添加Vuepress文档的导出
导出页面只在我本地开放，线上功能我暂时关闭了。
自己写了文档PDF的导出功能（Page, Group, Current是我导出功能里的代号): Page = Group1+...GroupN, Group = Current1+...CurrentN
- 当前页面导出
- Group页面导出：主要用来导出一组或者多组章节下面的所有文章。
- Page页面导出
以 SpringBoot部分章节导出为例，导出效果如下：
添加svg label标签
你是不是常看到别人的项目中加了这种标签？这种标签主要基于svg，主要有两种:
- 比如Travis CI 提供的: 本网站Build结果
- 这个网站还可以定制：定制icon svg
添加后效果(状态为自动获取)：
添加百度统计
- 百度统计主要辅助我分析页面访问量，直接去: 百度统计官网
注意百度统计添加, 考虑在每个页面点击时作记录，在enhanceApp.js中拦截router:
export default ({router}) => { router.beforeEach((to, from, next) => { // @pdai: 对每个页面点击添加百度统计 if(typeof _hmt!='undefined'){ if (to.path) { _hmt.push(['_trackPageview', to.fullPath]); } } // continue next(); }) };
百度统计里某个页面效果如下：
添加Copy自动加版权信息
复制你网站时，禁用复制或者添加版权信息等。
安装
npm install vuepress-plugin-copyright
配置
// .vuepress/config.js module.exports = { plugins: [ [ 'copyright', { noCopy: true, // 选中的文字将无法被复制 minLength: 100, // 如果长度超过 100 个字符 }, ], ], }
效果, 拷贝本页面会自动添加：
著作权归 xxxx 所有。 链接：https://www.pdai.tech/md/about/blog/blog-build-vuepress.html
更多请参考插件：vuepress-plugin-sitemap
添加SEO优化
这里给个链接供参考，我这边自己添加的meta信息没有用它。
添加百度站点自动推送
主要用于向百度站点自动推送，有助于SEO。
安装
npm install -D vuepress-plugin-baidu-autopush
添加配置
module.exports = { plugins: [ 'vuepress-plugin-baidu-autopush' ] };
更多请参考插件：vuepress-plugin-baidu-autopush
一文搭建自己博客/文档系统：搭建，自动编译和部署，域名，HTTPS，备案等（3）https://developer.aliyun.com/article/1548924
