从今天开始，拿起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属性)进行访问
关于自动化部署，若是你是新手，那么按照正常的流程提交代码到远程仓库便可，不建议新手使用自动化部署。