added 发布文章

2026-01-30 13:17:48 +08:00
1 parent 4211181645
commit 5387ea86bd
@@ -0,0 +1,119 @@
+---
+title: 给Hugo博客添加瀑布流相册功能
+date: 2026-01-30T13:00:00+08:00
+draft: false
+author: 小赵同学
+categories: 
+  - 折腾
+  - 建站
+tags: 
+  - Hugo
+  - CSS
+  - 瀑布流
+  - 相册
+top_img: https://picsum.photos/800/400
+---
+
+前两天逛博客，偶然看到了 [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.  **导航调整**：考虑到手机屏幕较小，在移动端隐藏了相册的导航入口，保持界面的整洁。
+
+## 总结
+
+折腾了一番，总算是把相册页面搭建起来了。虽然代码写得比较简单，样式也还有优化的空间，但看着自己的照片能以这样的方式展示出来，还是挺开心的。
+
+如果有更好的实现方式，也欢迎大家指教。