# 背景
大家都知道,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