虽然有着Butterfly这样很好看的主题,但是对于我这样的喜欢没事找事的人来说,肯定要来一点点自己的设置,允许自己来破坏 Butterfly的一致性

想法起源

每次打开VSC 都是 hexo n page 或者 hexo n post
基于程序员的自我折腾性,我想既然给了page这样新建不同路径的命令,那么就不可能就依靠 page 这一个样式来强迫统一所有的UI。
那么,一定存在着某个方法,可以让我在Butterfly的主题下进行自己的创造乱改。

发现

注意到,在博客源文件的根目录下的 source 文件夹存在 _posts 文件,我们写的md文档都会存在这里面。

由此想到,会不会在 themes 这个管理主题下面会有管理样式的相关文件。

主题目录

以过了六级的英语 易知,layout 文件夹下面存放的就是相关的布局文件。

打开文件夹就可以看见诸如 archivepagepost 等眼熟的单词,直觉中打开 page.pug 后,有以下文件内容

page.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
extends includes/layout.pug

block content
#page
if top_img === false
h1.page-title= page.title

case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
default
include includes/page/default-page.pug

if page.comments !== false && theme.comments && theme.comments.use
- var commentsJsLoad = true
!=partial('includes/third-party/comments/index', {}, {cache: true})

可以看到一些在初步配置 Butterfly 的眼熟的结构。page.type 似乎获得的就是 在 标签分类 中配置的 type

所以我可以在后面添加一行属于我的 type

1
2
3
4
5
6
7
8
9
10
11
case page.type
when 'tags'
include includes/page/tags.pug
when 'link'
include includes/page/flink.pug
when 'categories'
include includes/page/categories.pug
+ when 'lnpbqc'
+ include includes/page/lnpbqc.pug
default
include includes/page/default-page.pug

由此就在 hexo n page后在 Page Front-matter 中指定 typelnpbqc 即可。

这样,所有关于 type 是lnpbqc 的页面样式就是自定义的了。

实践

至于如何写样式,则需要通过 CSS和JS注入 + Pugjs 来完成。

本文的目的到此结束,剩下的就需要你自己去学习、去实践、去创造了。