從今天開(kāi)始，拿起VuePress打造屬于自己的專屬博客

dantezhao 發(fā)布于2019-05-22 17:59 / 2850人閱讀

摘要：故九萬(wàn)里，則風(fēng)斯在下矣，而后乃今培風(fēng)背負(fù)青天，而莫之夭閼者，而后乃今將圖南。這里是文件的內(nèi)容部分最后更新時(shí)間最后更新時(shí)間默認(rèn)不開(kāi)啟，它是基于提交的時(shí)間戳，所以我們的靜態(tài)站點(diǎn)是需要通過(guò)的倉(cāng)庫(kù)進(jìn)行管理的，并且它是按的時(shí)間來(lái)計(jì)算的。

VuePress(0.x版本)

本blog配套了一個(gè)基于 VuePress 的一個(gè)簡(jiǎn)單的配置案例，此配置案例包含了本blog絕大部分配置案例，更多詳情請(qǐng)移步這里VuePress配置案例

前言

問(wèn)：這篇文章是干什么的？
答：列舉博客站點(diǎn)常見(jiàn)的配置并提供詳細(xì)配置步驟和配置截圖

問(wèn)：這篇文章適合哪些人？
答：想寫博客，但并不知道如何寫以及知道VuePress但并不知道怎么配置

問(wèn)：這篇文章目錄怎么理解？
答：看完基礎(chǔ)配置能上手配置，看完進(jìn)階配置能熟悉了解VuePress

安裝

本博客VuePress主版本為0.x，相關(guān)配置最新的1.x也兼容，請(qǐng)放心使用。另請(qǐng)確認(rèn)你的Node.js >= 8

全局安裝(推薦)

通常而言，全局安裝 VuePress 會(huì)非常省心，可以通過(guò)如下命令進(jìn)行全局安裝

$ npm install -g vuepress

本地安裝

區(qū)別于全局安裝，本地安裝會(huì)把npm包安裝在本項(xiàng)目上，生成一個(gè)叫node_modules目錄，可以通過(guò)如下命令進(jìn)行本地安裝（需同時(shí)安裝vuepress和webpack-dev-middleware）

$ npm install vuepress webpack-dev-middleware --save-dev

基本配置

基本配置下的內(nèi)容適用于 VuePress 的默認(rèn)主題，對(duì)于自定義主題配置可能會(huì)不太一樣

腳本命令

我們需要至少兩個(gè)腳本命令，分別用于本地開(kāi)發(fā)和打包上線，腳本命令需要配置在docs/package.json文件中，它的配置如下

{
  "scripts": {
    // 本地開(kāi)發(fā)
    "docs:dev": "vuepress dev docs",
    // 打包上線
    "docs:build": "vuepress build docs"
  }
}

本地開(kāi)發(fā)請(qǐng)使用如下命令，它在本地啟用了一個(gè)小型的服務(wù)器，你可以在瀏覽器中使用localhost:8080(默認(rèn)情況下)進(jìn)行訪問(wèn)

$ npm run docs:dev

打包命令請(qǐng)使用如下命令，它在.vuepress目錄下生成一個(gè)dist文件夾

$ npm run docs:build

項(xiàng)目目錄

VuePress 作為一個(gè)靜態(tài)網(wǎng)站生成器，它對(duì)于項(xiàng)目的目錄是有一定的限制的，一個(gè)基本的項(xiàng)目結(jié)構(gòu)如下所示

|-- docs // 特定的目錄
    |-- README.md // 首頁(yè)
    |-- .vuepress // 特定的目錄
        |-- config.js // 特定的配置文件
|-- package.json // 腳本命令

首頁(yè)

默認(rèn)主題提供了一個(gè)首頁(yè)(HomePage)，即上面目錄結(jié)構(gòu)中的README.md文件中的內(nèi)容，首頁(yè)是可選的，對(duì)于 VuePress 中默認(rèn)主題的首頁(yè)，我們可以進(jìn)行如下配置

---
home: true
lang: zh-CN
heroText: A  Personal Blog
heroImage: /logo.jpg
actionText: 開(kāi)始 →
actionLink: /interview/
features:
- title: A Blog
  details: 專注寫作前端博客，記錄日常所得。
