📸 相册功能简介

Demius 主题的相册功能为您提供了一个优雅的照片管理和展示方案。通过分组管理，您可以轻松组织和展示您的摄影作品、旅行记录或生活点滴。

主要特性

  • 🎨 分组管理：支持创建多个相册分组
  • 🖼️ 封面展示：每个相册以封面图形式在列表中展示
  • 👆 点击查看：点击相册封面即可查看该相册的所有照片
  • 🔍 大图预览：内置 Lightbox 查看器，支持大图浏览
  • ⌨️ 键盘导航：支持键盘方向键切换照片
  • ⭐ 精选置顶：可将重要相册标记为精选并置顶显示
  • 📱 响应式设计：完美适配各种设备
  • 🌙 暗色模式：自动适配明暗主题

🚀 快速开始

1. 创建相册页面

在 content/ 目录下创建 gallery.md 文件：

---
title: "相册"
date: 2025-10-21T00:00:00Z
type: "gallery"
layout: "gallery"
comments: false
---

2. 配置相册数据

在项目根目录的 data/ 文件夹下创建 gallery.yaml 文件：

groups:
  - name: "旅行足迹"
    description: "记录旅行中的美好瞬间"
    featured: true
    cover: "https://example.com/travel-cover.jpg"
    photos:
      - url: "https://example.com/photo1.jpg"
        title: "美丽风景"
        description: "旅行中遇到的美景"
        date: "2024-01-01"

3. 访问相册

构建网站后，访问 /gallery 路径即可查看您的相册。

📝 配置详解

相册组结构

每个相册组包含以下字段：

字段 类型 必填 说明
name string ✅ 相册名称
description string ✅ 相册描述
featured boolean ❌ 是否为精选相册
cover string ✅ 封面图片 URL
photos array ✅ 照片列表

照片数据结构

每张照片包含以下字段：

字段 类型 必填 说明
url string ✅ 图片 URL
title string ✅ 图片标题
description string ✅ 图片描述
date string ✅ 拍摄日期

💡 使用示例

示例 1：创建基础相册

groups:
  - name: "日常生活"
    description: "记录生活中的点点滴滴"
    featured: false
    cover: "https://example.com/daily-cover.jpg"
    photos:
      - url: "https://example.com/daily1.jpg"
        title: "美食时刻"
        description: "享受美食的快乐"
        date: "2024-02-01"
      
      - url: "https://example.com/daily2.jpg"
        title: "咖啡时光"
        description: "悠闲的下午茶时光"
        date: "2024-02-02"
      
      - url: "https://example.com/daily3.jpg"
        title: "读书角落"
        description: "安静的阅读时光"
        date: "2024-02-03"

示例 2：创建精选相册

精选相册会显示在页面顶部，并带有"精选"徽章：

groups:
  - name: "2024 年度精选"
    description: "2024年最美好的回忆"
    featured: true  # 标记为精选
    cover: "https://example.com/2024-best.jpg"
    photos:
      - url: "https://example.com/best1.jpg"
        title: "最美日落"
        description: "海边的日落时刻"
        date: "2024-06-15"
      
      - url: "https://example.com/best2.jpg"
        title: "星空夜景"
        description: "银河下的露营"
        date: "2024-08-20"

示例 3：多相册配置

groups:
  # 精选相册
  - name: "摄影作品集"
    description: "精选摄影作品"
    featured: true
    cover: "https://example.com/photography-cover.jpg"
    photos:
      - url: "https://example.com/photo1.jpg"
        title: "光影之间"
        description: "城市的光影交错"
        date: "2024-03-10"
  
  # 旅行相册
  - name: "日本之旅"
    description: "2024春季日本旅行"
    featured: false
    cover: "https://example.com/japan-cover.jpg"
    photos:
      - url: "https://example.com/japan1.jpg"
        title: "东京塔"
        description: "夜幕下的东京塔"
        date: "2024-04-01"
      
      - url: "https://example.com/japan2.jpg"
        title: "富士山"
        description: "河口湖的富士山倒影"
        date: "2024-04-03"
  
  # 生活相册
  - name: "宠物日常"
    description: "我的可爱宠物"
    featured: false
    cover: "https://example.com/pet-cover.jpg"
    photos:
      - url: "https://example.com/pet1.jpg"
        title: "午睡时光"
        description: "慵懒的午后"
        date: "2024-05-10"

