VuePress是什么

僅從單詞上來看就是vue和press，press除了按壓的意思外，還有報(bào)刊雜志和出版社等意思，所以可以理解為由vue驅(qū)動(dòng)的出版工具。換個(gè)說法就是靜態(tài)博客編寫工具。后六字應(yīng)該都不必解釋，靜態(tài)相對(duì)于動(dòng)態(tài)而言即沒有后端和數(shù)據(jù)庫的參與，博客的生成僅依賴前端。

與之類似的工具還有Hexo、hugo和jekyll等，今天的主角是VuePress。

首頁

寫東西的一點(diǎn)歷史

最開始的寫東西是直接OneNote上，不管是記學(xué)習(xí)筆記還是寫長(zhǎng)篇東西，但OneNote本質(zhì)上只是一個(gè)記錄的工具，不便與更多人分享里頭的東西， 多少有些浪費(fèi)。此外，OneNote的單頁是一個(gè)沒有邊界的畫布，里頭可以有文字，可以有圖片，甚至視頻等文件內(nèi)容，以至于在內(nèi)容上顯得略微有些松散(用過的朋友應(yīng)該就懂)。

后面接觸到Markdown語言后，就有將OneNote上可以公開的文字都轉(zhuǎn)移到github的倉(cāng)庫上的想法，配合VScode中Markdown相關(guān)的插件以及圖床，就可以愉快地寫東西了。但到這里， 也還是沒有把寫的東西發(fā)布出來，要發(fā)在公號(hào)上或者掘金上仍然需要手動(dòng)復(fù)制到各平臺(tái)上。

再到最近接觸到VuePress這樣的靜態(tài)博客構(gòu)建工具后，就準(zhǔn)備把純Markdown格式的文章遷移到VuePress中。其實(shí)在這之前也知道了Hexo這樣的工具，只是懶一直沒行動(dòng)。VuePress是2018年時(shí)尤大(尤雨溪)編寫的輕量級(jí)靜態(tài)網(wǎng)站生成器，當(dāng)時(shí)是為了Vue自己的子項(xiàng)目文檔的需求而創(chuàng)建的。將純Markdown博客遷移到VuePress博客的過程幾乎無痛，VuePress本來需要渲染的內(nèi)容也是Markdown。用VuePress之后，就很好地將寫東西和發(fā)布內(nèi)容結(jié)合在一塊。

VuePress的使用

以下的內(nèi)容不會(huì)考慮到所有的環(huán)境情況和使用情況，也不會(huì)完全按照文檔中的內(nèi)容分享，更多的是我如何使用VuePress生成我的博客，以及在這個(gè)過程中的一些踩坑。建議你在搭建的時(shí)候還是多看文檔，畢竟文檔^[1]的內(nèi)容才是最全的。

安裝VuePress

前面說到，我是已有一個(gè)由Markdown文件組成的博客倉(cāng)庫，現(xiàn)在要做的就是為這個(gè)倉(cāng)庫添加VuePress相關(guān)依賴如下。可以全局安裝也可以本地安裝， 不妨礙正常使用就行。

"dependencies": { "vuepress": "^1.5.0"}

安裝完成之后，可以繼續(xù)在這個(gè)文件中添加相關(guān)運(yùn)行命令，dev是供寫東西時(shí)本地預(yù)覽用的；build則是將這些markdown文件編譯成一個(gè)靜態(tài)的網(wǎng)站；deploy是將博客發(fā)布到線上，后面會(huì)用上。

"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs", "deploy": "start deploy.sh", "test": "echo \"Error: no test specified\" && exit 1" },

目錄結(jié)構(gòu)

我的代碼結(jié)構(gòu)如圖

目錄結(jié)構(gòu)

其中一個(gè)最主要的配置就是 .vuepress 目錄下的config.js文件，這個(gè)文件需要包含你希望這個(gè)博客擁有的所有配置。比如博客的名稱和描述、對(duì)markdown文件的配置、導(dǎo)航欄和側(cè)邊欄的內(nèi)容。在和.vuepress平級(jí)的目錄存放的就是你的文章文件， 最簡(jiǎn)單的，你可以這個(gè)目錄下添加一個(gè)readme文件，然后在終端中執(zhí)行npm run dev的命令，如果你的config.js文件中什么都沒有配置， 會(huì)看到一個(gè)如下幾乎空白的界面，這就說明VuePress運(yùn)行成功了。當(dāng)你修改了config.js中的配置時(shí)，需要重新運(yùn)行命令。(ctrl + c停止命令)

