本文详细介绍如何配置 Hexo 博客框架和 Butterfly 主题，打造一个美观且功能强大的个人博客。

为什么选择 Hexo + Butterfly

Hexo 是一个快速、简洁且高效的静态博客框架，而 Butterfly 主题则是 Hexo 生态中最受欢迎的主题之一，具有以下特点：

  • 🎨 美观的界面设计：现代化的 UI 设计，支持多种配色方案
  • 🚀 丰富的功能：内置搜索、评论、分享等多种功能
  • 📱 响应式布局：完美适配各种设备
  • ⚡ 性能优化：支持 PJAX、懒加载等性能优化
  • 🔧 高度可定制：通过配置文件轻松自定义各种功能

安装步骤

1. 安装 Hexo

1
2
3
4
npm install -g hexo-cli
hexo init my-blog
cd my-blog
npm install

2. 安装 Butterfly 主题

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm install hexo-renderer-pug hexo-renderer-stylus --save

3. 基础配置

在 _config.yml 中设置主题：

1
theme: butterfly

主题配置详解

导航菜单配置

1
2
3
4
5
6
nav:
  menu:
    首页: / || fas fa-home
    归档: /archives/ || fas fa-archive
    标签: /tags/ || fas fa-tags
    分类: /categories/ || fas fa-folder-open

代码块配置

1
2
3
4
code_blocks:
  theme: ocean
  macStyle: true
  height_limit: 400

搜索功能

安装搜索插件：

1
npm install hexo-generator-searchdb --save

配置：

1
2
search:
  use: local_search

高级功能

PJAX 加速

1
2
pjax:
  enable: true

懒加载

1
2
lazyload:
  enable: true

背景动画

1
2
canvas_nest:
  enable: true

总结

通过合理配置 Hexo 和 Butterfly 主题，我们可以创建一个既美观又实用的个人博客。后续文章将继续介绍更多高级功能的使用方法。