PrimeEdge 主题教程

相册

瀑布流图片展示页面

相册

PrimeEdge 提供瀑布流相册页面，支持灯箱浏览和键盘导航。

创建相册页面

创建 content/photos.md：

---
title: "相册"
description: "记录生活中的美好瞬间"
layout: "photos"
---

layout: "photos" 是关键，它告诉 Hugo 使用相册专用模板渲染此页面。

添加照片

方式一：直接修改模板

编辑 layouts/page/photos.html，添加图片：

<div class="photo-item" data-src="/images/photos/photo1.jpg">
  <img src="/images/photos/photo1.jpg" alt="照片描述" loading="lazy">
  <div class="photo-overlay">
    <span class="photo-title">照片标题</span>
  </div>
</div>

方式二：使用数据文件

创建 data/photos.yml：

photos:
  - src: "/images/photos/photo1.jpg"
    title: "照片标题"
    desc: "照片描述"
  - src: "/images/photos/photo2.jpg"
    title: "另一张照片"
    desc: "另一张描述"

然后在模板中读取数据文件渲染。

方式三：使用内容页

在 content/photos/ 目录下创建独立的图片内容页，每个文件对应一张照片：

---
title: "照片标题"
date: 2024-01-15
cover: "/images/photos/photo1.jpg"
description: "照片描述"
---

相册功能特点

  • 瀑布流布局 — 图片按不同高度自动排列，视觉效果好
  • 灯箱浏览 — 点击任意图片进入全屏浏览模式
  • 键盘导航 — 灯箱模式下按左右方向键切换图片，按 ESC 退出
  • 懒加载 — 图片进入视口时才加载，减少初始请求
  • 响应式 — 自动适配不同屏幕尺寸，移动端为两列，桌面端为多列

图片建议

  • 格式: 优先使用 WebP，兼容性更好
  • 尺寸: 宽度建议 800-1200px，文件大小控制在 300KB 以内
  • 命名: 使用有意义的文件名，避免中文和空格

Front Matter 字段

字段 必填 说明
title 是 相册页面标题
description 否 相册页面描述
layout 是 固定为 photos

下一步

评论

0%