從今天開始，拿起VuePress打造屬於自己的專屬部落格

汪圖南發表於2019-05-12

Vue

VuePress(0.x版本)

本blog配套了一個基於 VuePress 的一個簡單的配置案例，此配置案例包含了本blog絕大部分配置案例，更多詳情請移步這裡VuePress配置案例

前言

問：這篇文章是幹什麼的？
答：列舉部落格站點常見的配置並提供詳細配置步驟和配置截圖

問：這篇文章適合哪些人？
答：想寫部落格，但並不知道如何寫以及知道VuePress但並不知道怎麼配置

問：這篇文章目錄怎麼理解？
答：看完基礎配置能上手配置，看完進階配置能熟悉瞭解VuePress

安裝

本部落格VuePress主版本為0.x，相關配置最新的1.x也相容，請放心使用。另請確認你的Node.js >= 8

全域性安裝(推薦)

通常而言，全域性安裝 VuePress 會非常省心，可以通過如下命令進行全域性安裝

$ npm install -g vuepress
複製程式碼

本地安裝

區別於全域性安裝，本地安裝會把npm包安裝在本專案上，生成一個叫node_modules目錄，可以通過如下命令進行本地安裝（需同時安裝vuepress和webpack-dev-middleware）

$ npm install vuepress webpack-dev-middleware --save-dev
複製程式碼

基本配置

基本配置下的內容適用於 VuePress 的預設主題，對於自定義主題配置可能會不太一樣

指令碼命令

我們需要至少兩個指令碼命令，分別用於本地開發和打包上線，指令碼命令需要配置在docs/package.json檔案中，它的配置如下

{
  "scripts": {
    // 本地開發
    "docs:dev": "vuepress dev docs",
    // 打包上線
    "docs:build": "vuepress build docs"
  }
}
複製程式碼

本地開發請使用如下命令，它在本地啟用了一個小型的伺服器，你可以在瀏覽器中使用localhost:8080(預設情況下)進行訪問

$ npm run docs:dev
複製程式碼

打包命令請使用如下命令，它在.vuepress目錄下生成一個dist資料夾

$ npm run docs:build
複製程式碼

專案目錄

VuePress 作為一個靜態網站生成器，它對於專案的目錄是有一定的限制的，一個基本的專案結構如下所示

|-- docs // 特定的目錄
    |-- README.md // 首頁
    |-- .vuepress // 特定的目錄
        |-- config.js // 特定的配置檔案
|-- package.json // 指令碼命令
複製程式碼

首頁

預設主題提供了一個首頁(HomePage)，即上面目錄結構中的README.md檔案中的內容，首頁是可選的，對於 VuePress 中預設主題的首頁，我們可以進行如下配置

---
home: true
lang: zh-CN
heroText: A  Personal Blog
heroImage: /logo.jpg
actionText: 開始 →
actionLink: /interview/
features:
- title: A Blog
  details: 專注寫作前端部落格，記錄日常所得。
- title: For Me
  details: 故九萬里，則風斯在下矣，而後乃今培風；揹負青天，而莫之夭閼者，而後乃今將圖南。
