hexo-Butterfly主题添加图库页

¶创建页面

图库页面只是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行

第一步：执行如下命令

hexo new page gallery

这样就会在博客的根目录下的/source下生成/gallery/index.md文件，gallery可以自定义你自己喜欢的单词！

第二步：在index.md文件的 Front-matter 中添加aside、comments，就可以不展示侧边栏和评论区

第三步：在主题配置文件_config.butterfly.yml的menu中设置图库路径

这样就可以在首页菜单栏进入相册收首页

¶设置图库集合页

图库集合页面就是普通的页面，比如上面创建的/gallery/index.md页面，下面将其设置成一个图库集合页面！设置图库集合页面是使用外挂标签来实现的，书写格式如下：

<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

galleryGroup中的设置内容如下：

• name：图库名字
• description：图库描述
• link：链接到对应的相册地址 （子页面）
• img-url：图库封面的地址（可以是本地地址，也可以是网络地址）

示例：

<div class="gallery-group-main">
{% galleryGroup '壁纸' '收藏的一些壁纸' '/gallery/wallpaper' /img/bg.jpg %}
</div>

效果如下：

¶设置图库子页面

此时，点击任何一个图集，都会重定向到 404 页！这是因为我们还没有创建相应的子页面！这里我以《壁纸》这个相册为例来创建它的子页面！子页面也是普通的页面，你只需要 hexo n page xxxxx 创建你的页面就行

第一步：执行如下命令

hexo new page wallpapal

然后会在博客的根目录下的/source目录下生成名为wallpaper的文件夹，里面有一个名为index.md的文件，这个文件就是对应《壁纸》的子页面

第二步：将wallpaper文件夹移动到gallery文件中

第三步：打开wallpaper/index.md文件，可在Front-matter 中添加aside、comments用来不显示侧边栏和评论区，接下来就使用标签外挂上自己的照片，写法如下：

{% gallery %}
markdown图片语法
{% endgallery %}

示例：

{% gallery %}
![](https://s3.mycloudhub.top/img/bg.jpg)
![avatar.png](https://img.picui.cn/free/2025/03/25/67e2544734e26.png)
{% endgallery %}

至此图库就设置完成了

¶进阶

如果想子页面下再分类，我们可以继续使用galleryGroup,例如在壁纸的子页面下显示4K壁纸的分类；

新建普通页面名为4k:

hexo new page 4k

在博客根目录下的/sourrce找到新建的4k文件夹，然后整个移动到/gallery/wallpaper下。

修改wallpaper/index.md文件，修改为下面内容：

将原来的标签外挂gallery改为galleryGroup

<div class="gallery-group-main">
{% galleryGroup '4K壁纸' '用过的4K壁纸' '/gallery/wallpaper/4K' /img/bg.jpg %}
</div>

然后在wallpaper/4k/index.md下设置是否开启侧边栏和评论区

再添加上外挂标签

{% gallery %}
![](https://s3.mycloudhub.top/img/bg.jpg)
![avatar.png](https://img.picui.cn/free/2025/03/25/67e2544734e26.png)
{% endgallery %}

效果如下：