之前就一直想搭建自己的要给类似博客的网站，虽对开发难度对我来说没啥问题，但是样式这块每次写篇文章还的设计一番，那太浪费时间了，就想找可以快速生成的框架，其实我的需求比较简单，样式整洁，有文件列表，可以查询就可以了。
最终确定了基于当下vue和react两个最火热的框架，一个是VuePress，一个是dumi。
先介绍下这个两个框架的特点。
- 使用markdown语法写文章，快速生成静态网页
- 每篇文章在网页左侧罗列，可以快速定位
- 可以根据关键字查询，然后快速定位
- 生成的静态资源可以直接部署成网站
- 插件丰富
- 可以自定义，扩展性强
先看下例子：
上面是VuePress和dumi的官方文档截图，从效果来看大差不差。
VuePress快速配置
刚开始本着vue封装比较全面，所以先看的这个框架，结果发现这个框架没有脚手架，这就无语了，每个配置都的一个一个自己去配。
初始化
初始化比较简单，就不多说，可以根据官网的步骤操作即可。
- 创建目录
- 初始化 yarn init
- 将 VuePress 安装为本地依赖
- 根目录创建doc文件夹
- 在 package.json 中添加一些 scripts
mkdir vuepress-starter && cd vuepress-starter
yarn init
yarn add -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
yarn docs:dev
这就能跑起来了，但是功能比较简单，想要复杂的功能，就的自己写配置文件
配置文件
在docs文件夹下创建.vuepress文件夹，添加配置文件config.js
显示侧边栏
侧边栏是在主题配置中设置，可以针对每篇文章单独设置，但是我是设置的默认自动生成。
themeConfig: {
sidebar: "auto",
},
首页不显示侧边栏
默认docs文件夹下的README.md文件就是首页。上面设置了侧边栏自动生成，首页也会生成侧边栏，如果想让首页像官网一样不显示侧边栏，则可以在首页文件头部增加如下标记
---
sidebar: false
---
自定义导航栏
这个也是在主题中配置
themeConfig: {
sidebar: "auto",
nav: [
{ text: "Home", link: "/" },
{ text: "Guide", link: "/guide/" },
{ text: "Gitee", link: "https://google.com" },
],
},
目录下文件自动生成列表
这大概都满足我的要求了，剩下的就是让某个目录下文件自动生成侧边栏的列表，就像官网每个导航进去的效果。
结果我在guide下面增加文件，却不显示，只显示README.md，找了半天也没解决。所以就放弃了，改投dumi了。
dumi配置简单
dumi也是类似的框架，不过是基于react的，之前写的博客就是基于这个的，现在把快速使用流程分享下。
脚手架快速创建
$ mkdir myapp && cd myapp
# 通过官方工具创建项目，选择你需要的模板
$ npx create-dumi
# 选择一个模板
$ ? Pick template type › - Use arrow-keys. Return to submit.
$ ❯ Static Site # 用于构建网站
这样网站就能跑起来了。
添加文章
生成的网站自带的有docs文件夹，项目结构不用再做过多修改，除非定制化比较高。
在docs文件夹下可以创建文件夹，也可以创建md文件。从上图可以看出，docs下有个自带了一个index.md和guide.md，还有我自己创建的一个List文件夹，这些文件都会自动添加在导航中。
点击图标就跳转到首页，Guide和aaa都自动添加到导航了。并且点击aaa，可以看到，文件bbb也被列举出来了。
修改文件夹显示名称
从上图可以看出，List文件夹的导航名称不是List，而是第一篇文章的标题，dumi的机制就是这样：导航的名称默认为该导航类目下第一篇文档的分组标题或文档标题。
可以通过在目录任一文件头部指定导航名称即可。
不用非的在第一个文件中指定，任意一个文件指定都行，不过还是推荐在第一个中。上面我就是在第二个文件中指定，从效果看是生效的。
脚手架自带根据关键字搜索和换肤等实用功能，几乎只需修改下文件夹名在导航中的显示即可，非常nice。