- title: For Interview
  details: 廣州，已入坑ღ( ´･ᴗ･` )比心
footer: Copyright © 2019-present Wangtunan
---
複製程式碼

以上配置即為本部落格的首頁效果

首頁配置說明

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

home:true：標記此頁面是否為首頁
lang:zh-CN：表示本頁面的語言為zh-CN(簡體中文)
heroText: 首頁的標題內容
heroImage: 首頁的標題圖片，其中全路徑為docs/.vuepress/public/logo.jpg，預設去public目錄下找靜態資源
actionText: 首頁跳轉按鈕的內容
actionLink: 首頁跳轉按鈕挑戰的路徑，其中全路徑為docs/interview/readme.md，預設readme命名的檔案可以省略不寫連結的後面內容，省略後的連結如上
features: 表明首頁的特徵，固定的格式為title + details，以三欄流式佈局的方式展示
footer: 為底部內容，與普通的網頁一樣，我們可以在footer裡面寫版權資訊

導航欄

配置導航欄需要在.vuepress/config.js檔案中進行配置

在預設主題下，導航欄需要在themeConfig屬性上進行配置nav，導航欄的兩個重要屬性為text和link，其中text指明瞭導航的文字內容，link指明瞭導航的連結。

基本導航欄

一個基本的導航欄連結可以配置成如下所示

module.exports = {
  // 其它配置
  themeConfig: {
    nav: [
      { text: '首頁', link: '/' },
      { text: 'HTML', link: '/html/' },
      { text: 'CSS', link: '/CSS/' },
      { text: 'JavaScript', link: '/JavaScript/' }
    ]
  }
}
複製程式碼

基本導航欄配置結果

導航欄下拉選單

下拉選單需要配置items屬性，它是一個陣列，陣列裡的物件依然是一個普通導航物件，即擁有text和link屬性，一個導航欄下拉選單可以配置成如下所示

module.exports = {
  // 其它配置
  themeConfig: {
    nav: [
      { text: '首頁', link: '/' },
      { text: '前端三劍客', items: [
        { text: 'HTML', link: '/html/' },
        { text: 'CSS', link: '/CSS/' },
        { text: 'JavaScript', link: '/JavaScript/' }
      ]},
      { text: 'Vue.jss', link: '/vue/' },
    ]
  }
}
複製程式碼

導航欄下拉選單配置結果

禁用導航欄

禁用導航欄分為兩種情況，第一種禁用所有的導航欄，第二種在某個頁面禁用導航欄，針對這兩種不同的情況，相關的配置是不同的，具體如下所示
第一種： 禁用所有導航欄，通過配置navbar屬性為false，此種方式禁用後，將不會存在任何導航欄

module.exports = {
  // 其它配置
  themeConfig: {
    navbar: false
  }
}
複製程式碼

第二種： 單個禁用導航欄，在每一個頁面(.md檔案)最頂部，配置navbar屬性為false，此種方式禁用後，對應的導航欄依然存在，只是不能點選跳轉。

---
navbar: false
---
複製程式碼

內建搜尋

我們在以上配置導航欄的過程中，除了我們配置的導航，還會出現一個搜尋框，這就是 VuePress 內建的搜尋，內建的搜尋只能搜尋頁面的h2和h3標題構成的索引，我們依然可以對內建的搜尋進行一下配置：

search: 通過配置此屬性為false，來禁用內建搜尋
searchMaxSuggestions: 通過配置此屬性為一個數字，對內建的搜尋進行最多結果數量的限制

module.exports = {
  // 其它配置
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10
  }
}
複製程式碼

側邊欄

側邊欄分組

側邊欄分組即意味著把連結進行分組，每一個連結對應一個頁面

側邊欄分組可以如下進行配置，其中collapsable屬性設定為false，意味著展開這個分組，屬性設定為true，意味著摺疊這個分組。

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',
        ]
      }
    ]
  }
}
複製程式碼

要實現以上分組結果，目錄結構可以如下所示

|-- docs
|   |-- CSS
|   |   |-- README.md
|   |-- HTML
|   |   |-- README.md
|   |-- JavaScript
|   |   |-- README.md
|   |-- Vue
|       |-- README.md
|       |-- Vue-Router.md
|       |-- Vuex.md
|   |-- README.md
複製程式碼

側邊欄分組的結果

自動生成側邊欄

::: tip 說明如果我們僅僅只是希望能根據.md中的標題自動生成側邊欄的話，可以設定sidebar: auto屬性即可 ::: 如果我們要為所有.md都開啟自動生成側邊欄的話，需要進行如下配置

module.exports = {
  themeConfig: {
    // 所有頁面全部開啟自動生成側邊欄
    sidebar: 'auto',
  }
}
複製程式碼

如果我們只是針對某一個.md檔案開啟自動生成側邊欄的話，需要在.md檔案的最上方，通過設定YAML屬性，相關配置如下

---
sidebar: auto
---
# Vue.js
這裡是Vue.js檔案的內容部分
複製程式碼

禁用側邊欄

正如上面所提到的單獨配置檔案的側邊欄，同樣的道理，我們也能單獨禁用側邊欄。

---
sidebar: false
---
# Vue.js
這裡是Vue.js檔案的內容部分
複製程式碼

最後更新時間

最後更新時間預設不開啟，它是基於git提交的時間戳，所以我們的靜態站點是需要通過git init的倉庫進行管理的，並且它是按git commit的時間來計算的。 
複製程式碼

最後更新時間可以通過配置lastUpdated，它的預設值為false，接受字串（String）和布林值boolean

module.exports = {
  themeConfig: {
    // 1.接受字串，它設定了最後更新時間的label，例如：最後更新時間：2019年5月3日 21:51:53
    lastUpdated: '最後更新時間',
    // 2.設定true，開啟最後更新時間
    lastUpdated: true,
    // 3.設定false，不開啟最後更新時間(預設)
    lastUpdated: false
}
複製程式碼

如果我們沒有上一篇或者下一篇，只需要把其對應的YAML屬性設定為false即可

上一篇下一篇可以通過配置YAML的prev和next來顯示的配置，連結地址同導航的地址一樣的書寫規則，一個配置了上一篇/下一篇的.md檔案可以如下所示

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

這裡是HTML5的內容部分
複製程式碼

Git倉庫和編輯連結

在輸出我們的靜態網站的時候，我們可能需要有一個導航連結到我們的GitHub倉庫，對於這個需求我們可以通過如下配置來解決

repo代表我們的連結地址，repoLabel代表連結的名稱，配置後它會自動出現在我們nav導航的最後一個位置

module.exports = {
  themeConfig: {
    // 其它配置
    repo: 'https://github.com/wangtunan/blog',
    repoLabel: 'Github',
    nav: [
      { text: '首頁', link: '/' },
      { text: '前端三劍客', items: [
        { text: 'HTML', link: '/html/' },
        { text: 'CSS', link: '/CSS/' },
        { text: 'JavaScript', link: '/JavaScript/' }
      ]},
      { text: 'Vue.jss', link: '/vue/' },
    ]
  }
}
複製程式碼

編輯功能預設是沒有開啟的，我們可以通過配置editLinks來設定是否出現編輯連結，editLinkText指明編輯功能的文字內容

一個啟用了編輯連結的配置可以如下所示

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

配置了編輯連結後結果可能如下圖所示

你也可以通過設定YAML來單獨禁止某個.md檔案啟用編輯連結功能

---
editLink: false
---
複製程式碼

Markdown擴充套件

連結

錨連結

在VuePress 中所有.md檔案中的標題(預設h2和h3)都會自動新增錨點連結(anchor)，所以如果我們需要跳轉至固定的錨點，可以如下進行設定

[錨點連結](/vuepress/#pwa配置)
複製程式碼

內部連結

在 VuePress 內部，以.md或者.html結尾的檔案，會被轉換成<router-link>用於SPA導航，它是大小寫敏感的。
如果檔名為README.md，它會被編譯成index.html，所以當我們訪問/vuepress/時，其實就是在訪問/vuepress/README.md或者/vuepress/index.html

自定義容器

VuePress 內建了三種不同狀態的自定義容器，分別有tip、warning和danger三種型別，在緊挨著型別的旁邊，可以設定自定義容器標題，不寫的話預設為TIP，它們的書寫規則如下所示

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

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

::: danger 危險
這裡是危險容器
:::
複製程式碼

三種自定義容器的結果如下圖所示

程式碼塊類別

對於不同的程式碼塊，需要設定不同的型別進行展示，常見的程式碼塊型別有如下所示

html 型別：它表示程式碼塊是html格式的
css 型別：它表示程式碼塊是css格式的
js 型別：它表示程式碼塊是javascript格式的
stylus 型別：它表示程式碼塊是stylus格式的，類似的型別還有less和scss
md 型別：它表示程式碼塊是markdown格式的
json 型別：它表示程式碼塊是json格式的

他們的對應的配置如下所示
HTML格式的程式碼塊(觀測程式碼塊右上角小角標)

<div class="box">html型別的程式碼塊</html>
複製程式碼

css格式的程式碼塊(觀測程式碼塊右上角小角標)

.box {
  width: 100px;
  height: 100px;
}
複製程式碼

js格式的程式碼塊(觀測程式碼塊右上角小角標)

console.log('js格式的程式碼塊')
複製程式碼

其它格式的程式碼塊同理，就不再次累述

程式碼塊高亮和行號

程式碼塊高亮

在Markdown中，我們可以如下所示來進行程式碼塊的高亮設定(型別後跟一個花括號)

`` js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
``
複製程式碼

它的結果可能會是這樣的(第四行高亮，行數不是從0開始的)

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
複製程式碼

多行高亮，只需要把行號用逗號隔開即可，例如js {1,3,5}

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
複製程式碼

程式碼塊行號

程式碼塊行號配置同樣需要在config.js中進行配置，如下所示

module.exports = {
  // 其它配置
  markdown: {
    // 顯示程式碼塊行號
    lineNumbers: true
  }
}
複製程式碼

配置後，程式碼塊行號的結果如下圖所示

使用Emoji表情

並不是所有`Emoji`表情都支援

在.md檔案中，我們可以使用Emoji表情，你也可以訪問Emoji Search來查詢你喜歡的Emoji表情，訪問Common Emoji來訪問常用的Emoji，一個Emoji可以是這樣寫的

#### 這裡是Emoji表情 :tada:
:100: :rocket:
複製程式碼

Github風格的表格

有時候我們想要在.md檔案中列一些簡單的表格，可以像下面這樣配置

| 序號          | 訂單編號      | 訂單金額|
| -------------|:-------------:| ------:|
| 1             | 20180101     | $1600  |
| 2             | 20180102     |   $12  |
| 3             | 20180103     |    $1  |
複製程式碼

以上表格同Github表格風格是一致的，它的結果如下所示

序號	訂單編號	訂單金額
1	20180101	$1600
2	20180102	$12
3	20180103	$1

自動生成目錄

我們有時候希望根據標題自動生成目錄，可以使用[[toc]]來輸出我們的目錄，它預設只列舉h2標題和h3標題

[[toc]]

# H1標題

## h2標題
### h3標題
### h3標題

## h2標題
### h3標題
### h3標題
複製程式碼

它的結果可能如下所示

使用Vue模板語法

使用插值

在.md檔案中，可以使用 Vue 的插值表示式，像下面這樣

# 插值表示式
1 + 1 的結果是 {{1+1}}
複製程式碼

1 + 1 的結果是 {{1+1}}

指令

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

列表渲染的結果是：<span v-for="number in 5">{{number}}</span>
複製程式碼

列表渲染的結果是：{{number}}

使用原生JavaScript和CSS

如果我們要在原生JS中操作DOM，那麼一定要記住VuePress的頁面是經過服務端渲染而來，最好是在頁面載入完畢之後再操作DOM

VuePress 賦予了我們在.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>
複製程式碼

以上程式碼的結果如下圖所示

使用CSS前處理器

VuePress 不僅像上面一樣賦予我們使用原生JS和CSS的能力，還賦予我們使用CSS前處理器的能力，它內建了相關CSS前處理器的配置，我們只需要安裝對應的依賴並使用即可，特別要注意的是，VuePress 內建了Stylus，我們無需安裝，直接使用即可，現在讓我們使用Stylus來改寫上面的例子

<style lang="stylus">
.box
  width: 100%
  height: 100px
  line-height: 100px
  text-align: center
  color: #fff
  background-color: #fb3
</style>
#### 使用原生的JS和CSS
<div id="container"></div>

<script>
window.onload = function() {
  var dom = document.getElementById('container');
  dom.innerHTML = 'box content'
  dom.className = 'box'
}
</script>
複製程式碼

使用Stylus前處理器後的結果如下圖所示:

使用內建元件

外部連結

OutboundLink用來標識一個外部連結，它緊跟在連結後面，在.md檔案中設定外部連結時，已預設使用了此元件。

下面是一個外部連結的配置，它連結到百度

[百度一下](https://www.baidu.com)
複製程式碼

此時，百度一下文字後面的小圖示就是內建元件OutboundLink 百度一下

Badge(角標)```

內建元件Badge有三個屬性需要傳遞

text：它指明瞭角標的內容
type：同自定義容器類似，它有三種不同的型別，分別是tip、warn和error，預設是tip
vertical：它指明瞭角標同內容的對齊方式，有兩個值，分別是top和middle，預設是top

角標的使用如下所示

#### Vue <Badge text="2.5.0+"/> 
#### Vuex <Badge text="beta" type="warn" vertical="top"/> 
#### Vue-Resource<Badge text="廢棄" vertical="middle" type="error"/>
複製程式碼

使用Vue元件

VuePress 除了讓我們使用內建元件以外，還可以讓我們使用自己的元件，它預設把在.vuepress/components目錄下所有的元件全域性註冊，註冊後我們可以直接在.md檔案中使用。我們先在.vuepress/components目錄下(無則新建)一個customer-component的.vue檔案，它的內容如下所示

<template>
  <div class="customer-component">
    todoList:
    <div v-for="item in list" :key="item.id">
      專案：{{item.text}}，狀態：{{item.done ? '完成': '進行中'}}
    </div>
  </div>
</template>
<script>
export default {
  name: 'CustomerComponent',
  data () {
    return {
      list: []
    }
  },
  created () {
    this.list = [
      { id: 1, text: 'JavaScript', done: false },
      { id: 2, text: 'HTML', done: false },
      { id: 3, text: 'CSS', done: true },
      { id: 4, text: 'Vue.js', done: true },
      { id: 5, text: 'VuePress', done: true }
    ]
  }
}
</script>
複製程式碼

在.md檔案中引入

### 使用自定義元件
<customer-component/>
複製程式碼

VuePress 執行結果

進階配置

基本配置API

title(標題)

title標題能讓我們配置靜態站點的標題，它固定在我們頂部左上角

可以像下面這樣來配置title

module.exports = {
  // 其它配置
  title: 'VuePress Blog'
}
複製程式碼

配置後的結果如下圖所示

description(網站的描述)

description它將會以 <meta> 標籤渲染到當前頁面的 HTML 中，它是給搜尋引擎去識別的，這屬於SEO配置

可以像下面這樣配置description

module.exports = {
  // 其它配置
  title: 'VuePress Blog',
  description: 'VuePress Blog 的網站描述'
}
複製程式碼

配置後的結果如下圖所示

base

base預設值為`/`,它屬於部署環節，配置它我們可以在`GitHub Pages`哪個目錄下訪問我們的專案

簡單來說，如果我們要配置在https://xxx.github.io/blog/這個地址，那麼我們的base需要進行如下配置

module.exports = {
  // 其它配置
  base: '/blog/',
  title: 'VuePress Blog',
  description: 'VuePress Blog 的網站描述'
}
複製程式碼

host(主機名)和post(埠)

host預設值為0.0.0.0，此引數可以指明我們主機名(IP地址)， port預設值為8080，此引數可以指明我們的埠號

配置了host和port後，我們可以在瀏覽器上通過IP地址+port埠進行訪問，例如

module.exports = {
  // 其它配置
  port: 3000,
  host: '127.0.0.1',
  base: '/blog/',
  title: 'VuePress Blog',
  description: 'VuePress Blog 的網站描述'
}
複製程式碼

以上配置成功後我們可以127.0.0.1:3000來訪問我們的專案

dest(輸出目錄)

dest預設值為.vuepress/dist，配置它可以顯示的幫助我們設定打包檔案的輸出目錄

如果我們想把dist目錄輸出在根路徑下，而不是.vuepress資料夾下，可以進行如下配置

module.exports = {
  // 其它配置
  dest: 'dist',
  port: 3000,
  host: '127.0.0.1',
  base: '/blog/',
  title: 'VuePress Blog',
  description: 'VuePress Blog 的網站描述'
}
複製程式碼

簡單的樣式覆蓋

如果你只是希望能夠在預設樣式中進行一些簡單的樣式覆蓋，你需要在.vuepress目錄下建立兩個樣式檔案override.styl和style.styl，它們都是stylus檔案(也可以是其它型別的樣式檔案)，這兩個檔案的具體作用如下

override.styl 重置預設主題的樣式變數
style.styl 運用到預設主題下的自定義樣式

override.styl

對於 VuePress 的預設主題，它提供了一些主題常量來讓我們可以自由配置，可以配置的常量和其對應的解釋如下

// 預設主題下的hover顏色(主題綠)
$accentColor = #3eaf7c 
// 預設主題下的文字顏色
$textColor = #2c3e50
// 預設主題下的border顏色
$borderColor = #eaecef
// 預設主題下的程式碼塊背景色(背景黑)
$codeBgColor = #282c34
複製程式碼

為了演示效果，我們給這些常亮設定一個醒目的顏色

$accentColor = #fb3 
$textColor = green
$borderColor = red
$codeBgColor = #58a
複製程式碼

以上設定的效果如下

style.styl

什麼是自定義的樣式？舉個例子，如果我們覺得預設主題下單行程式碼塊的文字顏色和背景色不夠醒目，在利用瀏覽器審查元素後，我們可以這樣設定我們的自定義樣式

.content
  code
    background-color: #fff5f5;
    color: #ff502c;
複製程式碼

運用以上自定義樣式後，預設主題下的單行程式碼塊的效果如下

引入程式碼片段

如果我們在寫.md文件中，需要匯入我們已經存在的js程式碼，而我們又不想再去使用程式碼塊複製貼上一遍，這個時候 VuePress 允許我們引入已經存在的js程式碼片段，它的語法如下

<<< @filepath
// 匯入的同時也支援高亮
<<< @filepath{highlightLines}
複製程式碼

具體示例如下

<<< @/docs/.vuepress/js/hello.js {2}
複製程式碼

匯入程式碼片段的結果

Algolia搜尋

在基礎配置章節我們講到了內建搜尋，內建搜尋只會為頁面的h2和h3標題建立索引，而如果我們想進行全文搜尋，就需要使用到本小結的Algolia搜尋了，它的配置可以是下面這樣的

module.exports = {
  // 其它配置
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
    }
  }
}
複製程式碼

