從今天開始，拿起VuePress打造屬於本身的專屬博客
VuePress(0.x版本)
本blog配套了一個基於 VuePress 的一個簡單的配置案例，此配置案例包含了本blog絕大部分配置案例，更多詳情請移步這裏VuePress配置案例javascript
前言
問：這篇文章是幹什麼的？
答：列舉博客站點常見的配置並提供詳細配置步驟和配置截圖css
問：這篇文章適合哪些人？
答：想寫博客，但並不知道如何寫以及知道VuePress但並不知道怎麼配置html
問：這篇文章目錄怎麼理解？
答：看完基礎配置能上手配置，看完進階配置能熟悉瞭解VuePress前端
安裝
本博客VuePress主版本爲0.x，相關配置最新的1.x也兼容，請放心使用。另請確認你的Node.js >= 8 vue
全局安裝(推薦)
一般而言，全局安裝 VuePress 會很是省心，能夠經過以下命令進行全局安裝java
$ npm install -g vuepress
複製代碼
本地安裝
區別於全局安裝，本地安裝會把npm包安裝在本項目上，生成一個叫node_modules目錄，能夠經過以下命令進行本地安裝（需同時安裝vuepress和webpack-dev-middleware）node
$ npm install vuepress webpack-dev-middleware --save-dev
複製代碼
基本配置
基本配置下的內容適用於 VuePress 的默認主題，對於自定義主題配置可能會不太同樣 webpack
腳本命令
咱們須要至少兩個腳本命令，分別用於本地開發和打包上線，腳本命令須要配置在docs/package.json文件中，它的配置以下git
{
"scripts": {
// 本地開發
"docs:dev": "vuepress dev docs",
// 打包上線
"docs:build": "vuepress build docs"
}
}
複製代碼
本地開發請使用以下命令，它在本地啓用了一個小型的服務器，你能夠在瀏覽器中使用localhost:8080(默認狀況下)進行訪問github
$ 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
複製代碼
側邊欄分組的結果
自動生成側邊欄
若是咱們僅僅只是但願能根據.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.js', 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和scssmd類型：它表示代碼塊是markdown格式的json類型：它表示代碼塊是json格式的
他們的對應的配置以下所示
HTML格式的代碼塊(觀測代碼塊右上角小角標)
<div class="box">html類型的代碼塊</html>
複製代碼
css格式的代碼塊(觀測代碼塊右上角小角標)
.box {
width: 100px;
height: 100px;
}
複製代碼
js格式的代碼塊(觀測代碼塊右上角小角標)
console.log('js格式的代碼塊')
複製代碼
其它格式的代碼塊同理，就不在次累述
代碼塊高亮和行號
代碼塊高亮
掘金不支持代碼塊高亮，請自行用VuePress配置查看結果
在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}}(掘金不支持，自行使用VuePress查看此案例)
指令
除了像上面那樣使用插值表達式，咱們還可使用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>
<!--.md內容-->
#### 使用原生的JS和CSS
<div id="container"></div>
<!--js內容-->
<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>
<!--.md內容-->
#### 使用原生的JS和CSS
<div id="container"></div>
<!--js內容-->
<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，默認是tipvertical：它指明瞭角標同內容的對齊方式，有兩個值，分別是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文件中引用一個圖片資源，它的固定格式以下
// 格式
// 示例：絕對路徑
// 示例：相對路徑
複製代碼
若是你的目錄結構相對簡單，那麼使用相對路徑或者利用圖牀技術，先把圖片上傳到圖牀服務器，再填寫絕對路徑，這每每是很是簡便和易懂的一種作法。
Webpack別名
就像Vue-cli腳手架那樣，在路徑比較長或者目錄結構比較複雜的時候，使用Webpack別名進行訪問，它一般是很是友好的，它的配置能夠是這樣的
// .vuepress/config.js下配置
module.exports = {
// 其它配置
configureWebpack: {
resolve: {
alias: {
'@vuepress': '../images/vuepress',
'@vue': '../images/vue',
'@interview': '../images/interview'
}
}
}
}
複製代碼
經過上面的配置之後，咱們就能夠在.md文件中這樣使用
// 不使用別名
// 使用別名
複製代碼
自定義頁面樣式類
有時候咱們但願在特定的頁面使用特定的樣式，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/(這取決於你是否配置了base屬性)進行訪問
關於自動化部署，若是你是新手，那麼按照正常的流程提交代碼到遠程倉庫便可，不建議新手使用自動化部署。
- 1. 從今天開始，拿起VuePress打造屬於本身的專屬博客
- 2. VuePress從零開始搭建本身專屬博客
- 3. VuePress從零開始搭建專屬博客
- 4. 今天開始寫本身的博客
- 5. 從零開始搭建屬於本身的博客
- 6. Xamarin Android 打造屬於本身的博客園APP（1）
- 7. Xamarin Android 打造屬於本身的博客園APP（2）
- 8. Xamarin Android 打造屬於本身的博客園APP（3）
- 9. Xamarin Android 打造屬於本身的博客園APP（4）
- 10. VuePress從零開始搭建本身的博客
- 更多相關文章...
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • MySQL的版本以及版本號 - MySQL教程
- • ☆基於Java Instrument的Agent實現
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記