【Hexo】Butterfly主题配置及美化

最新推荐文章于 2025-10-31 05:20:34 发布

原创

最新推荐文章于 2025-10-31 05:20:34 发布 · 2.7k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

Butterfly主题介绍

官方文档：Hexo Butterfly 主题官方文档

GitHub 仓库：Hexo Butterfly 主题 GitHub 仓库

Hexo官网上面有非常多好看的主题，你可以选择自己喜欢的主题下载下来放到 themes文件夹下面

比较好看的主题有 Butterfly、Fluid、Matery、Kira 、Ayer 、Annie 。

Hexo Butterfly 主题是一个基于 Hexo 博客框架的优雅、简洁且功能丰富的主题。它受到了 Butterfly 主题的启发，提供了许多现代化的设计和功能，使得博客搭建和维护变得更加便捷和美观。以下是 Hexo Butterfly 主题的一些主要特点：

美观的设计：Hexo Butterfly 主题采用了现代化的设计风格，提供了多种配色方案和布局选项，可以根据个人喜好进行定制。
响应式设计：主题支持响应式设计，可以在不同设备上（如桌面、平板和手机）提供良好的阅读体验。
丰富的插件支持：Hexo Butterfly 主题集成了许多实用的插件，如搜索功能、评论系统、标签云、归档页面等，方便用户快速搭建功能齐全的博客。
SEO 优化：主题内置了 SEO 优化功能，可以帮助博客在搜索引擎中获得更好的排名。
多语言支持：Hexo Butterfly 主题支持多语言，可以根据需要切换不同的语言显示。
自定义配置：主题提供了丰富的配置选项，用户可以通过修改配置文件来调整主题的外观和功能。
社区支持：Hexo Butterfly 主题拥有活跃的社区支持，用户可以在社区中获取帮助、分享经验和交流技巧。

基础配置

首先点击官方下载地址下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以使用 git clone 命令来下载，例如下载Butterfly主题

$ cd blog
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

然后修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: butterfly

按照官方建议，为了减少升级主题后带来的不便，可以将主题配置复制到与主配置同级目录内

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。( 注意: 复制的是主题的 _config.yml ，而不是 hexo 的 _config.yml)

注意：不要把主题目录的 _config.yml 删掉

注意：以后只需要在 _config.butterfly.yml 进行配置就行。
如果使用了 _config.butterfly.yml，配置主题的 _config.yml 将不会有效果。

Hexo会自动合併主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

网站背景

可以是网络地址，也可以是文件相对路径

# The banner image of home page
index_img: /img/bg.jpg

一般情况下，source目录为资源文件根目录

效果如下

头像

修改 主题配置文件

avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

网站图标

favicon: /img/favicon.ico

导航栏设置

nav:
  logo: /img/avatar.png # image
  display_title: true
  fixed: false # fixed navigation bar

menu:
   首页: / || fas fa-home
   主页: https://www.shiguang666.eu.org/ || fas fa-id-card
   文章||fas fa-book:
      分类: /categories/ || fas fa-folder-open
      标签: /tags/ || fas fa-tags
      归档: /archives/ || fas fa-archive
  #  导航: /navigate/ || fas fa-paper-plane
   导航||fas fa-paper-plane:
      站内: /navigate/ || fas fa-sign-in
      站外: https://nav.shiguang666.eu.org/ || fas fa-sign-out
   实验室||fa-solid fa-flask:
      每日早报: /news || fa fa-calendar
      站点监控: https://kuma.shiguangdev.cn/dashboard || fa fa-check-circle
      Hexo管理面板: https