第一次嘗試

添磚加瓦

能運(yùn)行之后，我覺得最重要的事是設(shè)想一下的博客結(jié)構(gòu)應(yīng)該是怎樣的，比如導(dǎo)航欄應(yīng)該要有哪些東西，側(cè)邊欄要有哪些東西，側(cè)邊欄應(yīng)不應(yīng)該隨著導(dǎo)航欄變動(dòng)，或者導(dǎo)航欄只是 側(cè)邊欄部分頁面的快捷方式。

這里說說我的結(jié)構(gòu)，之前在純Markdown文件的博客，沒有分類的概念，所有目錄都是平級(jí)存放，比如LeetCode刷題和JavaScript。但實(shí)際上他們是兩個(gè)不同的類別，一個(gè)是語言學(xué)習(xí)，一個(gè)是語言的運(yùn)用。所以在這個(gè)博客中，我為他們?cè)O(shè)置了不同的側(cè)邊欄，即LeetCode有單獨(dú)自己的側(cè)邊欄配置，而語言學(xué)習(xí)又是另外的一組配置。這在側(cè)邊欄的配置叫多個(gè)側(cè)邊欄。

導(dǎo)航欄的配置

導(dǎo)航欄的配置較為簡(jiǎn)單，是一個(gè)由對(duì)象組成的數(shù)組。對(duì)象中需要配置text(該項(xiàng)導(dǎo)航要顯示的名稱)、和link(該項(xiàng)導(dǎo)航要去去向的地方)。link可以是站內(nèi)鏈接，也可以是站外鏈接。你甚至還可以在對(duì)象中配置target屬性。此外，如果當(dāng)你在對(duì)象中配置了item數(shù)組而不是單一的link時(shí)，該項(xiàng)導(dǎo)航會(huì)顯示為一個(gè)下拉列表，在友鏈的配置中，item數(shù)組的配置就能排上用場(chǎng)。

導(dǎo)航欄

側(cè)邊欄的配置

說是側(cè)邊欄，本質(zhì)上是各頁面路由的配置。在VuePress中對(duì)于路由有如下約定。所以在第一次嘗試的時(shí)候，你只有一個(gè)readme文件，并且config中沒有任何配置，readme文件里的內(nèi)容 也能正常顯示在頁面上。

文件的相對(duì)路徑	頁面路由地址
/README.md	/
/guide/README.md	/guide/
/config.md	/config.html

數(shù)組形式

以如下代碼為例，sidebar為一個(gè)對(duì)象數(shù)組，一個(gè)對(duì)象即一個(gè)可收縮的側(cè)邊欄分組，我們把用對(duì)象的形式分割開各路由稱為側(cè)邊欄分組， 這樣的側(cè)邊欄默認(rèn)出現(xiàn)在幾乎所有頁面。路由配置不限制markdown文件目錄，可隨意配置有效的文件路徑。甚至，你還可以往數(shù)組中添加不分組單獨(dú)存在的文件路徑，

let sidebar = [ { title: "瀏覽器", collapsable: true, sidebarDepth: 2, children: [ "/Browser/character_byte_chinese", "/Browser/how_browser_works", "/Browser/url_to_display", ] }, "/Browser/how_browser_works",]

對(duì)象形式

這種形式跟上面一種剛好相反，主要由數(shù)組構(gòu)成了對(duì)象的value，如下代碼所示。/brower/意味著這是一個(gè)單獨(dú)的側(cè)邊欄，這樣就可以實(shí)現(xiàn)為不同的頁面組 顯示不同的側(cè)邊欄。同樣，你也可以直接在數(shù)組中寫markdown文件的路徑，而不用分組的形式。

let sidebar = { "/browser/": [ "/Browser/url_to_display", { title: "瀏覽器", sidebarDepth: 2, children: [ "/Browser/url_to_display", ] } ]}

首頁的配置

首頁的配置較為簡(jiǎn)單，按照文檔說得來就行了。以下是我的配置，需要注意的是heroImage的圖片路徑需要是 .vuepress 目錄下的 public 路徑。如果你要配置 favico，文件的路徑也建議是這里。

home: trueheroImage: /hero.jpgheroText: 一筆的博客tagline: 對(duì)技術(shù)、對(duì)生活的思考actionText: 一窺乾坤actionLink: /LearnTech/Javascript/apply_call_bindfooter: MIT Licensed | Copyright ? 2020 劉一筆

