万能图库

简介：用此方法建图库直接往文件夹放图片即可自动显示在网页中，不需要后续修改代码
优点：往文件夹直接放图就行，十分方便
缺点：部分图片可能无法完全显示

安装插件

在 Hexo 根目录执行：

1
npm install hexo-tag-autogallery --save

配置主题模板（Butterfly 适配）

在 themes/butterfly/layout/_partial/ 下新建 mygallery.ejs 模板文件，内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="gallery">
  <% if (photos.length){ %>
    <%
      photos.forEach(function(photo) {
        var path = config.root + photo;
    %>
      <a class="gallery-photo" style="background-image: url(<%-path%>);" href="<%-path %>"></a>
    <% }); %>
  <% } %>

  <!--
    If you use lightGallery, you can then simply use it by adding the following
  -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      lightGallery(document.querySelector('.post-gallery'));
    });
  </script>
</div>

若没有_partial文件夹则新建一个

配置css

修改css文件

在source/css/custom.css文件夹写入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 20px;
}

.gallery-photo {
  display: block;
  width: 100%;
  padding-top: 75%; /* 这个是关键！让图片有高度 */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  cursor: pointer;
}

若没有文件夹或文件则新建一个

引用css文件

修改_config.butterfly.yml文件的inject选项

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

在文章中使用

1
{% autogallery mygallery 图库/壁纸/images %}

其中’图库/壁纸/images’替换为图库文件夹地址

经典图库

简介：自动适应图片排列成合适的样子
优点：所有图片完全显示
缺点：图片放入文件夹后还有代码里添加图片路径

新建图库

1
hexo n page 图库名

在图库文件夹下新建images文件夹，把图片放images里

替换index.md文件内容

1
2
3
4
5
6
7
8
9
10
11
---
title: 图库名
date: 2026-04-11 17:29:49
type: gallery
---
{% gallery %}
![](./images/图片名.jpg)
![](./images/图片名.jpg)
![](./images/图片名.jpg)
···
{% endgallery %}

优化

修改_config.butterfly.yml文件的lightbox属性，可以点击图片放大预览

1
lightbox: medium_zoom

加密图库

安装加密插件

1
npm install --save hexo-blog-encrypt

修改Front-matter（最上方 — 之间）

1
2
3
4
5
6
7
8
9
---
title: 图库名
date: 2026-04-11 17:29:49
type: gallery
password: 88888888  # 你要的密码
message: "请输入密码查看私密壁纸"
wrong_pass_message: "密码错误，请重试"
indexing: false  # 禁止被搜索/归档抓到
---

图库引导页面

新建页面后替换为以下代码

1
2
3
4
5
6
7
8
9
10
11
---
title: 图库引导
date: 2026-04-11 17:19:52
type: gallery
---
<div class="gallery-group-main">
{% galleryGroup '图库名' '简介' '图库地址' 图片地址 %}
{% galleryGroup '图库名' '简介' '图库地址' 图片地址 %}
{% galleryGroup '图库名' '简介' '图库地址' 图片地址 %}
···
</div>