reco 主题和你的小小约定

背景

大家都知道，reco 主题是在官方默认主题的基础上开发的，而默认主题本身是为文档量身定做的，并且早期没有一个功能齐全的博客主题，reco 主题就是在这样一个环境下迅速推出的，来丰富博客该有的功能元素和模块，但是文章的详情页并没有做过太多的调整，如果你在用 reco 主题来搭建文档，那还 OK，如果是来搭建博客，那文章详情页就会显得有些不搭。

目标

而这个不太搭的元素就是默认的侧边栏。由于单篇文章的侧边栏同自定义侧边栏（文档整合）太相似，单篇文章的展示看起来也很像是文档。所以我在考虑怎么在侧边栏上做出调整，来区分博客和文档？

动作

基于前面的背景和目标，我将自己的想法在 1.5.3 版本中做了一次尝试：

• 将原来的侧边栏中的文章的各级标题，抽离出来，生成副侧边栏，展示在文章内容的右侧。
• 当显示自定义的侧边栏时，主侧边栏只展示文章题目，不再展示各级标题，各级标题将由副侧边栏去负责。
• 如果是普通文章，只展示副侧边栏，不会再去展示左侧的主侧边栏。

约定

上面的动作似乎已经达到了预期，在内容展示上也不再略显空旷。但是我还是想和大家聊一下 reco 主题是怎么处理 markdown 数据的，进而约定一下如何处理文档的存放位置和 front-matter，来让主题更好地为你服务。

reco 主题首先会获取设置了 categories 文章数据，再过滤掉没有设置 title、publush === false 和 home: true 的文章，这样就形成了博客的数据，将其定义为 $recoPosts。

而时间轴的数据，就是在 $recoPosts 的基础上过滤掉没有设置 date 的文章，再按照时间做一些排序整合。

所以你会发现，front-matter 的一些设置仅对博客有效，对于自定义侧边栏其实是没有作用的。其实 reco 主题是这样来思考的文档和博客的区别的：

• 博文是一篇篇独立的文章，它需要 author、date、categories、tags 等这些元素，所以如果你希望它正常显示，一定要设置 title、categories。
• 文档是通过侧边栏将其约束在一起才有意义的一类文章，所以侧边栏的数据，不会去过滤它的 date、categories、publush 的。

如果你希望和主题官网一样既有文档和又有博客，可以这样来存放你的文件：

├── .vuepress -------- vuepress 配置文件夹
├── docs ------------- 存放文档的位置
│   ├── vue ------------ vue 相关文档
│   ├── react ---------- react 相关文档
│   └── webpack -------- webpack 相关文档
├── blogs ------------ 存放博客的位置
│   ├── html ----------- 分类 html
│   ├── css ------------ 分类 css
│   └── js ------------- 分类 js
├── README.md -------- 首页
└── package.json ----- package.json