不同於內建搜尋的開箱即用，使用`Algolia`搜尋，需要我們將網站提交給它們以建立索引

此小結的配置由於特殊性，並沒有配置成功，如果你感興趣，請移步這裡Algolia搜尋
如果你配置成功了，它們的搜尋效果會是下面這樣子的(Vue官網)

管理靜態資源

在.md檔案中，如果我們要使用靜態資源，我們有如下幾種方式來引用資源

相對路徑/絕對路徑
Webpack 別名

下面我們來一一進行介紹

相對路徑

要在.md檔案中引用一個圖片資源，它的固定格式如下

// 格式
![圖片缺失時的alt](圖片的路徑)

// 示例：絕對路徑
![百度logo](https://www.baidu.com/logo.png)
// 示例：相對路徑
![Algolia搜尋](../images/vuepress/16.png)
複製程式碼

如果你的目錄結構相對簡單，那麼使用相對路徑或者利用圖床技術，先把圖片上傳到圖床伺服器，再填寫絕對路徑，這往往是非常簡便和易懂的一種做法。

Webpack別名

就像Vue-cli腳手架那樣，在路徑比較長或者目錄結構比較複雜的時候，使用Webpack別名進行訪問，它通常是非常友好的，它的配置可以是這樣的

// .vuepress/config.js下配置
module.exports = {
  // 其它配置
  configureWebpack: {
    resolve: {
      alias: {
        '@vuepress': '../images/vuepress',
        '@vue': '../images/vue',
        '@interview': '../images/interview'
      }
    }
  }
}
複製程式碼

通過上面的配置以後，我們就可以在.md檔案中這樣使用

// 不使用別名
![Algolia搜尋](../images/vuepress/16.png)

// 使用別名
![Algolia搜尋](~@vuepress/16.png)
複製程式碼

自定義頁面樣式類

有時候我們希望在特定的頁面使用特定的樣式，VuePress允許我們這樣做，你只需要在.vuepress/style.styl中編寫自定義樣式並在對應的頁面使用即可，它們可能是這樣配置的

// .vuepress/style.styl
.customer-page-class
  color: #fb3;
  background-color: #333;
複製程式碼

在對應的.md檔案的最頂部，使用YAML語法進行引用自定義樣式

---
pageClass: customer-page-class
---
複製程式碼

使用自定義樣式它的結果

自定義頁面佈局

在預設主題下，每一個.md檔案都會被渲染在<div class="page"></div>這樣的一個標籤中，同時生成頁面的側邊欄、編輯連結(如果有)、最新更新時間(如果有)以及上一篇/下一篇(如果有)。
但是如果我們不想生成這樣的頁面，而是想使用自定義佈局，也就是使用Vue元件來進行自定義頁面開發，VuePress提供給了我們這樣的能力，它在保留導航欄的基礎上，其它一切我們都可以自定義的，它的配置可能是這樣的

// 在需要自定義的.md檔案中使用YAML語法
---
layout: customerComponent
---
複製程式碼

上面這樣的一個元件名，它對應的路徑為.vuepress/components/customerComponent.vue，由於 VuePress會自動幫我們把.vuepress/components目錄下的所有元件全部註冊，這樣我們可以在任何一個.md檔案中進行使用，customerComponent.vue中的程式碼可以是下面這樣的

<template>
  <div class="customer-component">
    <div class="left">123</div>
    <div class="center">123</div>
    <div class="right">123</div>
  </div>
</template>
<style lang="stylus">
  .customer-component
    height: calc(100vh - 60px);
    display: flex;
    background-color: #333;
    color: #fff;
    & > div
      flex: 0 0 200px;
      width: 200px;
      text-align: center
    .left
      background-color: #58a;
    .center
      flex: 1;
      background-color: #fb3;
    .right
      background-color: #58a;
</style>
複製程式碼

使用自定義佈局的結果如下

使用第三方主題

VuePress支援使用第三方主題，需要在.vuepress/config.js中如下進行配置即可

VuePress的外掛，命名是固定的，一般為vuepress-theme-xxx，npm install安裝第三方主題後，在配置時只需要寫最後一個名字即可。例如：vuepress-theme-reco主題，只需如下進行配置即可。

module.exports = {
  // 其它配置
  theme: 'reco'
}
複製程式碼

使用第三方庫

在寫文件的時候，我們如果希望使用npm包或者其它第三方庫，我們該如何進行使用，VuePress提供給我們enhanceApp.js來讓我們可以進行應用級別的配置，它的路徑為.vuepress/enhanceApp.js，相關配置如下

// 使用自定義樣式
import './style/index.styl'
// 使用第三方包
import _ from 'lodash'
// 其它
// import xxx from xxx

export default ({
  Vue,
  options,
  router,
  siteData 
}) => {
  // ...做一些其他的應用級別的優化
}
複製程式碼

部署

部署到Github Pages

部署到Github Pages，我們需要以下幾個步驟

打包生成dist資料夾
新建一個倉庫，再在此倉庫下新建一個gh-pages分支
提交程式碼到遠端倉庫(包含master分支和gh-pages分支)

打包

在部署前，我們需要使用我們配置的打包命令

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
複製程式碼

執行打包命令npm run docs:build，它會在.vuepress目錄下生成一個dist資料夾，隨後我們只需要把這個資料夾上傳到Github即可，它的打包結果可以參考如下

> vuepress build docs
 WAIT  Extracting site metadata...
[23:53:00] Compiling Client
[23:53:00] Compiling Server
Language does not exist sh
Language does not exist sh
[23:53:07] Compiled Server in 7s
[23:53:12] Compiled Client in 12s
WAIT  Rendering static HTML...
DONE  Success! Generated static files in docs\.vuepress\dist.
複製程式碼

新建倉庫並建立Github Pages分支

新建一個github倉庫和新建分支的具體步驟就不在此累述，如果你新建成功了的話，你的倉庫看起來應該是這樣子的

提交到Github

上面我們新建了一個遠端倉庫，我們可以在dist目錄下進行如下的命令

// 新建倉庫
$ git init

// 關聯你的遠端倉庫
$ git remote add origin xxxx

// 切換到gh-pages分支
$ git checkout gh-pages

// 提交程式碼到gh-pages分支
$ git push origin gh-pages

// 合併到master分支
$ git checkout master
$ git merge gh-pages
複製程式碼

在提交成功後，可以通過https://xxx.github.io或者https://xxx.github.io/xxx/進行訪問

關於自動化部署，如果你是新手，那麼按照正常的流程提交程式碼到遠端倉庫即可，不建議新手使用自動化部署。

vuePress從零開始搭建自己專屬的文件集合
2019-04-11
Vue
VuePress從零開始搭建自己的部落格
2018-06-09
Vue
從零開始搭建屬於自己的網站
2018-04-12
網站
創造屬於自己的靜態部落格
2019-02-16
使用WordPress搭建一個專屬自己的部落格
2020-10-27
從零開始教你用vuepress搭建自己的部落格（1）—基礎篇
2019-04-12
Vue
從零開始，打造屬於你的 ChatGPT 機器人！
2023-02-11
ChatGPT機器人
從零開始打造專屬釘釘機器人
2020-09-30
機器人
VsCode從零開始配置一個屬於自己的Vue開發環境
2019-05-17
VSCodeVue開發環境
Step-by-step，打造屬於自己的vue ssr
2018-04-14
Vue
手把手教你用Flutter搭建屬於自己的個人部落格
2021-05-12
Flutter
打造屬於你自己的instagram! 全棧專案(react + egg.js)
2018-12-01
全棧ReactJS
打造屬於自己的underscore系列（三）- 迭代器（上）
2019-01-22
打造屬於自己的underscore系列 ( 一 ) - 框架設計
2018-12-06
框架
打造屬於自己的underscore系列（四）- 迭代器（下）
2019-01-29
前端工程師最好的全棧開發實踐-設計開發屬於自己的nodejs部落格
2019-02-26
前端工程師全棧NodeJS
基於 vue-cli3 打造屬於自己的 UI 庫
2019-03-28
VueUI
打造屬於自己的underscore系列（六）- 洗牌演算法
2019-02-17
演算法
開始編寫自己的技術部落格...
2018-05-07
基於Koa2打造屬於自己的MVC框架
2020-08-03
MVC框架
打造自己的專屬軍團，《奇幻東征》今日啟程！
2020-03-12
從零建立釋出屬於自己的composer包
2020-07-06
萬字長文詳解如何搭建一個屬於自己的部落格（純手工搭建??）
2021-04-24
專案實戰！用爬蟲和Flask打造屬於自己的電影網站
2018-08-08
爬蟲Flask網站
從0開始建立自己的部落格：前言
2021-05-24
「山禾說成長」：手把手教你搭建一個完全屬於自己的技術部落格
2020-07-08
打造屬於自己的underscore系列 ( 二 ) - 資料型別診斷
2019-01-11
資料型別
短影片運營，如何打造屬於自己的粉絲經濟？
2020-06-08
建立屬於自己的NPM包
2018-12-10
NPM
構建屬於自己的Flutter混合開發框架
2020-02-19
Flutter框架
如何從現在開始寫部落格？
2019-06-24
從零開始搭建部落格系列
2024-06-25
基於Gitea打造一個屬於你自己的程式碼託管平臺
2020-10-01
Git
從零開始的個人技術部落格
2019-02-16
《王者榮耀》：屬於自己的路
2020-11-11
基於.NetCore開發部落格專案 StarBlog - (5) 開始搭建Web專案
2022-05-16
NetCoreWeb
從零開始打造自己的PHP框架――第2章
2019-02-16
PHP框架
VuePress 部落格優化之開啟 HTTPS
2022-01-17
Vue優化HTTP