🎨 使用本地图片

方法 1：使用 static 目录

  1. 将图片放在 static/img/gallery/ 目录下
  2. 在配置中使用相对路径：
groups:
  - name: "本地相册"
    description: "使用本地图片"
    featured: false
    cover: "/img/gallery/albums/travel-cover.jpg"
    photos:
      - url: "/img/gallery/travel/photo1.jpg"
        title: "本地照片"
        description: "存储在本地的照片"
        date: "2024-01-01"

方法 2：使用图床服务

推荐使用稳定的图床服务：

  • 免费图床：imgbb.com, postimages.org
  • CDN 加速：Cloudflare Images, Imgur
  • 对象存储：阿里云 OSS, 腾讯云 COS, 七牛云
photos:
  - url: "https://i.ibb.co/xxxxx/photo.jpg"
    title: "使用图床"
    description: "通过图床服务托管"
    date: "2024-01-01"

⚙️ 高级功能

1. 精选相册置顶

将重要的相册设置为精选，它们会：

  • 显示在页面顶部的"精选相册"区域
  • 带有金色的"精选"徽章
  • 优先展示给访客
- name: "重要相册"
  featured: true  # 设置为精选
  # ... 其他配置

2. 相册分组策略

建议的分组方式：

按时间分组：

- name: "2024 春季"
- name: "2024 夏季"
- name: "2024 秋季"

按主题分组：

- name: "风景摄影"
- name: "人像摄影"
- name: "街拍纪实"

按地点分组：

- name: "北京游记"
- name: "上海印象"
- name: "杭州之美"

3. Lightbox 快捷键

在大图查看模式下：

按键 功能
← 上一张照片
→ 下一张照片
Esc 关闭查看器
点击背景 关闭查看器

📐 最佳实践

1. 图片尺寸建议

封面图片：

  • 推荐尺寸：800×600 像素（4:3 比例）
  • 或 1920×1080 像素（16:9 比例）
  • 文件大小：< 500KB

相册照片：

  • 推荐尺寸：1200×1200 像素（正方形）
  • 或 1920×1080 像素（横向）
  • 文件大小：< 800KB

2. 图片优化

使用图片压缩工具：

  • 在线工具：TinyPNG, Squoosh
  • 本地工具：ImageOptim (Mac), FileOptimizer (Windows)
  • 批量处理：使用脚本批量压缩

3. 命名规范

建议使用清晰的命名规则：

相册封面：album-name-cover.jpg
照片：album-name-001.jpg, album-name-002.jpg

4. 内容组织

相册数量：建议每页 6-12 个相册 照片数量：每个相册建议 10-50 张照片 描述文字：简洁明了，突出重点

🎯 完整示例

这是一个完整的 gallery.yaml 配置示例：

# 相册配置文件

