前两天逛博客，偶然看到了 immmmm 大佬的相册页面，觉得那种瀑布流的布局方式展示照片很有感觉，错落有致。
正好最近也想整理一下自己的照片，于是想着能不能也在自己的 Hugo 博客上实现类似的效果。
自己也是在摸索中前进，参考了不少前辈的教程，这里简单记录一下实现的思路，希望能给同样有需求的朋友一点参考。
实现思路
我的想法比较简单，主要是想利用 Hugo 的 Data Templates 功能，把照片的数据和页面的展示分离开来，这样管理起来比较方便。
- 数据层：用 YAML 文件存储照片的链接、描述等信息。
- 展示层：编写一个专门的 Layout 模板来读取并渲染这些数据。
- 样式层：尝试使用 CSS 的
column-count属性来实现瀑布流布局。
第一步：准备数据
首先在 data 目录下新建了一个 album.yml 文件。
格式如下，每张照片作为一个 item：
- title: "随手拍的风景"
image: "https://picsum.photos/300/400"
date: "2024-01-29"
description: "记录生活中的一角"
- title: "本地图片测试"
image: "/album/my-photo.jpg" # 图片放在 static/album/ 目录下
date: "2026-01-30"
这样以后添加照片，只需要在这个文件里追加内容就可以了。
第二步：编写模板
接着在 layouts/_default/ 下新建了 album.html 模板文件。
主要逻辑是遍历 site.Data.album 中的数据：
{{ define "main" }}
<div id="pjax-container">
<div class="post-content">
<div class="album-content">
{{ range site.Data.album }}
<div class="album-item">
<div class="album-img-box">
<img src="{{ .image }}" loading="lazy">
{{ if .date }}<span class="album-date-badge">{{ .date }}</span>{{ end }}
<div class="album-info">
<span class="album-title">{{ .title }}</span>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>
{{ end }}
为了优化加载体验，给 img 标签加上了 loading="lazy" 属性。
第三步：CSS 样式
瀑布流的实现方式有很多种，我选择了一种比较简单的 CSS 方案：
.album-content {
column-count: 4; /* 设置列数 */
column-gap: 10px;
}
.album-item {
break-inside: avoid; /* 防止元素被分割 */
margin-bottom: 10px;
/* 简单的淡入动画 */
animation: fadeIn 0.6s ease forwards;
}
/* 简单的移动端适配 */
@media (max-width: 768px) {
.album-content {
column-count: 2;
}
}
使用 column-count 可以快速实现多列布局，配合 break-inside: avoid 避免图片在列之间断开。虽然可能不如 JS 库那么完美，但对于简单的相册展示来说，我觉得够用了。
一些小细节
在实现过程中，也做了一点微小的调整：
- 加载动画：加了一个简单的淡入效果，让图片出现得不那么突兀。
- 本地图片：在
static目录下建了album文件夹，方便存放一些本地的照片。 - 导航调整：考虑到手机屏幕较小，在移动端隐藏了相册的导航入口，保持界面的整洁。
总结
折腾了一番，总算是把相册页面搭建起来了。虽然代码写得比较简单，样式也还有优化的空间，但看着自己的照片能以这样的方式展示出来，还是挺开心的。
如果有更好的实现方式，也欢迎大家指教。
