reco 主题和你的小小约定

2020-7-11

# 背景

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

# 目标

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

# 动作

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

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

# 约定

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

reco 主题首先会获取设置了 categories 文章数据,再过滤掉没有设置 titlepublush === falsehome: true 的文章,这样就形成了博客的数据,将其定义为 $recoPosts

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

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

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

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

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