2025-06-23 01:07:00

Butterfly主题初探

安装Butterfly主题

（装模作样打开 _config.yml）

新建git bash终端进程然后 npm i hexo-theme-butterfly

应用Butterfly主题

theme项改为butterfly。

安装页面依赖包 npm install hexo-renderer-pug hexo-renderer-stylus --save

主题文件夹中的 _config.yml 复制到Hexo根目录里并重新命名为 _config.butterfly.yml 。
以后只需要在 _config.butterfly.yml 进行配置即可生效。
Hexo会自动合并主题中 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

删除原主题配置文件 _config.landscape.yml 。

VSCode终端配置

1
2
3
4
5
PS E:\Hexo-blog\0x9c5-blog> get-ExecutionPolicy
Restricted
PS E:\Hexo-blog\0x9c5-blog> set-ExecutionPolicy RemoteSigned 
PS E:\Hexo-blog\0x9c5-blog> get-ExecutionPolicy
RemoteSigned

解决了vscode不能在terminal执行程序脚本的问题。

清理并启动本地项目 （本地启动二连）hexo cl; hexo s

访问 http://localhost:4000/ 看到主题已成功加载力！

Page Front-matter List

项 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
kates 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和css
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)

添加标签页面

刚上来就出现了点小插曲 ￣へ￣ 因为换设备，这里的话直接 set-ExecutionPolicy RemoteSigned 会报错，解决方案是在系统PowerShell终端运行 Set-ExecutionPolicy -Scope CurrentUser 更改当前用户的执行策略,然后对 ExcecutionPolicy: 项填入 RemoteSigned ，然后输入Y。

关掉PowerShell回到vscode终端再执行get-ExecutionPolicy 这下对味了。

hexo new page tags 来添加一个标签页面，看到多了一个tags文件夹，其中index.md应该负责作为主页，在头部加上 type: "tags" 来声明页面类型。

添加友链页面

虽然感觉并不会有谁来互换友链（卑微.jpg），但是还是故技重施 hexo new page link 添加一个友情链接页面在,头部加上 type: "link" 来声明页面类型。

然后下创建文件结构 {ROOT}\source\_data\link.yml并按照如下结构配置友链：

1
2
3
4
5
6
7
8
- class_name: 分类名称
  class_desc: 分类描述
  link_list:
    - name: 名称
      link: 友链地址
      avatar: 显示头像（指向图片url）
      descr: 描述
      siteshot: 站点截图（指向图片url）

添加404页面

先放个主题内置的,在 http://localhost:4000/404.html 下预览，嗯…也是很简陋：

1
2
3
4
error_404:
  enable: true
  subtitle: 'Page Not Found'
  background: /img/error-page.png

2025-06-24 00:59:00

Butterfly主题基础配置1

网站基本资料设置

修改站点配置文件_config.yml

部分参数如下，详细参数可参考官方的配置描述。

参数 描述
title 网站标题
subtitle 描述
description 网站描述
keywords 网站的关键词。支持多个关键词
author 名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用电脑的时区（America/New_York, Japan, UTC ）一般的，对于中国大陆地区可以使用 Asia/Shanghai

默认语言是 en ，这里改为 zh-CN 避免浏览器自动弹出翻译选项

开始这个时区填错了导致后面一直在报错，好在很快也是排查出来了，怎么这么多坑 (╯▔皿▔)╯

导航栏配置

在 _config.butterfly.yml 中

1
2
3
4
5
6
7
8
9
10
menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  列表||fas fa-list||hide:
    音乐: /music/ || fas fa-music
    影片: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

然后 hexo new page music hexo new page movies hexo new page about 补全文件结构

代码块主题

有darker / pale night / light / ocean / false几个主题，这里先用默认light并打开mac风格

1
2
theme: light
macStyle: true

并把代码块高度限制height_limit设为240px

社交媒体链接

依照icon: link || the description || color格式添加了GitHub和扣扣邮箱

Butterfly支持font-awesome v6图标

b 颜色#00aeec

X 颜色#000000

本地搜索系统

npm install hexo-generator-search --save 安装依赖

在 _config.yml 末尾添加

1
2
3
4
5
# Local Search
## This generate structured data for all post type pages in the entire site and save it in /search.xml
  path: search.xml
  field: post
  content: true

在 _config.butterfly.yml 的search部分设为 use: local_search ,并设置 preload: true 打开预加载

试了一下竟然连post的具体内容都能搜到，以为只会创建H1~H6标题的数据呢

网站图标和头像

他默认是这么写的：

1
2
3
4
5
favicon: /img/favicon.ico

