使用 VuePress 搭建博客

最近将自己的博客 (学习笔记) 搭建方式从 Hexo 迁移到 VuePress, 这里记录了搭建 VuePress 博客的主要过程，同时也提供了部分自定义的配置， 示例地址

# 环境搭建

VuePress 有着比较完善的中文文档，我们可以直接参照文档搭建
首先确保电脑上已经安装了 node.js 并且版本号不小于 8.0

# 检查 node.js 版本号
node -v

建立一个文件夹用来搭建 VuePress, 例如我的 VuePress 搭建在 Document/Blog/ 下

cd Document
mkdir Blog

在建立的文件夹中安装 vuepress

npm install -D vuepress

创建 package.json 文件

npm init -y

创建 docs 文件夹

mkdir docs

在 package.json 中添加下面的脚本

{
  "scripts": {
    "docs:dev": "npx vuepress dev docs",
    "docs:build": "npx vuepress build docs"
  }
}

到此基本环境已经搭建完成，我们已经可以在 docs 文件夹下创建我们的 markdown 文档，然后运行 npm run docs:build 来生成静态页面访问。

# 添加主题

环境添加完毕后接下来就是装修完善了，VuePress 的原始样式更适合制作文档，因此我们需要自定义样式。VuePress 提供了自定义主题与样式的方法，为了简单我们可以直接使用别人制作好的博客主题
这里推荐一个我正在使用的主题 vuepress-theme-reco
主题的使用方法文档中已经介绍的很详细了，这里分享几个我自己的自定义设置

# 修改页面样式

原始主题的页面内容宽度最大值是固定的，在我的大屏幕上显得有些窄了，因此我将文本宽度改为了页面宽度的 50%，这个设置与 Hexo 的设置一致，每个人可以根据自己的爱好修改。在 .vuepress/styles/palette.styl 文件中添加如下样式

// 首页内容宽度更改为页面的 75%
.home-blog
  .home-blog-wrapper
    width :75%
    
 // 文章页内容宽度更改为页面的 50%  
.page
  .page-title
    max-width :50%
  .content__default:not(.custom)
    max-width :50%
  .page-nav
    max-width :50%
    
.comments-wrapper
  max-width :50% !important

# 增加关闭侧边栏按钮

原始主题没有添加动态显示隐藏侧边栏的方法，侧边栏在查看文章结构、快速跳转等方面非常方便，但同时也占据了页面的部分位置，在屏幕比较小用不到侧边栏时观感较差。于是我决定在页面上添加一个可以隐藏侧边栏的按钮。为了达到最佳效果最终决定修改原主题的文章模板页面，找到 node_modules/vuepress-theme-reco/components/Page.vue

# 在 main 标签下增加视图

<div class="sidebar-open-close" v-on:click="open_or_close">
    <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg>
</div>

# 在 methods 中添加方法

open_or_close: function(){
        let theme_container = document.getElementsByClassName('theme-container')[0];
        if (theme_container.classList.contains('no-sidebar')) {
            theme_container.classList.remove('no-sidebar');
        } else {
            theme_container.classList.add('no-sidebar');
        }
    }

# 在 style 中增加样式

.sidebar-open-close
  display: none;

@media screen and (min-width: 768px)
  .sidebar-open-close 
      position: fixed;
      z-index: 10;
      top: 4rem;
      display: inline-block;
      left: 0.1rem;
      width: 1.5rem;
      color: $accentColor;
      cursor: pointer;

# 在 palette.styl 文件中添加下面的样式

.theme-container.no-sidebar
  .sidebar-open-close
    margin-left: 0
    left :20px

.theme-container
  .sidebar-open-close
    margin: 10px 0 0 $sidebarWidth
    left: 20px

# 增加看板娘

主题自带了一个给页面增加看板娘的插件，内置了几种看板娘，我们可以在其他地方找到 live2d 的模型来自己配置
更多 live2d 传送门
我们可以在插件中添加链接来添加我们自己的模型

// node_modules/@vuepress-reco/vuepress-plugin-kan-ban-niang/bin/KanBanNiang.vue
// 在原有的 model 下面增加
Terisa:'https://cdn.jsdelivr.net/gh/KnightSama-Assets/live2d@1.1/Terisa/model.json'

这样我们就增加了一个名为 Terisa 的模型

# 添加插件

添加主题中未包含的插件，这里介绍几个我使用的插件
vuepress-plugin-viewer 一个图片查看插件
vuepress-plugin-pangu 自动在文章中英文与汉字之间添加空格
vuepress-plugin-tabs 增加一个带有 tab 标签的容器
vuepress-plugin-click 鼠标点击时增加特殊效果
vuepress-plugin-demo-block 添加 H5 代码预览区块

# 部署

博客搭建完成后需要部署，我们可以创建一个 shell 文件来打包部署，我的部署到 github.io 下面，这是我的 shell 文件

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:KnightSama/KnightSama.github.io.git master

cd -