---
layout: post
title: 给Hugo博客添加瀑布流相册功能
date: 2026-01-30T05:00:00.000Z
updated: 2026-01-30T05:00:00.000Z
draft: false
author: 小赵同学
categories:
  - 折腾
  - 建站
tags:
  - Hugo
  - CSS
  - 瀑布流
  - 相册
ai_comment: >-
  数据与表现分离的思路很清晰，YAML+CSS
  column-count的方案确实轻量。注意到你处理了图片懒加载和移动端适配这两个关键点，这是很多初级实现容易忽略的。如果考虑进一步优化，可以测试下图片宽高比固定的情况下，用aspect-ratio属性避免布局抖动。技术上，这种纯CSS方案在图片高度差异较大时可能出现空白间隙，但作为技术博客的相册已经足够实用。
gemini_comment: null
location: null
show_theme: 1
top_img: 'https://picsum.photos/800/400'
slug: 20260130
---

前两天逛博客，偶然看到了 [immmmm](https://immmmm.com/album/) 大佬的相册页面，觉得那种瀑布流的布局方式展示照片很有感觉，错落有致。

正好最近也想整理一下自己的照片，于是想着能不能也在自己的 Hugo 博客上实现类似的效果。

自己也是在摸索中前进，参考了不少前辈的教程，这里简单记录一下实现的思路，希望能给同样有需求的朋友一点参考。

## 实现思路

我的想法比较简单，主要是想利用 Hugo 的 `Data Templates` 功能，把照片的数据和页面的展示分离开来，这样管理起来比较方便。

1.  **数据层**：用 YAML 文件存储照片的链接、描述等信息。
2.  **展示层**：编写一个专门的 Layout 模板来读取并渲染这些数据。
3.  **样式层**：尝试使用 CSS 的 `column-count` 属性来实现瀑布流布局。

## 第一步：准备数据

首先在 `data` 目录下新建了一个 `album.yml` 文件。

格式如下，每张照片作为一个 item：

```yaml
- 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` 中的数据：

```html
{{ 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 方案：

```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 库那么完美，但对于简单的相册展示来说，我觉得够用了。

## 一些小细节

在实现过程中，也做了一点微小的调整：

1.  **加载动画**：加了一个简单的淡入效果，让图片出现得不那么突兀。
2.  **本地图片**：在 `static` 目录下建了 `album` 文件夹，方便存放一些本地的照片。
3.  **导航调整**：考虑到手机屏幕较小，在移动端隐藏了相册的导航入口，保持界面的整洁。

## 总结

折腾了一番，总算是把相册页面搭建起来了。虽然代码写得比较简单，样式也还有优化的空间，但看着自己的照片能以这样的方式展示出来，还是挺开心的。

如果有更好的实现方式，也欢迎大家指教。