Hexo Butterfly主题配置指南

详细配置请参考官方文档：Butterfly官方文档

一、主题安装

1.1 通过npm安装（推荐）

npm install hexo-theme-butterfly

1.2 通过Git克隆

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

1.3 启用主题

修改Hexo根目录的_config.yml：

theme: butterfly

二、基础配置

2.1 网站图标配置

favicon:
  small: /img/favicon-16x16.png
  medium: /img/favicon-32x32.png
  apple_touch_icon: /img/apple-touch-icon.png
  safari_pinned_tab: /img/logo.svg

2.2 侧边栏设置

aside:
  enable: true
  avatar:
    img: /img/avatar.png
    round: true # 圆形头像
  name: "技术博主"
  description: "热爱技术，乐于分享"

2.3 导航菜单配置

menu:
  首页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  关于: /about/ || fas fa-user

三、页面功能配置

3.1 文章页设置

post:
  reward:
    enable: true
    wechatpay: /img/wechatpay.png
    alipay: /img/alipay.png
  copyright: true # 显示文章版权声明
  meta:
    date_type: created # 显示创建日期

3.2 代码高亮配置

highlight_theme: mac # 可选值：default/darker/pale night/light/mac/mac light
prismjs:
  enable: true
  preprocess: true
  line_number: true

四、插件集成

4.1 评论系统配置

Gitalk示例：

gitalk:
  enable: true
  clientID: GitHub Application Client ID
  clientSecret: GitHub Application Client Secret
  repo: 仓库名称
  owner: GitHub用户名
  admin: [GitHub用户名]

Valine示例：

valine:
  enable: true
  appId: # LeanCloud App ID
  appKey: # LeanCloud App Key

4.2 站点统计配置

# 百度统计
baidu_analytics: your_id

# 谷歌分析
google_analytics: UA-XXXXX-X

五、高级功能设置

5.1 页面动画效果

motion:
  enable: true
  async: false
  transition:
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn

5.2 图片懒加载

lazyload:
  enable: true
  loadingImg: /img/loading.gif

六、主题样式自定义

6.1 自定义CSS

创建source/_data/stylesheet.styl：

// 修改链接颜色
a {
  color: #2bbc8a;
  &:hover {
    color: #d480aa;
  }
}

// 调整文章间距
.post-block {
  margin: 60px 0;
}

6.2 自定义JavaScript

创建source/_data/javascript.ejs：

// 添加页面点击特效
document.addEventListener('click', function(e) {
  const clickEle = document.createElement('div');
  clickEle.className = 'click-effect';
  // ...自定义点击特效代码...
});

七、CDN加速配置

vendors:
  css:
    fontawesome: https://cdn.example.com/font-awesome/5.15.4/css/all.min.css
  js:
    jquery: https://cdn.example.com/jquery/3.6.0/jquery.min.js

八、部署与更新

8.1 生成静态文件

hexo clean && hexo g

8.2 主题更新方法

cd themes/butterfly
git pull

九、常见问题解决

  1. 样式不生效问题

    • 检查是否执行hexo clean
    • 确认CSS文件路径正确
    • 检查浏览器缓存

  2. 评论系统无法加载

    • 检查AppID/AppKey是否正确
    • 确认域名已加入白名单
    • 检查网络连接

  3. 图片显示异常

    • 检查图片路径是否正确
    • 确认图片格式支持（建议使用WebP格式）
    • 检查文件权限设置

更多详细配置请参考官方文档：Butterfly官方文档