內(nèi)置的搜索

在第一次嘗試的時(shí)候，你會(huì)看到，即便沒有任何配置，也會(huì)出現(xiàn)一個(gè)搜索框。這個(gè)搜索框是自帶的，能夠?yàn)轫撁娴臉?biāo)題、h2、h3以及tags構(gòu)建索引。

但我遇到了一個(gè)坑，最開始配置VuePress的時(shí)候，我的版本還是1.4.0，這個(gè)版本的內(nèi)置會(huì)搜索不到中文內(nèi)容。此時(shí)，只要將VuePress升級(jí)版本就好了。我現(xiàn)在的VuePress 版本是1.5.0。

發(fā)布博客

使用VuePress的一個(gè)目的就是更方便配合GitHub Pages將博客的部署到線上，而不是只能線上預(yù)覽。

部署之前，需要滿足以下條件：

1.文檔放置在項(xiàng)目的docs目錄中。這就是說，你的Markdown文件(博客內(nèi)容)需要在docs目錄下，而不能超出2.使用的是默認(rèn)的構(gòu)建輸出位置 即沒有更改相關(guān)的webpack編譯配置。3.安裝了VuePress并且配置了如下npm scripts，因?yàn)楹竺嬗邪l(fā)布的deploy命令需要用到build命令。

{"scripts": { "docs:build": "vuepress build docs"}}

我是將博客部署在GitHub Pages上，所以這里也只分享對(duì)應(yīng)的配置。

首先需要在config.js中設(shè)置正確的base，比如你打算發(fā)布到?https://.github.io//(也就是說你的倉(cāng)庫在 https://github.com//)，則將?base?設(shè)置為?"//"。需要注意的是，前后的斜杠不能少。

然后在項(xiàng)目中，創(chuàng)建如下的deploy.sh文件(一般是在根目錄下)。因?yàn)槲沂前l(fā)布到自定義域名上，所以注釋了部分用不上的代碼。創(chuàng)建這個(gè)文件的目的是每次發(fā)布 的時(shí)候不用手動(dòng)輸出如下命令，而是讓腳本自行執(zhí)行。你甚至可以在package.json配置相關(guān)命令，而不用手動(dòng)執(zhí)行腳本。

#!/usr/bin/env sh# 確保腳本拋出遇到的錯(cuò)誤set -e# 生成靜態(tài)文件npm run build# 進(jìn)入生成的文件夾cd docs/.vuepress/dist# 如果是發(fā)布到自定義域名 echo 'blog.yibi.host' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果發(fā)布到 https://.github.io# git push -f git@github.com:/.github.io.git master# 如果發(fā)布到 https://.github.io/# git push -f git@github.com:/.git master:gh-pagesgit push -f git@github.com:OrangeSAM/Blog.git master:gh-pagescd -

我package.json中的scripts，windows可能會(huì)遇到bash deploy失效的情況，我是替換成start就可以了。

"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs", "deploy": "start deploy.sh", "test": "echo \"Error: no test specified\" && exit 1" },

踩坑

小坑不說，一般都是因?yàn)樽约骸敖暋痹斐傻摹＿@里分享個(gè)我遇到的大坑，當(dāng)然這個(gè)坑也不是VuePress造成的，而是因?yàn)樽约褐皩懳臋n時(shí)不夠規(guī)范導(dǎo)致的。

之前在學(xué)習(xí)Vue-Router的時(shí)候，也在博客中記錄相關(guān)的筆記，很多沒用代碼塊包裹，其中一行就是有一個(gè)直接的標(biāo)簽，因?yàn)閂uePress中 有一個(gè)loader來將Markdown文件處理為Vue文件。編譯時(shí)遇到直接為代碼而不是文本的自然也就報(bào)錯(cuò)了。心累的是，當(dāng)時(shí)我已經(jīng)添加了很多 博客文件，且沒有意識(shí)到這會(huì)導(dǎo)致問題，只好用二分法慢慢排除 =_=|| 。

這篇沒有講的特別細(xì)，只是將自己配置完之后覺得重要的地方分享出來，有些細(xì)節(jié)還是需要看官方文檔。

配置好這些之后，更重要的是寫博客。畢竟，搭建博客不是目的，只是手段，寫博客才是我們的目的。

References

[1]?文檔:?https://vuepress.vuejs.org/zh/

總結(jié)

以上是生活随笔為你收集整理的vuepress侧边栏配置_VuePress搭建静态博客网站的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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