VuePress
先簡(jiǎn)單介紹一下VuePress，這是尤大在2018年4月份發(fā)布的一個(gè)新輪子缀台。
一個(gè)基于 Vue SSR 的靜態(tài)站生成器棠赛，本來(lái)的目的是爽爽的寫(xiě)文檔，但是我發(fā)現(xiàn)用來(lái)擼一個(gè)人博客也非常不錯(cuò)膛腐。
這是VuePress的官方文檔
這是VuePress的中文文檔
上手搭建
你可以跟著文檔上的例子自己玩一玩睛约，不過(guò)由于VuePress的文檔也是用VuePress來(lái)實(shí)現(xiàn)的，所以我取巧直接拿VuePress倉(cāng)庫(kù)中的docs目錄拿來(lái)玩耍哲身。
- 首先安裝VuePress到全局
npm install -g vuepress
- 然后把VuePress倉(cāng)庫(kù)克隆到你的電腦
git clone git@github.com:docschina/vuepress.git
- 在docs文件中執(zhí)行（請(qǐng)確保你的 Node.js 版本 >= 8）
cd vuepress
cd docs
vuepress dev
當(dāng)你看到這一行就說(shuō)明已經(jīng)成功了：
VuePress dev server listening at http://localhost:8080/
下面我們打開(kāi)http://localhost:8080/
發(fā)現(xiàn)真的打開(kāi)了vuepress文檔：
下面的工作就是數(shù)據(jù)的替換了辩涝，但我們應(yīng)該先看一下docs的目錄結(jié)構(gòu)：
├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文檔的配置參考內(nèi)容
├─default-theme-config // Vuepress文檔的默認(rèn)主題配置內(nèi)容
├─guide // Vuepress文檔的指南內(nèi)容
└─zh // 中文文檔目錄
├─config
├─default-theme-config
└─guide
└─README.md // 首頁(yè)配置文件
文檔分成了兩部分，中文文檔在/zh/目錄下勘天，英文文檔在根目錄下怔揩。
其實(shí)目錄里面的東西都挺好看懂的，首先guide 误辑、default-theme-config沧踏、config 這三個(gè)目錄中的都是Vuepress文檔的主要內(nèi)容，從中文文檔里也可以看到只有這三個(gè)目錄被替換了巾钉。
首頁(yè)配置
默認(rèn)主題提供了一個(gè)主頁(yè)布局，要使用它秘案，需要在你的根目錄 README.md 的 YAML front matter 中指定 home：true砰苍，并加上一些其他的元數(shù)據(jù)。
我們先看看根目錄下的README,md：
home: true // 是否使用Vuepress默認(rèn)主題
heroImage: /hero.png // 首頁(yè)的圖片
actionText: Get Started → // 按鈕的文字
actionLink: /guide/ // 按鈕跳轉(zhuǎn)的目錄
features: // 首頁(yè)三個(gè)特性
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright ? 2018-present Evan You // 頁(yè)尾
實(shí)在看不懂阱高，官網(wǎng)有比我更詳細(xì)的配置說(shuō)明赚导。
導(dǎo)航配置
導(dǎo)航配置文件在.vuepress/config.js中
在導(dǎo)航配置文件中nav是控制導(dǎo)航欄鏈接的，你可以把它改成自己的博客目錄赤惊。
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Config Reference',
link: '/config/'
},
{
text: 'Default Theme Config',
link: '/default-theme-config/'
}
]
剩下的默認(rèn)主題配置官方文檔都有很詳細(xì)的文檔說(shuō)明這里就不在啰嗦了吼旧。
更改默認(rèn)主題色
你可以在.vuepress/目錄下創(chuàng)建一個(gè)override.styl文件。
vuepress提供四個(gè)可更改的顏色：
$accentColor = #3eaf7c // 主題色
$textColor = #2c3e50 // 文字顏色
$borderColor = #eaecef // 邊框顏色
$codeBgColor = #282c34 // 代碼背景顏色
我把它改成了這樣：
側(cè)邊欄的實(shí)現(xiàn)
由于評(píng)論區(qū)里問(wèn)的人較多未舟，所以在這里更新一下圈暗，其實(shí)我就算在這里寫(xiě)的再詳細(xì)也不如大家去看官方文檔。
側(cè)邊欄的配置也在.vuepress/config.js中：
sidebar: [
{
title: 'JavaScript', // 側(cè)邊欄名稱(chēng)
collapsable: true, // 可折疊
children: [
'/blog/JavaScript/學(xué)會(huì)了ES6裕膀，就不會(huì)寫(xiě)出那樣的代碼', // 你的md文件地址
]
},
{
title: 'CSS',
collapsable: true,
children: [
'/blog/CSS/搞懂Z-index的所有細(xì)節(jié)',
]
},
{
title: 'HTTP',
collapsable: true,
children: [
'/blog/HTTP/認(rèn)識(shí)HTTP-Cookie和Session篇',
]
},
]
對(duì)應(yīng)的文檔結(jié)構(gòu)：
├─blog
│ ├─CSS
│ ├─HTTP
│ └─JavaScript
我的博客：brownhu
部署
在配置好你博客之后员串，命令行執(zhí)行：
Vuepress build
當(dāng)你看到這一行就說(shuō)明成功了：
Success! Generated static files in vuepress.
將打包好的vuepress目錄上傳到你的github倉(cāng)庫(kù)，和github page配合昼扛，就可以配置好你的博客網(wǎng)站了寸齐。
