前言

本篇记录自己在使用butterfly主题对博客进行美化的全过程、技巧,Hexo所有的主题基本都配置了详细的基础教程,假如有相关经验的话,相信是可以很快入手的。当然我这样的小白必然会对其中一些配置方法和细节摸不着头脑,本章会记录我自己在使用Butterfly安装文档中遇到的问题,以及拓展的内容,基础操作不做描述。

魔改内容参考进阶篇

1. Git/npm安装区别

安装目录不同:git方式,butterfly主题安装在themes文件夹中;npm方式,主题安装在node_modules

后续作用不同:npm安装方式方便于后续的“自动化配置“,参考这个视频。不过我还没有尝试这个。

2. Page/Post Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域,用于指定个别档案的变数。

  • Page Front-matter 用于主页文章卡片配置
  • Post Front-matter 用于文章页配置

其实就是在每篇博文的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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Page Front-matter:

---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---


Post Front-matter:

---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
---

各字段含义见网页

3. 添加新页面

例如要生成新页面XXXX,步骤如下:

  • 前往你的 Hexo 博客的根目录

  • 输入 hexo new page XXXX

  • 在source文件夹中会新生成XXXX的对应文件夹,打开里面的index.md

  • 修改这个文件:在最后一行添加 type: "XXXX",另外可以修改这个子页面的title名称

  • 在butterfly主题配置文件_config.butterfly中将这个子页面添加到导航菜单中,类似于:

    1
    2
    3
    4
    5
    6
    7
    8
    menu:
    首页: / || fas fa-home
    归档||fas fa-list||hide:
    时间轴: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open
    友链: /link/ || fas fa-link
    关于: /about/ || fas fa-heart
  • 在index.md中添加"top_img: YYYY.jpg",即可自定义它的顶部图像

    比在_config.butterfly.yml中定义要方便,另外注意图片格式

4. 图标库

Butterfly支持 font-awesome v6图标。

5. 图片配置技巧

对于页面顶部图的配置,除了支持用url链接外,也可以在source文件夹下新建img文件夹,将图片存储在这里面,调用格式为"./img/XXXX.jpg",加载速度会快一些。

注意不要在主题文件夹下的source/img文件夹中存储图片,例如./themes/butterfly/source/img,会因为主题的更新导致图片文件的覆盖丢失。

6. 本地搜索功能

我的博客启用的是“本地搜索”,安装该功能前先运行hexo clean

需要安装 hexo-generator-search,根据它的文档去做相应配置。

1
npm install hexo-generator-search --save

然后在主题配置文件_config.butterfly.yml里,启用本地搜索功能:

1
2
3
4
5
6
# Local search
local_search:
enable: true
preload: true
CDN:

  • enable:是否开启本地搜索
  • preload:预加载
    • 开启后,进入网页后会自动加载搜索文件;
    • 关闭时,只有点击搜索按钮后,才会加载搜索文件
  • CDN:搜索文件的 CDN 地址(默认使用的本地链接)

然后重新生成页面即可查看更改。

其实如果没有其它的需要的话,到这里就可以了,默认配置就已经足够用了。

也可以在hexo根目录配置文件_config.yml中添加配置:

1
2
3
4
5
search:
path: search.xml
field: post
content: true
# 建议不要写入命令template: ./search.xml,实测会报错
  • path:生成的搜索文件的路径,默认是 search.xml,也可以使用 json 格式,改为 search.json
  • field:搜索的范围,默认是 post,即只搜索发布的文章,也可以改为 page(搜索页面,即 page 类型的页面,不含发布的导航)或者 all(搜索全部)
  • content:指是否搜索文章的内容,默认为 true,如果改为 false 的话则只搜索标题、说明等头部内容,不搜索文章的正文
  • template(可选):自定义 XML 模板的路径

若可以正常搜索,但无法正常跳转,参考这篇文章

7. 分割线图标替换

将图标更换为“太空飞船”。

修改butterfly主题配置文件_config.butterfly.yml

1
2
3
4
hr_icon:
enable: true
icon: '\f197' # the unicode value of Font Awesome icon
icon-top: -10px
  • icon-top常用数值:

    -20px:图标位于分割线上方

    -10px:图标位于分割线中间

    0px:图标位于分割线下方