Hexo Butterfly 主题图库页面创建教程

前置说明

本博客基于 Hexo + Butterfly 主题构建，图库功能已集成在主题中，支持两种模式：

  1. 单页图库 - 用于展示一组图片
  2. 图库分组 - 多个分类图库的集合页面

1. 创建单页图库

单页图库适合展示一组相关图片，如一个相册。

在 source/ 目录下创建页面，例如 source/gallery/photos/index.md：

1
2
3
4
5
6
7
8
9
10
---
title: 摄影作品
date: 2026-05-20 12:00:00
aside: false
---
{% gallery %}
![风景1](/image/photos/scenery1.jpg)
![风景2](/image/photos/scenery2.jpg)
![风景3](/image/photos/scenery3.jpg)
{% endgallery %}

示例

[{"url":"/image/indexImage.png","alt":"风景1","title":""},{"url":"/image/gallery/background/background001.png","alt":"风景2","title":""},{"url":"/image/gallery/background/background002.png","alt":"风景3","title":""}]

2、创建图库分组页面

图库分组适合展示多个分类的图库预览，点击可进入对应的单页图库。

2.1 创建主图库页面

在 source/gallery/index.md（主图库页面）：

1
2
3
4
5
6
7
8
9
---
title: 图库
date: 2026-05-20 11:51:32
aside: false
---

<div class="gallery-group-main">
{% galleryGroup '壁纸' '小站的壁纸' '/gallery/background' '/image/indexImage.png' %}
</div>

示例

Group Image Gallery
壁纸

小站的壁纸

2.2 galleryGroup 参数说明

1
{% galleryGroup '标题' '描述' '链接' '封面图片' %}
参数 说明 示例
标题 分组显示名称 '壁纸'
描述 鼠标悬停显示 '小站的壁纸'
链接 点击跳转路径 '/gallery/background'
封面图片 分组预览图 '/image/indexImage.png'

2.3 创建子图库页面

每个分组需要对应的子页面，如 source/gallery/background/index.md：

1
2
3
4
5
6
7
8
9
---
title: 壁纸
date: 2026-05-20 11:55:20
aside: false
---
{% gallery %}
![壁纸1](/image/wallpaper/wallpaper1.jpg)
![壁纸2](/image/wallpaper/wallpaper2.jpg)
{% endgallery %}

3、配置导航菜单

确保 _config.butterfly.yml 中有图库菜单项：

1
2
3
4
5
6
menu:
   首页: / || fas fa-home
   图库: /gallery/ || fas fa-image
   分类: /categories/ || fas fa-th
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags

提示：图标使用 Font Awesome，需要确保主题配置中已加载 Font Awesome。

4、完整示例结构

1
2
3
4
5
6
7
8
9
10
11
12
13
source/
├── gallery/
│   ├── index.md              # 主图库页面（分组视图）
│   ├── background/
│   │   └── index.md          # 壁纸子页面
│   ├── photos/
│   │   └── index.md          # 摄影作品子页面
│   └── screenshots/
│       └── index.md          # 截图子页面
└── image/
    ├── wallpaper/            # 壁纸图片
    ├── photos/               # 摄影图片
    └── screenshots/          # 截图图片

5、图库页面属性说明

在 front-matter 中可设置：

1
2
3
4
5
---
title: 页面标题
date: 2026-05-20 12:00:00
aside: false        # 是否显示侧边栏
---
属性 说明 可选值
title 页面标题 字符串
date 创建日期 时间格式
aside 是否显示侧边栏 true / false