之前就一直想搭建自己的要给类似博客的网站，虽对开发难度对我来说没啥问题，但是样式这块每次写篇文章还的设计一番，那太浪费时间了，就想找可以快速生成的框架，其实我的需求比较简单，样式整洁，有文件列表，可以查询就可以了。

最终确定了基于当下vue和react两个最火热的框架，一个是VuePress，一个是dumi。

先介绍下这个两个框架的特点。

使用markdown语法写文章，快速生成静态网页每篇文章在网页左侧罗列，可以快速定位可以根据关键字查询，然后快速定位生成的静态资源可以直接部署成网站插件丰富可以自定义，扩展性强

先看下例子：

上面是VuePress和dumi的官方文档截图，从效果来看大差不差。

VuePress快速配置

刚开始本着vue封装比较全面，所以先看的这个框架，结果发现这个框架没有脚手架，这就无语了，每个配置都的一个一个自己去配。

初始化

初始化比较简单，就不多说，可以根据官网的步骤操作即可。

创建目录 初始化 yarn init将 VuePress 安装为本地依赖根目录创建doc文件夹在 package.json 中添加一些 scripts

mkdir vuepress-starter && cd vuepress-starteryarn inityarn add -D vuepressmkdir 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: "; },    ],  },

这大概都满足我的要求了，剩下的就是让某个目录下文件自动生成侧边栏的列表，就像官网每个导航进去的效果。

结果我在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。