项目的亮点

Vuepress诞生时候我就入手体验了，也有很多大神写过这方面的文章写的也很不错。起初并不打算想写的，想到或许可以帮助一些人更快更轻松的搭建博客。我搭建的VuePress作为模版，介绍其中一些必要的配置项，更快的了解VuePress，顺便在上面爽爽写文章文档就行。

本项目一些优点

1. 自动生成侧边栏和分组
2. GitHub Actions 自动部署
3. 集合一些有趣的插件库

快速上手

全局安装

在命令行或者控制台、终端执行以下操作。

# 创建项目目录
mkdir vuepress && cd vuepress   // 生成一个vuepress文件夹，然后进入该文件夹

# 初始化项目
npm init

# 将 VuePress 作为一个本地依赖安装
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

接着，在 package.json 里加一些脚本:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },

然后就可以运行本项目

yarn docs:dev # 或者：npm run docs:dev

打包部署到GitHub服务器上

yarn docs:build # 或者：npm run docs:build

目录的结构

vuepress
├── docs
│   ├── .vuepress
│   │   ├── components (Vue 组件将会被自动注册为全局组件)
│   │   ├── public (静态资源目录)
│   │   ├── config.js (配置文件的入口文件)
│   ├── README.md
│   ├── guide
│      └── README.md
└── package.json

主题基本配置

配置文件

首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

module.exports = {
  title: 'Hello VuePress', //网站的标题
  description: 'Just playing around' //网站的描述
}

导航栏

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '指南', link: '/guide/' },
      { text: 'Google', link: 'https://google.com' },
    ]
  }
}

当你提供了一个 items 数组而不是一个单一的 link 时，它将显示为一个 下拉列表：

module.exports = {
  themeConfig: {
    nav: [
      {
        text: '语言',
        items: [
          { text: '中文', link: '/cn/' },
          { text: '英语', link: '/en/' }
        ]
      }
    ]
  }
}

侧边栏分组

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: [
      {
        title: 'Group 1',   // 必要的
        path: '/foo/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
        collapsable: false, // 可选的, 默认值是 true,
        sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
          '/'
        ]
      },
      {
        title: 'Group 2',
        children: [ /* ... */ ]
      }
    ]
  }
}

看到这里，有没有发现一件事，你写的文章可能存在guide目录或者其它目录下，可能几篇文章还好，但是考虑到后续有几百篇的文章，存放在侧边栏上，需要手动去配置路径，后续文章修改文件名和路径的情况下，一不下心操作失误可能博客就废的差不多的。难维护。

接下来就介绍一下，如何把文章存在目录下文章就自动生成侧边栏有没有觉得非常棒！！！

自动生成侧边栏

在.vuepress 目录下创建一个utils目录，然后创建initPage.js和index.js 文件

initPage.js文件

const fs = require('fs');
// 排除检查的文件
let excludes = ['.DS_Store'];

let filehelper = {
  getFileName: function(rpath,otherPath) {
    let filenames = [];
    let fileTypes = /\.md$/; //只匹配以md结尾的文件
    fs.readdirSync(rpath).forEach((file) => {
      if (excludes.indexOf(file) < 0) {
        fullpath = rpath + '/' + file;
        let fileinfo = fs.statSync(fullpath);
        if (fileinfo.isFile()) {
          if (fileTypes.test(file) > 0) {
            if (file === 'README.md') {
              file = '';
            } else {
              file = file.replace('.md', '');
            }
            file = otherPath ? otherPath + file : file
            filenames.push(file);
          }
        }
      }
    });
    filenames.sort(); // 排序
    return filenames;
  },
};
module.exports = filehelper;

index.js 文件

index.js 主要是接收参数，将参数转换成对象格式，方便在 config.js 里使用。

const utils = {
  genSidebar: function (title, children = [''], collapsable = true, sidebarDepth = 2) {
    let arr = new Array();
    arr.push({
      title,
      children,
      collapsable,
      sidebarDepth
    })
    return arr;
  }
};

module.exports = utils;

在.vuepress 目录下创建一个themeConfig.js文件

const path = require('path');
const rootpath = path.dirname(__dirname);
const utils = require('./utils/index');
const filehelper = require('./utils/initPage.js');

const themeConfig = {
  nav: [
    {
      text: '面试',
      link: '/Interview/',
    },
    {
      text: 'JavaScript',
      link: '/JavaScript/',
    },
    {
      text: 'Vuejs',
      link: '/vue/',
    },
    {
      text: 'CSS',
      link: '/css/',
    },
    {
      text: '其它',
      ariaLabel: 'Menu',
      items: [
        { text: 'VuePress', link: '/other/vuepress/' },
        { text: '开发工具', link: '/other/ide/' }
      ]
    },
    {
      text: '主页',
      ariaLabel: 'Menu',
      items: [
        { text: '主页一', link: '/404/' },
        { text: '主页二', link: '/404/Personal' }
      ]
    },
  ],
  
  sidebar: {
    '/JavaScript/': concatJs(),
  },
};

// JavaScript
function concatJs() {
  const arr = utils.genSidebar( 'JStst', filehelper.getFileName(rootpath + '/JavaScript/'), false);
  arr.push(...utils.genSidebar('Js-Vue',filehelper.getFileName(rootpath + '/JavaScript/vue/', 'vue/'),false));
  return arr;
}

module.exports = themeConfig;

通过themeConfig.js 把一些配置项调整放在这里，这样.vuepress/config.js 就可以如下代码这样写。避免文件过于太长而且代码更加优雅一些，今后一些目录调整在themeConfig.js稍作调整就行。

const themeConfig = require('./themeConfig');

module.exports = {
  title: '廖纯鑫博客',
  description: '前端、前端教程、小程序、个人博客、廖纯鑫博客',
  themeConfig
};

参考文献：

1. vuepress自动生成侧边栏 (opens new window)
2. VuePress 中文文档 (opens new window)

部署

在项目目录下创建一个 deploy.sh文件，复制以下代码。

# 确保脚本抛出遇到的错误
# 上传vuepress源码及文章到码云备份
set -e
git add -A
git commit -m 'blogCode'
git push [email protected]:qqlcx5/vuePressCode.git master
# 打包及切换到打包后文件夹
npm run docs:build && cd docs/.vuepress/dist

# 部署到码云
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:qqlcx5/qqlcx5.git master

# 部署到github Page
# 删除 .git目录重新上传，目前只有想的这种方法
rm -rf .git
git init
git add -A
git commit -m 'deploy'
git push -f [email protected]:qqlcx5/qqlcx5.github.io.git master
cd -

仓库地址自行更换。

window用户双击deploy.sh 文件便会将上传文章到码云备份，及部署到GitHub Page。

# 在终端且进入vuepress项目中输入：

./deploy.sh

# 如果出现permission denied，就重新设置一下权限再运行，

chmod 777 deploy.sh

./deploy.sh