基于VuePress的博客搭建指南

其实关于如何利用VuePress搭建博客的相关内容在官方文档已经介绍得比较充分了，我相信大部分问题都可以在其中找到答案，但即便如此，我觉得还是有必要对自己探索和使用VuePress的过程做一个回顾和总结，梳理一下思路，记录遇到的问题，此外如果能够为遇到类似问题的人提供一些解决问题的思路那再好不过了。

基本配置

按照官方的快速上手步骤创建好项目之后，需要做的就是配置，正如VuePress对自己的定义所说：Vue 驱动的静态网站生成器，对，它就是一个生成器，不需要我们做开发工作，只需往里面放入必须的原料-文章，以及做一些配置工作，它就可以生成我们所需要的博客站点。配置分为全局配置和针对每个单独页面的页面配置，一般将默认配置放入全局配置，针对单独页面的特殊配置放入页面配置。

全局配置

全局配置写在docs>.vuepress>config.js文件中，全局配置涉及到的内容很多，除了基本配置之外，还包含主题配置：themeConfig、插件配置：plugins，md配置：Markdown，构建流程配置：configureWebpack等。可以参照官方文档中的词条一个个去看它们的作用，其中默认主题配置根据项目使用的主题可能会有不同的配置内容，如果直接使用默认主题的话则可以根据主题说明文档下的默认主题配置说明来进行配置。

修改config文件之后需要重启dev-server配置才能生效

页面配置

官方文档中没有提到页面配置这个概念，但其实页面配置就写在每篇markdown文件的Front Matter之中，在其中我们可以设置一些参数的值，或者创建自定义变量（这在之后开发主题中会用到）

一个简单的Front Matter例子：

---
title: 基于vuePress的博客搭建指南
lang: zh-CN
description: 一篇使用VuePress搭建个人博客的不完全指南
date: 2021-1-20
---

每个冒号后必须接一个空格，否则页面会报错

在Front Matter中默认主题的预定义变量有：

• navbar 是否开启导航栏
• sidebar 是否开启侧边栏
• prev 上一篇文章链接
• next 下一篇文章链接
• search 是否开启搜索栏
• tags 添加标签，为搜索功能建立索引

使用博客主题

如果你想搭建一个美观的个人博客，使用以上配置恐怕不能满足你的需求，因为它的默认主题是为了技术文档而设计的。为了更好的使用体验，可以使用官方的博客主题

安装

yarn add vuepress @vuepress/theme-blog -D

注意使用博客主题的默认目录结构与vuepress初始的目录结构有所不同，如果目录不正确的话运行会报错，第一次使用的人可能会不知道是什么原因

vuepress/theme-blog推荐目录结构

├── blog
│   ├── _posts #博客文章目录
│   │   ├── 2018-11-7-frontmatter-in-vuepress.md #example
│   │   ├── 2019-2-26-markdown-slot.md #example
│   │   └── 2019-5-6-writing-a-vuepress-theme.md #example
│   └── .vuepress
│       ├── `components` _(**Optional**)_
│       ├── `public` _(**Optional**)_
│       ├── `styles` _(**Optional**)_
│       │   ├── index.styl
│       │   └── palette.styl
│       ├── config.js
│       └── `enhanceApp.js` _(**Optional**)_
└── package.json

安装完后需要在config.js中进行配置

// .vuepress/config.js
module.exports = {
     
  title: 'OR洋葱圈的博客', 
  theme: '@vuepress/theme-blog',
  themeConfig: {
     
  }
}

之后启动dev-server，就能看到以博客主题呈现的全新页面了

使用脚手架

上面提到的项目模板不用自己手动创建，官方提供了脚手架——create-vuepress，运行

yarn create vuepress [ProjectName]

选择blog type后会帮你生成项目模板

启动dev-server后可以看到，这个项目模板已经搭建起了一个基本的博客框架，包括首页、文章列表、标签、搜索几个功能，如果不嫌弃的话完全可以作为一个极简博客来使用了，或者对默认配置进行一些修改，使其具备一定的个性化。

开发主题

如果对官方提供的博客主题不满意的话可以自己开发主题，可以对每个页面的布局进行深度定制，创造完全属于自己风格的博客。

在.vuepress文件夹下新建theme文件夹，其中约定的目录结构如下

theme
├── global-components
│   └── xxx.vue
├── components
│   └── xxx.vue
├── layouts
│   ├── Layout.vue (必要的)
│   └── 404.vue
├── styles
│   ├── index.styl
│   └── palette.styl
├── templates
│   ├── dev.html
│   └── ssr.html
├── index.js
├── enhanceApp.js
└── package.json

关于约定的具体内容可以参见官方文档。

其中我们编写的Layout.vue组件会自动应用到每个界面，所以它是必须的，在每个组件中可以通过this.$site‘和‘this.$page获取全部页面和当前页面的元数据，包括path以及frontmatter中的内容，同时使用Content组件获取markdown文件渲染的内容。

基本上这些内容和结构就能满足我们定制博客的需求了，例如编写一个文章目录组件以及文章展示组件，但通常来说，我们需要一个全局的header和footer，这时我们必须要用到globalLayout，其实vuepress已经写好了默认的globalLayout组件，它的作用就是判断frontmatter中有没有配置layout，如果没有配置的话就使用Layout.vue布局

---
layout: AnotherLayout
---

我们可以新建globalLayout.vue，取代默认的配置，在其中加上全局的header和footer组件

同时默认的globalLayout组件的功能也要带上

computed: {
     
    layout () {
     
      if (this.$page.path) {
     
        if (this.$frontmatter.layout) {
      // 检测frontmatter中是否设置了layout
          return this.$frontmatter.layout
        }
        return 'Layout'  //没有则使用默认layout
      }
      return ''NotFound''  //此处的NotFind会自动匹配404.vue组件，无需修改
    }
  }

有了上面的基本思路，接下来的工作就如同平常的vue应用开发一般，可以每个地方进行深度定制。

但其实大部分时候，我们都不需要从头做起，不必做一些别人已经做过的重复工作。我们可以基于主题继承来重用那些已经被实现地很好的功能，例如在默认主题的基础上进行修改和开发定制功能，关于主题继承，可以参见官方文档

欢迎访问我的个人博客：https://ppwq.xyz