avatar:
  img: /img/avatar.png
  effect: false

结果是读不到img里新放的文件的，而且hexo三连之后会被直接清掉，而且讲道理这个相对路径也不对，但是hexo当初生成在里面的图片可以正常加载（甚至在img中将A/D/M直接commit也不影响他加载），目前只能在source下新建了 \asset 来存放图片.

后记：没在根目录里找到对应的 \img ，估计是要自己建立 \source\img 的结构就能正常读取，没有则其实是检索主题源码目录下的 \img ，猜测是类似的原理，但是感觉不如我 \source\asset 来的规范，反正目前性能还没拉跨到需要去优化掉那几张默认图片的程度…

「我们仍未知道🦋那天所加载的文件的位置。」

文章默认封面

先在wallhaven随便找了几张像素街景凑数 ε=ε=ε=┏(゜ロ゜;)┛

1
2
3
default_cover:
  - https://w.wallhaven.cc/full/lm/wallhaven-lm15jy.jpg
  - https://w.wallhaven.cc/full/j5/wallhaven-j5zmyw.jpg

post元信息

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
post_meta:
  # Home Page
  page:
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: relative
    categories: true
    tags: true
    label: true
  post:
    # Choose: left / center
    position: left
    # Choose: created / updated / both
    date_type: both
    # Choose: date / relative
    date_format: relative
    categories: true
    tags: true
    label: true

字数统计

安装： npm install hexo-wordcount --save

开启：修改主题配置文件 _config.butterfly.yml 中的 wordcount

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

Post Settings

默认 toc (Table of Contents) number: true 会给侧栏文章目录显示章节数，免自己格式化标题编号之劳形。

版权这里默认为 CC BY-NC-SA 4.0 ，没改，由于 Hexo 4.1 开始，默认对网址进行解码，以至于如果是中文网址会被解码，故设置 decode: true 来显示中文网址不然链接显示不简洁。如果有文章例如转载文章不需要显示版权，可以在文章 Front-matter 中单独设置。

1
2
3
4
5
6
post_copyright:
  enable: true
  decode: true
  author_href: https://www.0x9c5.top/
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

过期提醒设为两年前（730d）并修改提示语：

1
2
3
4
5
6
7
8
9
10
11
# Displays outdated notice for a post
noticeOutdate:
  enable: true
  # Style: simple / flat
  style: flat
  # When will it be shown
  limit_day: 730
  # Position: top / bottom
  position: top
  message_prev: 距本文最近一次更新已过去
  message_next: 天，文章内容可能过时

页脚改为 since: 2025 ，后面准备完善运行时长和技术栈徽标等信息。

主题色

暂未考究，这是默认的，至少并不难看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
theme_color:
  enable: true
  main: "#49B1F5"
  paginator: "#00c4b6"
  button_hover: "#FF7242"
  text_selection: "#00c4b6"
  link_color: "#99a9bf"
  meta_color: "#858585"
  hr_color: "#A4D8FA"
  code_foreground: "#F47466"
  code_background: "rgba(27, 31, 35, .05)"
  toc_color: "#00c4b6"
  blockquote_padding_color: "#49b1f5"
  blockquote_background_color: "#49b1f5"
  scrollbar_color: "#49b1f5"
  meta_theme_color_light: "ffffff"
  meta_theme_color_dark: "#0d0d0d"

