使用 VuePress 搭建一个自己的知识文档

最近准备对前端知识做一个梳理,将自己的平时遇到的问题和解决方案形成一个知识文档。本文记录了搭建 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

– END –

太空编程

分享硬核的编程知识

分享精彩,码上快乐。JavaScript已然上天,有朝一日实现太空编程!回复【pdf】更有海量的优质电子书供下载。

spacexcode

公众账号
我还没有学会写个人说明!
上一篇

微软将于4月举行Game Stack直播 XSX架构将迎来Windows PC版

下一篇

[视频]PS5 DualSense高强度实测:摇杆417个小时就需更换

你也可能喜欢

评论已经被关闭。

插入图片