最近准备对前端知识做一个梳理，将自己的平时遇到的问题和解决方案形成一个知识文档。 本文记录了搭建 VuePress 的主要过程，同时也提供了部分自定义的配置，示例地址：http://doc.i-fanr.com
环境搭建
VuePress 有着比较完善的中文文档，我们可以直接参照文档搭建，首先确保电脑上已经安装了 Node.js 并且版本号不小于 8.6
# 检查 Node.js 版本号 node -v
建立一个文件夹用来搭建 VuePress, 例如我的 VuePress 搭建在 spacexcode目录 下
mkdir spacexcode && cd spacexcode
将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress
创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
在 package.json 中添加一些 scripts
{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }
在本地启动服务器
yarn docs:dev # npm run docs:dev
添加主题
环境添加完毕后接下来就是装修完善了，VuePress 的原始样式更适合制作文档，因此我们需要自定义样式。VuePress 提供了自定义主题与样式的方法，为了简单我们可以直接使用别人制作好的博客主题
这里推荐一个我正在使用的主题 vuepress-theme-reco
主题的使用方法文档中已经介绍的很详细了，这里分享几个我自己的自定义设置
修改页面样式
原始主题的页面内容宽度最大值是固定的，在我的大屏幕上显得有些窄了，因此我将文本宽度改为了页面宽度的 50%，这个设置与 Hexo 的设置一致，每个人可以根据自己的爱好修改。在 .vuepress/styles/palette.styl 文件中添加如下样式
// 首页内容宽度更改为页面的 75% .home-blog .home-blog-wrapper width :75% // 文章页内容宽度更改为页面的 50% .page .page-title max-width :50% .content__default:not(.custom) max-width :50% .page-nav max-width :50% .comments-wrapper max-width :50% !important
添加插件
安装插件，以 vuepress-plugin-image插件为例
yarn add vuepress-plugin-image
然后在 config.js 中添加插件
plugins: [ '@vuepress/plugin-back-to-top', '@vuepress/plugin-medium-zoom', 'image' ]
添加主题中未包含的插件，这里介绍几个我使用的插件
vuepress-plugin-viewer 一个图片查看插件
vuepress-plugin-pangu 自动在文章中英文与汉字之间添加空格
vuepress-plugin-tabs 增加一个带有 tab 标签的容器
vuepress-plugin-click 鼠标点击时增加特殊效果
vuepress-plugin-demo-block 添加 H5 代码预览区块
部署
博客搭建完成后需要部署，我们可以创建一个 shell 文件来打包部署，我的部署到 github.io 下面，这是我的 shell 文件
#!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 yarn docs:build # 进入生成的文件夹 cd docs/.vuepress/dist git init git add -A git commit -m 'deploy' git push -f git@github.com:fantingsheng/spacexcode.git master