这里的一个问题是黑夜模式下的配色会导致信息卡片里黑X的图标几乎不可见： meta_theme_color_dark 默认为 HEX(#0d0d0d) ↔ RGB(15,15,15)

背景图设置

Image Settings 又是从临时从wallhaven上捞了一张 background: url(https://w.wallhaven.cc/full/gp/wallhaven-gp17xe.jpg) ，此项整个网站的底图而不是首先映入眼帘的class=”full_page”遮罩

标题前图标

给.md的H1~H6标题前多渲染一个图标，默认’\f0c1’的🔗图标就还不错。

1
2
3
4
5
6
7
8
beautify:
  enable: true
  # Specify the field to beautify (site or post)
  field: post
  # Specify the icon to be used as a prefix for the title, such as '\f0c1'
  title_prefix_icon: '\f0c1'
  # Specify the color of the title prefix icon, such as '#F47466'
  title_prefix_icon_color: '#F47466'

2025-06-25 00:24:00

Butterfly主题基础配置2

鼠标点击效果

这里开启了鼠标点击后冒出爱心特效。

1
2
3
4
# Mouse click effects: Heart symbol
click_heart:
  enable: true
  mobile: false

自定义字体及其大小

全局字体设为LXGW WenKai / 霞鹜文楷的分支LXGW WenKai Screen / 霞鹜文楷屏幕阅读版。

1
2
3
4
5
font:
  global_font_size: 16px
  code_font_size: 15px
  font_family: LXGW WenKai Screen, -apple-system, serif, BlinkMacSystemFont, Lato, Roboto, sans-serif
  code_font_family: consolas, Menlo, sans-serif

倒腾了一会，目前这里采用七牛云的公共cdn。

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.7.0/style.css" media="print" onload="this.media='all'">

该公共cdn有也海外节点，但是不知道能活多久，加载略慢。jsDelivr也提供cdn <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css" /> ，至于woff格式/字体裁剪/对象存储的方案… X﹏X

加载是真的慢，清除浏览器缓存，初加载有感觉一半的读条时间都在加载字体，为了极致的加载效率一般是不推荐加载任何第三方中文字体呢…どうしようかな——（目移）

分割线图标

1
2
3
4
5
6
# The setting of divider icon
hr_icon:
  enable: true
  # The unicode value of Font Awesome icon, such as '\3423'
  icon: '\f818' # the Unicode of "fa-solid fa-pizza-slice" icon
  icon_top:

这个默认的图标移动动画会因为鼠标位置鬼畜，为了简洁还是关闭了。

着陆页面一言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# The subtitle on homepage
subtitle:
  enable: true
  # Typewriter Effect
  effect: true
  # Customize typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # false - disable the function
  # 1 - hitokoto.cn
  # 2 - https://api.aa1.cn/doc/yiyan.html
  # 3 - jinrishici.com
  source: 1
  sub:

source设为false 然后按照如下格式则遍历sub中的一言。

1
2
3
sub:
  - '逸一时，误一世。'
  - '逸久逸久罢逸龄。'

简繁体字切换

照顾一下可能的繁体字使用者（？）毕竟主题作者使用繁体字，于是这个功能直接内置了，不用白不用。

1
2
3
4
5
6
7
8
# Conversion between Traditional and Simplified Chinese
translate:
  enable: true
  default: 繁
  defaultEncoding: 2
  translateDelay: 0
  msgToTraditionalChinese: '繁'
  msgToSimplifiedChinese: '简'

侧边栏简化

侧边栏的 card_recent_post card_categories card_tags card_archives 均设为false。先猛做一波减法，后面感觉需要展示哪方面信息再加回来便是。

提示消息弹窗

默认左下角。

1
2
3
4
5
6
snackbar:
  enable: true
  position: bottom-left
  # The background color of Toast Notification in light mode and dark mode
  bg_light: '#49b1f5'
  bg_dark: '#1f1f1f'

打开预加载

1
instantpage: true

打开Lazyload

原版懒加载并设置模糊效果。

1
2
3
4
5
lazyload:
  enable: ture
  field: site
  placeholder:
  blur: true

更改命名格式

_config.yml 中修改为 new_post_name: :year-:month-:day-:title.md

这样使用 hexo new post {Title} 命令生成的文章，文件名会自带日期。

主页封面设置

或许一图流更好。

1
2
# The banner image of index page (home page)
index_img: https://w.wallhaven.cc/full/lm/wallhaven-lm15jy.jpg

wallhaven国内访问很慢，而且链接是原图，这里尝试了个tinify对背景图片压缩，原理是通过quantization对图片中相似的颜色进行合并，可以将24位PNG文件转换成更小的8位索引颜色图像，而且所有不必要的元数据也被丢弃，这样来减少带宽和加载时间。

这里我随便选的背景图从频域上看几乎都是低频分量(低频信号)。蓝天这种亮度或者灰度值变化缓慢的区域，也就是图像中大片平坦的区域，描述了图像的主要部分，因此在tinify压缩后文件大小甚至能几乎肉眼无损地把文件大小 -90%，大小在多在150kb左右。

于是乎对目前的背景图都做了这样的一个压缩处理之后放到 \asset\img\ 中，大大提高了图片加载速度，如果给文件cdn加速的话或许可以更快，挖坑ing…

后记：要不要采用.webp或.avif格式尝试进一步压缩？

顶部加载进度条

Loading Animation将preloader的方式设为2（即PACE）（它自带的full_page动画挺帅的但是不知道在哪里改配色）

inject大类 bottom: 中加入官方给的cdn，jsDelivr国内虽慢，先凑活着吧…

1
2
bottom:
  - <script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>

然后下载想要的样式.css放到本地/css中，这里选了minimal.css即极简，简到不注意都看不到顶上这个纤细的加载条，后面考虑改一下css提升一下这个读条的存在感XD