前言

本站采用 Butterfly 主题，也只支持 Butterfly 主题的美化教程，没看过官方文档的建议先阅读官方文档的内容。

🔗 引用站外地址，请注意甄别
Butterfly 文档(一) 快速开始
Butterfly

高频目录

本站有部分高频文件目录地址，注意进行区分。

高频目录包括：

  • 博客根目录 [blogRoot]
  • 主题文件夹 [blogRoot]\themes\Butterfly
  • 站点配置文件 [blogRoot]\_config.yml 或 _config.yml
  • 主题配置文件 [blogRoot]\_config.butterfly.yml 或 _config.butterfly.yml

DIFF 语言

本站有时会用到 DIFF 语言，其中需要修改的部分只有前面有加号和减号的内容

1
2
3
4
5
6
7
8
...
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
+@import '_custom/*.css'
// search
-@import '_search/index'
...

例如上述代码，前面带有加号的 @import '_custom/*.css' 是你需要添加的内容，前面带有减号的 @import '_search/index' 是你需要删除的内容。

本站中的 DIFF 代码中需要添加的内容直接删掉加号就是正确的缩进。

引入自定义js和css文件

提示

本站如出现 新增xxx.css 或者 新增xxx.js 如果没有特殊说明，就是让你放在你本地的引入 css 和 js 的文件夹里，并且在主题配置文件 _config.butterfly.yml 中进行的 inject 引入。

想要魔改和美化博客，添加自定义文件是不可避免的。下面来详细说一下 css 和 js 文件的创建和引入，其他文件同理。

在博客根目录下的 source 文件夹中创建文件夹，我个人的目录如下

1
2
3
4
5
6
7
8
9
10
11
source/
├── static/
│       ├── css/
│       │      └── style.css
│       ├── js/
│       │      └── script.js
│       └── img/
│                └── background.png
├── _posts/
└── ...

之所以额外添加了 static 是为了方便管理，因为后续会添加很多的 page 页面，都在 source 目录下的话会显得很乱。

一般地，在 主题配置文件 _config.butterfly.yml 中的 inject 引入自定义的 css 和 js 文件。

  • css 文件一般在 head 引入
  • js 文件一般在 bottom 引入（特殊情况除外）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/static/css/style.css?1">
    # 静态文件后面加个 ?任意内容 可以在每次更新之后让用户自动重新请求
    # 例如添加 ?1，在修改此文件后改成 ?2，用户访问时不会使用本地缓存，而是请求新的内容
    # 说人话就是有的时候要ctrl+F5才能正常显示内容，这么写不用刷新缓存也能正常显示
  bottom:
    # 自定义js
    - <script src="/static/js/script.js?1"></script>
    # 引入多个文件就直接往下复制一行改一下文件名即可，如下：
    - <script src="/static/js/script1.js?1"></script>
    - <script src="/static/js/script2.js?1"></script>
    #特殊的，可以加上类似于data-pjax的标签
    - <script data-pjax src="/static/js/script3.js?1"></script>
注意

路径最前面是斜杠 /xx/xxx.js，而不是点斜杠 ./xx/xxx.js

路径要替换成结合实际情况进行替换，不要直接照抄

特殊的，可以在 [blogRoot]\themes\Butterfly\source\css 中新建 _custom 文件夹，将 css代码直接放在 _custom 中，然后在 [blogRoot]\themes\Butterfly\source\css 中的 index.styl 写入如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if hexo-config('css_prefix')
  @import 'nib'

@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
+@import '_custom/*'

// search
@import '_search/index'

注意

使用这种方法批量引入虽然便捷整齐，但并不方便管理，而且部分 css 代码不支持这么引入，只能采取普通的主题配置文件 inject 引入的方式，所以一般而言不推荐这种引入方式。本站中也不会采取这种方式进行引入。

全局变量参考

color.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
:root {
  --theme-color-blue: rgb(160, 205, 220);
  --theme-color-green: rgb(155, 218, 205);
  --theme-color: var(--theme-color-green);
  --theme-color2: var(--theme-color-blue);
  --scrollbar-background: #e6f4f6;
  --border-hover:#409eff;
  --border-color: rgba(0, 30, 50, 0.3);
  --nav-color: rgba(160, 205, 220, 0.75);
  --nav-color-shi: rgb(160, 205, 220);
  --text-color: #4c4948;
  --button-color: #00C4B6;
  --button-hover-color: #0F7D7F;
  --button-light-color: var(--button-color);
  --button-dark-color: var(--button-hover-color);
}
:root[data-theme="dark"] {
  --theme-color-blue: rgb(50, 80, 110);
  --theme-color-green: rgb(40, 70, 80);
  --theme-color: var(--theme-color-blue);
  --theme-color2: var(--theme-color-green);
  --scrollbar-background: #1c2833;
  --border-hover:#6699cb;
  --border-color: rgb(255, 255, 255, 0.2);
  --nav-color: rgba(50, 80, 110, 0.75);
  --nav-color-shi: rgb(50, 80, 110);
  --text-color: #FFFFFFB3;
  --button-color: #2E4964;
  --button-hover-color: #446484;
  --button-light-color: var(--button-hover-color);
  --button-dark-color: var(--button-color);
}

个人经验杂谈

  • 善用豆包以及类似的软件，可以直接当成一个搜索引擎用
  • 最好还是学习一下 css，当然如果你不想学的话美化着美化着也就会了
  • 遇见 bug 可以二分，我的意思是说二分引入的 css 和 js 文件，快速定位需要修改的文件的文职
  • 可以塞给豆包一堆 html 代码然后让他去写 css 代码，这样效率比直接让他写 css 代码高得多
  • 豆包如果没有 “搜索XXX个关键词，参考XXX篇资料”的资料，内容有高概率是自己杜撰的，注意自己辨析
  • 美化的时候如果插件出问题可以优先看相关的 github 的 issue，说不定有意外的收获
  • …