最近準備對前端知識做一個梳理，將自己的平時遇到的問題和解決方案形成一個知識文檔。本文記錄了搭建 VuePress 的主要過程，同時也提供了部分自定義的配置，示例地址：http://doc.i-fanr.com

環(huán)境搭建

VuePress 有著比較完善的中文文檔，我們可以直接參照文檔搭建，首先確保電腦上已經(jīng)安裝了 Node.js 并且版本號不小于 8.6

#?檢查?Node.js?版本號 node?-v

建立一個文件夾用來搭建 VuePress, 例如我的 VuePress 搭建在 spacexcode目錄 下

mkdir?spacexcode?&&?cd?spacexcode

將 VuePress 安裝為本地依賴

yarn?add?-D?vuepress?#?npm?install?-D?vuepress

創(chuàng)建你的第一篇文檔

mkdir?docs?&&?echo?'#?Hello?VuePress'?>?docs/README.md

在?package.json?中添加一些?scripts

{"scripts":?{"docs:dev":?"vuepress?dev?docs","docs:build":?"vuepress?build?docs"} }

在本地啟動服務(wù)器

yarn?docs:dev?#?npm?run?docs:dev

添加主題

環(huán)境添加完畢后接下來就是裝修完善了，VuePress 的原始樣式更適合制作文檔，因此我們需要自定義樣式。VuePress 提供了自定義主題與樣式的方法，為了簡單我們可以直接使用別人制作好的博客主題 這里推薦一個我正在使用的主題 vuepress-theme-reco 主題的使用方法文檔中已經(jīng)介紹的很詳細了，這里分享幾個我自己的自定義設(shè)置

修改頁面樣式

原始主題的頁面內(nèi)容寬度最大值是固定的，在我的大屏幕上顯得有些窄了，因此我將文本寬度改為了頁面寬度的 50%，這個設(shè)置與 Hexo 的設(shè)置一致，每個人可以根據(jù)自己的愛好修改。在?.vuepress/styles/palette.styl?文件中添加如下樣式

//?首頁內(nèi)容寬度更改為頁面的?75% .home-blog.home-blog-wrapperwidth?:75%//?文章頁內(nèi)容寬度更改為頁面的?50%?? .page.page-titlemax-width?:50%.content__default:not(.custom)max-width?:50%.page-navmax-width?:50%.comments-wrappermax-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 標(biāo)簽的容器?vuepress-plugin-click?鼠標(biāo)點擊時增加特殊效果?vuepress-plugin-demo-block?添加 H5 代碼預(yù)覽區(qū)塊

部署

博客搭建完成后需要部署，我們可以創(chuàng)建一個 shell 文件來打包部署，我的部署到 github.io 下面，這是我的 shell 文件

#!/usr/bin/env?sh#?確保腳本拋出遇到的錯誤 set?-e#?生成靜態(tài)文件 yarn?docs:build#?進入生成的文件夾 cd?docs/.vuepress/distgit?init git?add?-A git?commit?-m?'deploy' git?push?-f?git@github.com:fantingsheng/spacexcode.git?master - END -

太空編程

分享硬核的編程知識

分享精彩，碼上快樂。JavaScript已然上天，有朝一日實現(xiàn)太空編程！回復(fù)【pdf】更有海量的優(yōu)質(zhì)電子書供下載。

spacexcode

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的使用 VuePress 搭建一个自己的知识文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。