groups:
  # 精选相册 1
  - name: "2024 年度精选"
    description: "2024年最值得回味的瞬间"
    featured: true
    cover: "https://example.com/2024-best-cover.jpg"
    photos:
      - url: "https://example.com/2024-best-1.jpg"
        title: "星空露营"
        description: "在大自然中仰望星空"
        date: "2024-08-15"
      
      - url: "https://example.com/2024-best-2.jpg"
        title: "日出时分"
        description: "山顶的第一缕阳光"
        date: "2024-09-20"
      
      - url: "https://example.com/2024-best-3.jpg"
        title: "秋日红叶"
        description: "满山红叶的美景"
        date: "2024-10-10"

  # 精选相册 2
  - name: "摄影作品"
    description: "个人摄影作品集"
    featured: true
    cover: "https://example.com/photography-cover.jpg"
    photos:
      - url: "https://example.com/photo-1.jpg"
        title: "城市剪影"
        description: "城市建筑的光影艺术"
        date: "2024-05-01"
      
      - url: "https://example.com/photo-2.jpg"
        title: "人文纪实"
        description: "街头的生活百态"
        date: "2024-06-15"

  # 普通相册 1
  - name: "旅行日记"
    description: "行走在路上的记录"
    featured: false
    cover: "https://example.com/travel-cover.jpg"
    photos:
      - url: "https://example.com/travel-1.jpg"
        title: "古镇漫步"
        description: "江南水乡的古韵"
        date: "2024-03-10"
      
      - url: "https://example.com/travel-2.jpg"
        title: "海边日落"
        description: "最美的日落时刻"
        date: "2024-04-20"
      
      - url: "https://example.com/travel-3.jpg"
        title: "山间云海"
        description: "云雾缭绕的山峰"
        date: "2024-05-05"

  # 普通相册 2
  - name: "美食记录"
    description: "舌尖上的美好时光"
    featured: false
    cover: "https://example.com/food-cover.jpg"
    photos:
      - url: "https://example.com/food-1.jpg"
        title: "精致早餐"
        description: "美好的一天从早餐开始"
        date: "2024-02-14"
      
      - url: "https://example.com/food-2.jpg"
        title: "下午茶"
        description: "悠闲的下午茶时光"
        date: "2024-03-08"

  # 普通相册 3
  - name: "日常生活"
    description: "记录生活中的小确幸"
    featured: false
    cover: "https://example.com/daily-cover.jpg"
    photos:
      - url: "https://example.com/daily-1.jpg"
        title: "阅读时光"
        description: "安静的读书角落"
        date: "2024-01-15"
      
      - url: "https://example.com/daily-2.jpg"
        title: "咖啡香气"
        description: "一杯手冲咖啡的时光"
        date: "2024-02-20"
      
      - url: "https://example.com/daily-3.jpg"
        title: "窗外风景"
        description: "从窗口看到的城市"
        date: "2024-03-25"

🔧 故障排查

问题 1：相册页面显示"暂无相册数据"

解决方法：

  1. 检查 data/gallery.yaml 文件是否存在
  2. 确认 YAML 格式正确（注意缩进）
  3. 确保至少有一个相册组配置
  4. 重新构建：hugo --cleanDestinationDir

问题 2：图片无法显示

解决方法：

  1. 检查图片 URL 是否正确
  2. 在浏览器中直接访问图片 URL 测试
  3. 如使用本地图片，确认路径以 / 开头
  4. 检查图片是否存在跨域限制

问题 3：点击相册没有反应

解决方法：

  1. 清除浏览器缓存（Ctrl+F5）
  2. 检查浏览器控制台是否有错误
  3. 确认 JavaScript 已正确加载
  4. 重新构建并刷新页面

问题 4：Lightbox 不工作

解决方法：

  1. 检查是否成功进入相册详情页
  2. 确认照片能够正常显示
  3. 检查浏览器控制台错误信息
  4. 测试键盘快捷键是否响应

🌟 使用技巧

1. 创建主题相册

按主题组织照片更有条理：

# 婚礼摄影主题
- name: "浪漫婚礼"
  description: "记录最美好的一天"
  featured: true
  # ...

# 宝宝成长主题  
- name: "宝宝成长日记"
  description: "记录宝宝的每个第一次"
  featured: true
  # ...

2. 季节性更新

定期更新相册内容：

  • 春季：樱花、踏青
  • 夏季：海滩、旅行
  • 秋季：红叶、丰收
  • 冬季：雪景、节日

3. 添加水印

保护您的作品：

  • 使用水印工具给照片添加水印
  • 标注拍摄信息或版权声明
  • 防止未经授权的使用

4. 定期备份

重要提示：

  • 定期备份 gallery.yaml 文件
  • 保存原始高清照片
  • 使用版本控制管理配置

📱 移动端优化

相册功能已针对移动端优化：

响应式网格：

  • 桌面端：3列展示
  • 平板端：2列展示
  • 手机端：1列展示

触摸优化：

  • 支持触摸滑动切换照片
  • 优化的点击区域
  • 平滑的滚动体验

性能优化：

  • 图片懒加载
  • 按需渲染
  • 压缩资源文件

🎓 学习资源

相关文档：

推荐工具：

💡 总结

相册功能为您提供了：

  • ✅ 简单易用的配置方式
  • ✅ 优雅的视觉展示效果
  • ✅ 完善的交互体验
  • ✅ 移动端完美适配

开始创建您的精美相册吧！记录生活中的每一个美好瞬间。

更新时间：2025-10-24
版本：v1.0.0
作者：Demius Theme

如有问题或建议，欢迎反馈！