参考

导航栏

刚开始新建博客的时候我发现主页太简洁了，原来是配置文件把导航栏都给注释起来了，把./themes/butterfly/_config.yml文件中的：

1
2
3
4
5
6
7
8
9
10
menu:
  # Home: / || fas fa-home
  # Archives: /archives/ || fas fa-archive
  # Tags: /tags/ || fas fa-tags
  # Categories: /categories/ || fas fa-folder-open
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  # Link: /link/ || fas fa-link
  # About: /about/ || fas fa-heart

更改为：

1
2
3
4
5
6
7
8
9
10
11
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  列表||fas fa-list:
    音乐: /music/ || fas fa-music
    电影: /movies/ || fas fa-video
  留言板: /contact/ || fas fa-comment-dots
  链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

归档: /archives/ || fas fa-archive中

  • 归档：是导航栏上显示的名称。
  • /archives/：是当前栏目的网址相对路径。
  • fas：图标集，应该是font-awesome，可以去网站查对应图标的名称，pro版本的不能用。
  • fa-archive：图标名称。

图片嵌入

在之前，需要进行下面的配置：

1
hexo new page "img"

这是为了在source下生成一个img文件夹（你自己手动去生成文件夹是不行的，经过hexo clean之后就没了），官方文档不推荐把这些图片什么的文件放在主题的source的文件夹下，因为有可能主题更新之后文件会丢失，那就比较恼火了。

将你的主页封面图、个人头像、文章图放在这个文件夹里面，后续在引用的时候只需要写上/img/图片名称就可以了。

主页封面图

比如名叫cover.jpg。

打开主题的配置文件_config.yml，设置这一项为：

1
2
# The banner image of home page
index_img: /img/cover.jpg

下面的图片嵌入都可以这么做。

其他类别封面图

假如图片名叫other.jpg，放到对应文件夹。

1
2
# If the banner of page not setting, it will show the top_img
default_top_img: /img/other.jpg

文章图

头像

假如图片名叫avatar.jpg，放到对应文件夹。

1
2
3
avatar:
  img: /img/avatar.jpg
  effect: false  # true头像会一直转圈

网站图标

假如图片名叫favicon_my.png，放到对应文件夹。

1
favicon: /img/favicon_my.png

页脚

设置主题配置文件：

1
footer_bg: true

代码高亮

在./themes/butterfly/_config.yml主题的配置文件中，更改：

1
highlight_theme: light

为：

1
highlight_theme: mac light

除了这些主题之外，还有darker / pale night / light / ocean / mac / mac light主题。

数学公式

对于Latex公式不熟练的百度一下latex公式快速入门看一下基本的语法就能应付常见的公式，需要其他公式的时候再去查。

ButterFly主题不支持Latex，而是支持Katex。官方给了示例，我试了一下发现有问题，会重复显示一次公式，参考Hexo + Butterfly 建站指南（八）使用 KaTeX 数学公式做了一下：

1
2
3
4
5
# 卸载这个库
npm un hexo-renderer-marked --save

# 安装katex
npm i hexo-renderer-markdown-it-katex

然后再打开hexo的配置文件_config.yml，向里面添加内容：

1
2
3
4
5
6
7
8
9
10
11
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
  plugins:
  anchors:
    level: 1
    collisionSuffix: ''

清空缓存然后测试一下：

1
2
hexo clean
hexo s

数学公式在Markdown编辑器Typora中的写法是用一对$把Latex公式框进去就是行内公式（短的公式用这个），用一对$$把Latex公式框进去行间公式（长公式用这个），比如我写$\theta$显示为θ\theta，我写：

1
2
3
$$
f(x) = \frac{1}{\sqrt{2 \pi}\sigma} exp( - \frac{(x - \mu)^2}{2\sigma^2} )
$$

显示为：

f(x)=12πσexp(−(x−μ)22σ2)f(x) = \frac{1}{\sqrt{2 \pi}\sigma} exp( - \frac{(x - \mu)^2}{2\sigma^2} )

为了保证公式能被解析，最好在你需要显示数学公式的文章markdown开头添加上：

1
mathjax: true

副标题

打开主题配置文件./themes/butterfly/_config.yml，找到subtitle，设置为下面的样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # Customize typed.js (配置typed.js)
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  typeSpeed: 100 # 打字速度
  backSpeed: 10  # 回退速度
  startDelay: 300 # 打字的延时
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） https://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - xxxxx

把里面xxxxx更改为你想要说的话。

页面美化

butterfly内置的页面的美化，打开主题的配置文件，将下面的项更改：

1
2
3
# Beautify (美化頁面顯示)
beautify:
  enable: true

