前两天逛博客，偶然看到了
immmmm
immmmm.com
↗
大佬的相册页面，觉得那种瀑布流的布局方式展示照片很有感觉，错落有致。
正好最近也想整理一下自己的照片，于是想着能不能也在自己的 Hugo 博客上实现类似的效果。
自己也是在摸索中前进，参考了不少前辈的教程，这里简单记录一下实现的思路，希望能给同样有需求的朋友一点参考。
我的想法比较简单，主要是想利用 Hugo 的 Data Templates 功能，把照片的数据和页面的展示分离开来，这样管理起来比较方便。
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 方案：
.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 文件夹，方便存放一些本地的照片。折腾了一番，总算是把相册页面搭建起来了。虽然代码写得比较简单，样式也还有优化的空间，但看着自己的照片能以这样的方式展示出来，还是挺开心的。
如果有更好的实现方式，也欢迎大家指教。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。