🎨 更换主题

安装主题（以 Butterfly 为例）

1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

修改主配置文件 _config.yml：

1
theme: butterfly

_config.yml中的其他配置可以一并进行修改，可以把文件内容丢给AI让其帮忙解释

安装依赖（Butterfly 需要）

1
sudo npm install hexo-renderer-pug hexo-renderer-stylus --save

⚙️ butterfly主题设置（在 themes/butterfly/_config.yml 中完成）

导航栏设置

1
2
3
4
5
menu:
  首页: / || fas fa-home
  博客: /archives/ || fas fa-archive
  摄影: /photography/ || fas fa-camera
  关于我: /about/ || fas fa-user
  • 还要使用hexo new一并创建对应的页面文件夹：
1
hexo new page "页面名"

📌 会生成：source/页面名/index.md

站点图标 favicon

1
favicon: /img/favicon.png

把 favicon.png 放到butterfly的 source/img/ 目录下

头像与侧边栏

1
2
3
avatar:
  img: /img/avatar.jpg
  effect: true

社交图标展示

1
2
3
social:
  fab fa-github: https://github.com/example || GitHub || '#24292e'
  fab fa-bilibili: https://space.bilibili.com/example || B站 || '#fb7299'

首页展示设置

1
2
3
4
index_layout: 3           # 首页文章排布样式
index_post_content:
  method: 3
  length: 500             # 首页文章摘要字数

关于themes/butterfly/_config.yml中的其他配置，可以把文件内容直接丢给AI让其帮忙解释并修改

🔍站内搜索功能

安装搜索数据库插件：

1
sudo npm install hexo-generator-searchdb --save

修改 Hexo 主配置文件 _config.yml，添加搜索配置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

修改主题配置文件 themes/butterfly/_config.yml，启用本地搜索：

1
2
3
4
5
6
7
8
9
search:
  use: local_search             # 使用本地搜索
  placeholder: 搜索一下...      # 搜索框提示文字（你可以自定义）

  local_search:
    preload: true              # 页面加载时预先加载 search.xml
    top_n_per_article: 3       # 每篇文章最多显示 3 个匹配结果（-1 为不限制）
    unescape: true             # 解码 HTML 实体字符（比如 > 显示为 >）
    CDN:                      # 留空表示使用本地 js 文件（不建议设置）

现在就可以在页面右上角看到搜索图标 🔍，支持全文搜索博客内容。

参考

https://butterfly.js.org/