- title: For Me
  details: 故九萬(wàn)里，則風(fēng)斯在下矣，而后乃今培風(fēng)；背負(fù)青天，而莫之夭閼者，而后乃今將圖南。
- title: For Interview
  details: 廣州，已入坑?( ′???` )比心
footer: Copyright ? 2019-present Wangtunan
---

以上配置即為本博客的首頁(yè)效果

首頁(yè)配置說(shuō)明

在首頁(yè)的YAML格式配置中，我們填寫了一些配置，下面我們將詳細(xì)描述每一個(gè)配置的具體含義

home:true：標(biāo)記此頁(yè)面是否為首頁(yè)

lang:zh-CN：表示本頁(yè)面的語(yǔ)言為zh-CN(簡(jiǎn)體中文)

heroText: 首頁(yè)的標(biāo)題內(nèi)容

heroImage: 首頁(yè)的標(biāo)題圖片，其中全路徑為docs/.vuepress/public/logo.jpg，默認(rèn)去public目錄下找靜態(tài)資源

actionText: 首頁(yè)跳轉(zhuǎn)按鈕的內(nèi)容

actionLink: 首頁(yè)跳轉(zhuǎn)按鈕挑戰(zhàn)的路徑，其中全路徑為docs/interview/readme.md，默認(rèn)readme命名的文件可以省略不寫鏈接的后面內(nèi)容，省略后的鏈接如上

features: 表明首頁(yè)的特征，固定的格式為title + details，以三欄流式布局的方式展示

footer: 為底部?jī)?nèi)容，與普通的網(wǎng)頁(yè)一樣，我們可以在footer里面寫版權(quán)信息

導(dǎo)航欄

配置導(dǎo)航欄需要在.vuepress/config.js文件中進(jìn)行配置

在默認(rèn)主題下，導(dǎo)航欄需要在themeConfig屬性上進(jìn)行配置nav，導(dǎo)航欄的兩個(gè)重要屬性為text和link，其中text指明了導(dǎo)航的文字內(nèi)容，link指明了導(dǎo)航的鏈接。

基本導(dǎo)航欄

一個(gè)基本的導(dǎo)航欄鏈接可以配置成如下所示

module.exports = {
  // 其它配置
  themeConfig: {
    nav: [
      { text: "首頁(yè)", link: "/" },
      { text: "HTML", link: "/html/" },
      { text: "CSS", link: "/CSS/" },
      { text: "JavaScript", link: "/JavaScript/" }
    ]
  }
}

基本導(dǎo)航欄配置結(jié)果

導(dǎo)航欄下拉列表

下拉列表需要配置items屬性，它是一個(gè)數(shù)組，數(shù)組里的對(duì)象依然是一個(gè)普通導(dǎo)航對(duì)象，即擁有text和link屬性，一個(gè)導(dǎo)航欄下拉列表可以配置成如下所示

module.exports = {
  // 其它配置
  themeConfig: {
    nav: [
      { text: "首頁(yè)", link: "/" },
      { text: "前端三劍客", items: [
        { text: "HTML", link: "/html/" },
        { text: "CSS", link: "/CSS/" },
        { text: "JavaScript", link: "/JavaScript/" }
      ]},
      { text: "Vue.jss", link: "/vue/" },
    ]
  }
}

導(dǎo)航欄下拉列表配置結(jié)果

禁用導(dǎo)航欄

禁用導(dǎo)航欄分為兩種情況，第一種禁用所有的導(dǎo)航欄，第二種在某個(gè)頁(yè)面禁用導(dǎo)航欄，針對(duì)這兩種不同的情況，相關(guān)的配置是不同的，具體如下所示
第一種： 禁用所有導(dǎo)航欄，通過(guò)配置navbar屬性為false，此種方式禁用后，將不會(huì)存在任何導(dǎo)航欄

module.exports = {
  // 其它配置
  themeConfig: {
    navbar: false
  }
}

第二種： 單個(gè)禁用導(dǎo)航欄，在每一個(gè)頁(yè)面(.md文件)最頂部，配置navbar屬性為false，此種方式禁用后，對(duì)應(yīng)的導(dǎo)航欄依然存在，只是不能點(diǎn)擊跳轉(zhuǎn)。

---
navbar: false
---

內(nèi)置搜索

我們?cè)谝陨吓渲脤?dǎo)航欄的過(guò)程中，除了我們配置的導(dǎo)航，還會(huì)出現(xiàn)一個(gè)搜索框，這就是 VuePress 內(nèi)置的搜索，內(nèi)置的搜索只能搜索頁(yè)面的h2和h3標(biāo)題構(gòu)成的索引，我們依然可以對(duì)內(nèi)置的搜索進(jìn)行以下配置：

search: 通過(guò)配置此屬性為false，來(lái)禁用內(nèi)置搜索

searchMaxSuggestions: 通過(guò)配置此屬性為一個(gè)數(shù)字，對(duì)內(nèi)置的搜索進(jìn)行最多結(jié)果數(shù)量的限制

module.exports = {
  // 其它配置
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10
  }
}

側(cè)邊欄

側(cè)邊欄分組

側(cè)邊欄分組即意味著把鏈接進(jìn)行分組，每一個(gè)鏈接對(duì)應(yīng)一個(gè)頁(yè)面

側(cè)邊欄分組可以如下進(jìn)行配置，其中collapsable屬性設(shè)置為false，意味著展開(kāi)這個(gè)分組，屬性設(shè)置為true，意味著折疊這個(gè)分組。

module.exports = {
  themeConfig: {
    // 其它配置
    sidebar: [
      {
        title: "前端三劍客",
        collapsable: false,
        children: [
          "/CSS/",
          "/HTML/",
          "/JavaScript/"
        ]
      },
      {
        title: "Vue.js",
        collapsable: false,
        children: [
          "/Vue/",
          "/Vue/Vuex.md",
          "/Vue/Vue-Router.md",
        ]
      }
    ]
  }
}

要實(shí)現(xiàn)以上分組結(jié)果，目錄結(jié)構(gòu)可以如下所示

|-- docs
|   |-- CSS
|   |   |-- README.md
|   |-- HTML
|   |   |-- README.md
|   |-- JavaScript
|   |   |-- README.md
|   |-- Vue
|       |-- README.md
|       |-- Vue-Router.md
|       |-- Vuex.md
|   |-- README.md

側(cè)邊欄分組的結(jié)果

自動(dòng)生成側(cè)邊欄

如果我們僅僅只是希望能根據(jù).md中的標(biāo)題自動(dòng)生成側(cè)邊欄的話，可以設(shè)置sidebar: auto屬性即可

如果我們要為所有.md都開(kāi)啟自動(dòng)生成側(cè)邊欄的話，需要進(jìn)行如下配置

module.exports = {
  themeConfig: {
    // 所有頁(yè)面全部開(kāi)啟自動(dòng)生成側(cè)邊欄
    sidebar: "auto",
  }
}

如果我們只是針對(duì)某一個(gè).md文件開(kāi)啟自動(dòng)生成側(cè)邊欄的話，需要在.md文件的最上方，通過(guò)設(shè)置YAML屬性，相關(guān)配置如下

---
sidebar: auto
---
# Vue.js
這里是Vue.js文件的內(nèi)容部分

禁用側(cè)邊欄

正如上面所提到的多帶帶配置文件的側(cè)邊欄，同樣的道理，我們也能多帶帶禁用側(cè)邊欄。

---
sidebar: false
---
# Vue.js
這里是Vue.js文件的內(nèi)容部分

最后更新時(shí)間

最后更新時(shí)間默認(rèn)不開(kāi)啟，它是基于git提交的時(shí)間戳，所以我們的靜態(tài)站點(diǎn)是需要通過(guò)git init的倉(cāng)庫(kù)進(jìn)行管理的，并且它是按git commit的時(shí)間來(lái)計(jì)算的。

最后更新時(shí)間可以通過(guò)配置lastUpdated，它的默認(rèn)值為false，接受字符串(String)和布爾值(boolean)

module.exports = {
  themeConfig: {
    // 1.接受字符串，它設(shè)置了最后更新時(shí)間的label，例如：最后更新時(shí)間：2019年5月3日 21:51:53
    lastUpdated: "最后更新時(shí)間",
    // 2.設(shè)置true，開(kāi)啟最后更新時(shí)間
    lastUpdated: true,
    // 3.設(shè)置false，不開(kāi)啟最后更新時(shí)間(默認(rèn))
    lastUpdated: false
}

如果我們沒(méi)有上一篇或者下一篇，只需要把其對(duì)應(yīng)的YAML屬性設(shè)置為false即可

上一篇/下一篇可以通過(guò)配置YAML的prev和next來(lái)顯示的配置，鏈接地址同導(dǎo)航的地址一樣的書寫規(guī)則，一個(gè)配置了上一篇/下一篇的.md文件可以如下所示

---
prev: /HTML/
next: /JavaScript/
---
# HTML5

這里是HTML5的內(nèi)容部分

上一篇/下一篇的配置結(jié)果如下圖所示

Git倉(cāng)庫(kù)和編輯鏈接

在輸出我們的靜態(tài)網(wǎng)站的時(shí)候，我們可能需要有一個(gè)導(dǎo)航鏈接到我們的GitHub倉(cāng)庫(kù)，對(duì)于這個(gè)需求我們可以通過(guò)如下配置來(lái)解決

repo代表我們的鏈接地址，repoLabel代表鏈接的名稱，配置后它會(huì)自動(dòng)出現(xiàn)在我們nav導(dǎo)航的最后一個(gè)位置

module.exports = {
  themeConfig: {
    // 其它配置
    repo: "https://github.com/wangtunan/blog",
    repoLabel: "Github",
    nav: [
      { text: "首頁(yè)", link: "/" },
      { text: "前端三劍客", items: [
        { text: "HTML", link: "/html/" },
        { text: "CSS", link: "/CSS/" },
        { text: "JavaScript", link: "/JavaScript/" }
      ]},
      { text: "Vue.js", link: "/vue/" },
    ]
  }
}

編輯功能默認(rèn)是沒(méi)有開(kāi)啟的，我們可以通過(guò)配置editLinks來(lái)設(shè)置是否出現(xiàn)編輯鏈接，editLinkText指明編輯功能的文字內(nèi)容

一個(gè)啟用了編輯鏈接的配置可以如下所示

module.exports = {
  themeConfig: {
    // 其它配置
    repo: "https://github.com/wangtunan/blog",
    repoLabel: "Github",
    editLinks: true,
    editLinkText: "編輯此頁(yè)",
    nav: [
      { text: "首頁(yè)", link: "/" },
      { text: "前端三劍客", items: [
        { text: "HTML", link: "/html/" },
        { text: "CSS", link: "/CSS/" },
        { text: "JavaScript", link: "/JavaScript/" }
      ]},
      { text: "Vue.jss", link: "/vue/" },
    ]
  }
}

配置了編輯鏈接后結(jié)果可能如下圖所示

你也可以通過(guò)設(shè)置YAML來(lái)多帶帶禁止某個(gè).md文件啟用編輯鏈接功能

---
editLink: false
---

Markdown擴(kuò)展 鏈接

錨鏈接

在VuePress 中所有.md文件中的標(biāo)題(默認(rèn)h2和h3)都會(huì)自動(dòng)添加錨點(diǎn)鏈接(anchor)，所以如果我們需要跳轉(zhuǎn)至固定的錨點(diǎn)，可以如下進(jìn)行設(shè)置

[錨點(diǎn)鏈接](/vuepress/#pwa配置)

內(nèi)部鏈接

在 VuePress 內(nèi)部，以.md或者.html結(jié)尾的文件，會(huì)被轉(zhuǎn)換成用于SPA導(dǎo)航，它是大小寫敏感的。
如果文件名為README.md，它會(huì)被編譯成index.html，所以當(dāng)我們?cè)L問(wèn)/vuepress/時(shí)，其實(shí)就是在訪問(wèn)/vuepress/README.md或者/vuepress/index.html

自定義容器

VuePress 內(nèi)置了三種不同狀態(tài)的自定義容器，分別有tip、warning和danger三種類型，在緊挨著類型的旁邊，可以設(shè)置自定義容器標(biāo)題，不寫的話默認(rèn)為TIP，它們的書寫規(guī)則如下所示

::: tip 提醒
這里是tip容器
:::

::: warning 警告
這里是警告容器
:::

::: danger 危險(xiǎn)
這里是危險(xiǎn)容器
:::

三種自定義容器的結(jié)果如下圖所示

代碼塊類別

對(duì)于不同的代碼塊，需要設(shè)置不同的類型進(jìn)行展示，常見(jiàn)的代碼塊類型有如下所示

html 類型：它表示代碼塊是html格式的

css 類型：它表示代碼塊是css格式的

js 類型：它表示代碼塊是javascript格式的

stylus 類型：它表示代碼塊是stylus格式的，類似的類型還有less和scss

md 類型：它表示代碼塊是markdown格式的

json 類型：它表示代碼塊是json格式的

他們的對(duì)應(yīng)的配置如下所示
HTML格式的代碼塊(觀測(cè)代碼塊右上角小角標(biāo))

<div class="box">html類型的代碼塊html>

css格式的代碼塊(觀測(cè)代碼塊右上角小角標(biāo))

.box {
  width: 100px;
  height: 100px;
}

js格式的代碼塊(觀測(cè)代碼塊右上角小角標(biāo))

console.log("js格式的代碼塊")

其它格式的代碼塊同理，就不在次累述

代碼塊高亮和行號(hào)

代碼塊高亮

掘金不支持代碼塊高亮，請(qǐng)自行用VuePress配置查看結(jié)果

在Markdown中，我們可以如下所示來(lái)進(jìn)行代碼塊的高亮設(shè)置(類型后跟一個(gè)花括號(hào))

`` js{4}
export default {
  data () {
    return {
      msg: "Highlighted!"
    }
  }
}
``

它的結(jié)果可能會(huì)是這樣的(第四行高亮，行數(shù)不是從0開(kāi)始的)

export default {
  data () {
    return {
      msg: "Highlighted!"
    }
  }
}

多行高亮，只需要把行號(hào)用逗號(hào)隔開(kāi)即可，例如js {1,3,5}

export default {
  data () {
    return {
      msg: "Highlighted!"
    }
  }
}

代碼塊行號(hào)

代碼塊行號(hào)配置同樣需要在config.js中進(jìn)行配置，如下所示

module.exports = {
  // 其它配置
  markdown: {
    // 顯示代碼塊行號(hào)
    lineNumbers: true
  }
}

配置后，代碼塊行號(hào)的結(jié)果如下圖所示

使用Emoji表情

并不是所有Emoji表情都支持(掘金就不支持，無(wú)奈只能把例子刪了)

在.md文件中，我們可以使用Emoji表情，你也可以訪問(wèn)Emoji Search來(lái)查詢你喜歡的Emoji表情，訪問(wèn)Common Emoji來(lái)訪問(wèn)常用的Emoji，一個(gè)Emoji可以是這樣寫的

#### 這里是Emoji表情 :tada:
:100: :rocket:

Github風(fēng)格的表格

有時(shí)候我們想要在.md文件中列一些簡(jiǎn)單的表格，可以像下面這樣配置

| 序號(hào)          | 訂單編號(hào)      | 訂單金額|
| -------------|:-------------:| ------:|
| 1             | 20180101     | $1600  |
| 2             | 20180102     |   $12  |
| 3             | 20180103     |    $1  |

以上表格同Github表格風(fēng)格是一致的，它的結(jié)果如下所示

序號(hào)	訂單編號(hào)	訂單金額
1	20180101	$1600
2	20180102	$12
3	20180103	$1

自動(dòng)生成目錄

我們有時(shí)候希望根據(jù)標(biāo)題自動(dòng)生成目錄，可以使用[[toc]]來(lái)輸出我們的目錄，它默認(rèn)只列舉h2標(biāo)題和h3標(biāo)題

[[toc]]

# H1標(biāo)題

## h2標(biāo)題
### h3標(biāo)題
### h3標(biāo)題

## h2標(biāo)題
### h3標(biāo)題
### h3標(biāo)題

它的結(jié)果可能如下所示

使用Vue模板語(yǔ)法

使用插值

在.md文件中，可以使用 Vue 的插值表達(dá)式，像下面這樣

# 插值表達(dá)式
1 + 1 的結(jié)果是 {{1+1}}

~~1 + 1 的結(jié)果是 {{1+1}}~~(掘金不支持，自行使用VuePress查看此案例)

指令

除了像上面那樣使用插值表達(dá)式，我們還可以使用v-for等指令，下面是一個(gè)使用v-for指令的例子

列表渲染的結(jié)果是：<span v-for="number in 5">{{number}}span>

~~列表渲染的結(jié)果是：{{number}}~~(同上，掘金不支持)

使用原生JavaScript和CSS

如果我們要在原生JS中操作DOM，那么一定要記住VuePress的頁(yè)面是經(jīng)過(guò)服務(wù)端渲染而來(lái)，最好是在頁(yè)面加載完畢之后再操作DOM

VuePress 賦予了我們?cè)?b>.md文件中直接書寫原生js和css的能力，它們可以是下面這樣的形式


<style>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background-color: #58a;
}
style>


#### 使用原生的JS和CSS
<div id="container">div>


<script>
window.onload = function() {
  var dom = document.getElementById("container");
  dom.innerHTML = "box content"
  dom.className = "box"
}
script>

以上代碼的結(jié)果如下圖所示

使用CSS預(yù)處理器

VuePress 不僅像上面一樣賦予我們使用原生JS和CSS的能力，還賦予我們使用CSS預(yù)處理器的能力，它內(nèi)置了相關(guān)CSS預(yù)處理器的配置，我們只需要安裝對(duì)應(yīng)的依賴并使用即可，特別要注意的是，VuePress 內(nèi)置了Stylus，我們無(wú)需安裝，可以直接使用，現(xiàn)在讓我們使用Stylus來(lái)改寫上面的例子





#### 使用原生的JS和CSS

使用Stylus預(yù)處理器后的結(jié)果如下圖所示:

使用內(nèi)置組件

外部鏈接

OutboundLink用來(lái)標(biāo)識(shí)一個(gè)外部鏈接，它緊跟在鏈接后面，在.md文件中設(shè)置外部鏈接時(shí)，已默認(rèn)使用了此組件。

下面是一個(gè)外部鏈接的配置，它鏈接到百度

[百度一下](https://www.baidu.com)

此時(shí)，百度一下文字后面的小圖標(biāo)就是內(nèi)置組件OutboundLink 百度一下(掘金上沒(méi)有小圖標(biāo))

Badge(角標(biāo))

內(nèi)置組件Badge有三個(gè)屬性需要傳遞

text：它指明了角標(biāo)的內(nèi)容

type：同自定義容器類似，它有三種不同的類型，分別是tip、warn和error，默認(rèn)是tip

vertical：它指明了角標(biāo)同內(nèi)容的對(duì)齊方式，有兩個(gè)值，分別是top和middle，默認(rèn)是top

角標(biāo)的使用如下所示

#### Vue  
#### Vuex  
#### Vue-Resource

使用Vue組件

VuePress 除了讓我們使用內(nèi)置組件以外，還可以讓我們使用自己的組件，它默認(rèn)把在.vuepress/components目錄下所有的組件全局注冊(cè)，注冊(cè)后我們可以直接在.md文件中使用。我們先在.vuepress/components目錄下(無(wú)則新建)一個(gè)customer-component的.vue文件，它的內(nèi)容如下所示

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從今天開(kāi)始，拿起VuePress打造屬于自己的專屬博客

首頁(yè)配置說(shuō)明

基本導(dǎo)航欄

導(dǎo)航欄下拉列表

禁用導(dǎo)航欄

側(cè)邊欄分組

自動(dòng)生成側(cè)邊欄

禁用側(cè)邊欄

錨鏈接

內(nèi)部鏈接

代碼塊高亮

代碼塊行號(hào)

使用插值

指令

外部鏈接

Badge(角標(biāo))

title(標(biāo)題)

description(網(wǎng)站的描述)

base

host(主機(jī)名)和post(端口)

dest(輸出目錄)

override.styl

style.styl

相對(duì)路徑

Webpack別名

打包

新建倉(cāng)庫(kù)并創(chuàng)建Github Pages分支

提交到Github

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從今天開(kāi)始，拿起VuePress打造屬于自己的專屬博客