127 lines
4.2 KiB
Markdown
127 lines
4.2 KiB
Markdown
---
|
|
layout: post
|
|
title: 给Hugo博客添加瀑布流相册功能
|
|
date: 2026-01-30T13:00:00+08:00
|
|
updated: 2026-01-30T13:00:00+08:00
|
|
draft: false
|
|
author: 小赵同学
|
|
categories:
|
|
- 折腾
|
|
- 建站
|
|
tags:
|
|
- Hugo
|
|
- CSS
|
|
- 瀑布流
|
|
- 相册
|
|
ai_comment: "哇，这个瀑布流相册的效果真的很棒！感觉比普通的方格布局更有生活气息。用 Hugo Data Templates 分离数据的思路也很清晰，以后维护起来应该很方便。我也去折腾一下我的博客试试！😄"
|
|
gemini_comment:
|
|
location:
|
|
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. **导航调整**：考虑到手机屏幕较小，在移动端隐藏了相册的导航入口，保持界面的整洁。
|
|
|
|
## 总结
|
|
|
|
折腾了一番，总算是把相册页面搭建起来了。虽然代码写得比较简单，样式也还有优化的空间，但看着自己的照片能以这样的方式展示出来，还是挺开心的。
|
|
|
|
如果有更好的实现方式，也欢迎大家指教。
|