如何使用 Hexo 第三方主题 Butterfly

Hexo 是一个非常流行的静态博客框架，而 Butterfly 是其中一款非常受欢迎的主题，外观简洁、功能强大，适合用于个人博客。今天我们就来介绍如何在 Hexo 中安装并使用 Butterfly 主题。

环境准备

在安装 Butterfly 主题之前，你需要确保已经成功安装并运行 Hexo。具体安装方法可以参考我之前的文章：如何安装 Hexo 博客框架。如果你还没有安装 Hexo，请先完成这些步骤。

下载 Butterfly 主题
打开你的终端，进入 Hexo 的博客项目根目录，并执行以下命令来下载 Butterfly 主题：
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
配置 Hexo 使用 Butterfly 主题
修改 Hexo 配置文件 _config.yml，将 theme 设置为 butterfly：
theme: butterfly

Butterfly 主题依赖一些额外的插件和资源，你需要安装它们来使主题正常工作。

安装依赖
在 Hexo 博客根目录下，运行以下命令来安装所需的依赖：
npm install hexo-renderer-pug hexo-renderer-stylus --save
检查安装
安装完成后，你可以运行 Hexo 的本地服务器来预览效果：
hexo server
然后，在浏览器中访问 http://localhost:4000，你应该能够看到 Butterfly 主题的效果。

建议查看官方教学文档，以下只是列举常用的butterfly主题设置

Butterfly 主题提供了丰富的配置选项，你可以根据自己的需求进行自定义。配置文件位于 themes/butterfly/_config.yml，你可以在其中进行一些常见的设置，例如：

网站标题和描述：
在 themes/butterfly/_config.yml 中，找到 title 和 description，然后修改为你自己的内容：
title: 我的博客
description: 这是我的 Hexo 博客
主题颜色和样式：
Butterfly 主题支持自定义颜色、字体等设置。你可以在 _config.yml 中找到 palette 部分进行调整：
palette:
primary: "#4CAF50"
accent: "#FFC107"
开启文章目录（TOC）：
如果你希望在文章页面显示目录，可以在 _config.yml 中开启 TOC（目录）功能：
toc: true
社交媒体链接：
如果你希望展示社交媒体链接，可以在 _config.yml 中添加你的社交账号：
social:
GitHub: "https://github.com/你的用户名"
Twitter: "https://twitter.com/你的用户名"

Butterfly 主题还提供了许多强大的功能，例如自定义首页、博客文章样式、评论系统等。你可以根据需求逐步开启和配置：

自定义首页：
在 _config.yml 中设置 home 来配置自定义首页。
评论系统：
如果你希望开启评论功能，Butterfly 支持多种评论系统（如 Disqus、Gitter、Valine）。只需在 _config.yml 中配置相关项：
# 例如使用 Disqus 评论系统
disqus_shortname: "你的 Disqus 短名称"
支持 Markdown 配置：
你可以在 _config.yml 中调整 Markdown 渲染的配置，开启一些常见的功能（如代码高亮）：
markdown:
higlight:
enable: true

主题样式没有生效？
请确保你在 Hexo 项目根目录下执行 hexo clean && hexo g，然后再启动服务器。
如何修改主题布局？
Butterfly 主题的布局文件可以在 themes/butterfly/layout 文件夹中找到，你可以根据需要进行修改。

恭喜你完成了 Butterfly 主题的安装和配置！现在，你可以尽情地享受 Butterfly 主题带来的美观和便利，记录你的生活和思想。如果你遇到任何问题，欢迎随时留言，我们一起解决！

Happy blogging! 😊

更新於 2025-11-17