VuePress是什么

僅從單詞上來看就是vue和press，press除了按壓的意思外，還有報刊雜志和出版社等意思，所以可以理解為由vue驅動的出版工具。換個說法就是靜態博客編寫工具。后六字應該都不必解釋，靜態相對于動態而言即沒有后端和數據庫的參與，博客的生成僅依賴前端。

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

首頁

寫東西的一點歷史

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

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

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

VuePress的使用

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

安裝VuePress

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

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

安裝完成之后，可以繼續在這個文件中添加相關運行命令，dev是供寫東西時本地預覽用的；build則是將這些markdown文件編譯成一個靜態的網站；deploy是將博客發布到線上，后面會用上。

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

目錄結構

我的代碼結構如圖

目錄結構

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

第一次嘗試

添磚加瓦

能運行之后，我覺得最重要的事是設想一下的博客結構應該是怎樣的，比如導航欄應該要有哪些東西，側邊欄要有哪些東西，側邊欄應不應該隨著導航欄變動，或者導航欄只是 側邊欄部分頁面的快捷方式。

這里說說我的結構，之前在純Markdown文件的博客，沒有分類的概念，所有目錄都是平級存放，比如LeetCode刷題和JavaScript。但實際上他們是兩個不同的類別，一個是語言學習，一個是語言的運用。所以在這個博客中，我為他們設置了不同的側邊欄，即LeetCode有單獨自己的側邊欄配置，而語言學習又是另外的一組配置。這在側邊欄的配置叫多個側邊欄。

導航欄的配置

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

導航欄

側邊欄的配置

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

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

數組形式

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

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

對象形式

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

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

首頁的配置

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

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

內置的搜索

在第一次嘗試的時候，你會看到，即便沒有任何配置，也會出現一個搜索框。這個搜索框是自帶的，能夠為頁面的標題、h2、h3以及tags構建索引。

但我遇到了一個坑，最開始配置VuePress的時候，我的版本還是1.4.0，這個版本的內置會搜索不到中文內容。此時，只要將VuePress升級版本就好了。我現在的VuePress 版本是1.5.0。

發布博客

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

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

1.文檔放置在項目的docs目錄中。這就是說，你的Markdown文件(博客內容)需要在docs目錄下，而不能超出2.使用的是默認的構建輸出位置 即沒有更改相關的webpack編譯配置。3.安裝了VuePress并且配置了如下npm scripts，因為后面有發布的deploy命令需要用到build命令。

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

我是將博客部署在GitHub Pages上，所以這里也只分享對應的配置。

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

然后在項目中，創建如下的deploy.sh文件(一般是在根目錄下)。因為我是發布到自定義域名上，所以注釋了部分用不上的代碼。創建這個文件的目的是每次發布 的時候不用手動輸出如下命令，而是讓腳本自行執行。你甚至可以在package.json配置相關命令，而不用手動執行腳本。

#!/usr/bin/env sh# 確保腳本拋出遇到的錯誤set -e# 生成靜態文件npm run build# 進入生成的文件夾cd docs/.vuepress/dist# 如果是發布到自定義域名 echo 'blog.yibi.host' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果發布到 https://.github.io# git push -f git@github.com:/.github.io.git master# 如果發布到 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可能會遇到bash deploy失效的情況，我是替換成start就可以了。

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

踩坑

小坑不說，一般都是因為自己“近視”造成的。這里分享個我遇到的大坑，當然這個坑也不是VuePress造成的，而是因為自己之前寫文檔時不夠規范導致的。

之前在學習Vue-Router的時候，也在博客中記錄相關的筆記，很多沒用代碼塊包裹，其中一行就是有一個直接的標簽，因為VuePress中 有一個loader來將Markdown文件處理為Vue文件。編譯時遇到直接為代碼而不是文本的自然也就報錯了。心累的是，當時我已經添加了很多 博客文件，且沒有意識到這會導致問題，只好用二分法慢慢排除 =_=|| 。

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

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

References

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。