自定义颜色

字数统计

安装字体统计库

1
npm install hexo-wordcount --save

修改主题的配置：

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

进阶功能

文字高亮

在写markdown的时候，对你想要强调的文字除了加粗之外，buffterfly主题还提供了文字高亮的模板语法，比如你写到：

1
我今天非常高兴！

假如想要强调高兴这两个字可以这么写：

1
我今天非常{% label "高兴" green %}！

我今天非常高兴 ！

后面的green表示高亮的背景色，你也可以用其他的，比如purple 、red 、blue 、orange 、pink 等等。

时间轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 2024-04, pink %}

<!-- timeline 2024-04-06  -->
天气不错，适合出去约妹！
<!-- endtimeline -->

<!-- timeline 2024-04-07 -->
算了吧！这天气非常适合打Dota！
<!-- endtimeline -->

<!-- timeline 2024-04-08 -->
又要上班！！
<!-- endtimeline -->

{% endtimeline %}

2024-04

2024-04-06

天气不错，适合出去约妹！

2024-04-07

算了吧！这天气非常适合打Dota！

2024-04-08

又要上班！！

提示框

Markdown语法中没有这个功能，需要引入模板实现，下面是代码：

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
{% note simple %}
默认 提示块标签
{% endnote %}

{% note default simple %}
default 提示块标签
{% endnote %}

{% note primary simple %}
primary 提示块标签
{% endnote %}

{% note success simple %}
success 提示块标签
{% endnote %}

{% note info simple %}
info 提示块标签
{% endnote %}

{% note warning simple %}
warning 提示块标签
{% endnote %}

{% note danger simple %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note modern %}
默认 提示块标签
{% endnote %}

{% note default modern %}
default 提示块标签
{% endnote %}

{% note primary modern %}
primary 提示块标签
{% endnote %}

{% note success modern %}
success 提示块标签
{% endnote %}

{% note info modern %}
info 提示块标签
{% endnote %}

{% note warning modern %}
warning 提示块标签
{% endnote %}

{% note danger modern %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note flat %}
默认 提示块标签
{% endnote %}

{% note default flat %}
default 提示块标签
{% endnote %}

{% note primary flat %}
primary 提示块标签
{% endnote %}

{% note success flat %}
success 提示块标签
{% endnote %}

{% note info flat %}
info 提示块标签
{% endnote %}

{% note warning flat %}
warning 提示块标签
{% endnote %}

{% note danger flat %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note disable %}
默认 提示块标签
{% endnote %}

{% note default disable %}
default 提示块标签
{% endnote %}

{% note primary disable %}
primary 提示块标签
{% endnote %}

{% note success disable %}
success 提示块标签
{% endnote %}

{% note info disable %}
info 提示块标签
{% endnote %}

{% note warning disable %}
warning 提示块标签
{% endnote %}

{% note danger disable %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

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
{% note no-icon %}
默认 提示块标签
{% endnote %}

{% note default no-icon %}
default 提示块标签
{% endnote %}

{% note primary no-icon %}
primary 提示块标签
{% endnote %}

{% note success no-icon %}
success 提示块标签
{% endnote %}

{% note info no-icon %}
info 提示块标签
{% endnote %}

{% note warning no-icon %}
warning 提示块标签
{% endnote %}

{% note danger no-icon %}
danger 提示块标签
{% endnote %}

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

提示框内可以写markdown语法。

也可以自定义图标：

1
2
3
4
5
6
7
{% note red 'fas fa-bullhorn' modern %}
**公告公告**

老李家的狗子🐕下崽了，哎呀我最看不得那一个个可爱的毛茸茸的小家伙。

老张家的猫儿🐱跑出去撒野了，大家管好自家的猫！
{% endnote %}

公告公告

老李家的狗子🐕下崽了，哎呀我最看不得那一个个可爱的毛茸茸的小家伙。

老张家的猫儿🐱又跑出去撒野了，大家管好自家的猫！

这里的fas图标可以去font-awesome找找。颜色也可以调整。

分栏标签

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab 第二个Tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 第三个Tab @fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

折叠框

1
2
3
{% hideToggle 折叠的标签,orange,white %}
这里面可以放内容
{% endhideToggle %}
折叠的标签

这里面可以放内容

一图流背景

Butterfly主题 一图流背景与顶部图修改，比较麻烦先留一个链接。

参考

无序列表失效：Hexo-Butterfly主题博客搭建记录

本人自用 Hexo-Butterfly 主题参考手册

小康的 butterfly 主题使用文档

Hexo博客美化

关于我 Butterfly 主题的所有美化

Butterfly美化：今日诗词侧边栏小组件