PrimeEdge 主题教程

相册页面

创建图片展示页面

相册页面

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

创建相册页面

创建 content/photos.md：

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

相册模板结构

相册页面使用 layouts/page/photos.html 模板，包含：

  • 瀑布流图片网格
  • 灯箱浏览功能
  • 键盘导航支持

添加照片

方式一：直接修改模板

编辑 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: "风景摄影"
  - src: "/images/photos/photo2.jpg"
    title: "城市夜景"
  - src: "/images/photos/photo3.jpg"
    title: "自然风光"

然后在模板中遍历：

{{ range .Site.Data.photos.photos }}
<div class="photo-item" data-src="{{ .src }}">
  <img src="{{ .src }}" alt="{{ .title }}" loading="lazy">
  <div class="photo-overlay">
    <span class="photo-title">{{ .title }}</span>
  </div>
</div>
{{ end }}

图片存放

将图片放入 static/images/photos/ 目录：

static/
└── images/
    └── photos/
        ├── photo1.jpg
        ├── photo2.jpg
        └── photo3.jpg

图片建议

  • 格式: JPG 或 WebP
  • 尺寸: 建议宽度 1200px 以上
  • 大小: 单张控制在 500KB 以内
  • 命名: 使用有意义的文件名

灯箱功能

点击任意图片打开灯箱浏览：

  • 关闭: 点击关闭按钮或按 Esc
  • 上一张: 点击左箭头或按 ←
  • 下一张: 点击右箭头或按 →

响应式布局

相册页面自动适配不同屏幕：

  • 桌面端：4 列瀑布流
  • 平板端：3 列瀑布流
  • 手机端：2 列瀑布流

懒加载

图片使用 loading="lazy" 属性，进入视口时才加载，提升页面性能。

自定义样式

如需自定义相册样式，创建 static/css/custom.css：

/* 调整图片间距 */
.photos-grid {
  gap: 20px;
}

/* 自定义悬停效果 */
.photo-item:hover .photo-overlay {
  background: rgba(0, 0, 0, 0.7);
}

多相册支持

如需多个相册，可以创建多个页面：

content/
├── photos-travel.md    # 旅行相册
├── photos-food.md      # 美食相册
└── photos-life.md      # 生活相册

每个页面使用相同的 layout: photos，但指向不同的图片目录。

与图床集成

如果使用外部图床（如又拍云、七牛云），直接使用外链：

<div class="photo-item" data-src="https://your-cdn.com/photo1.jpg">
  <img src="https://your-cdn.com/photo1.jpg" alt="照片" loading="lazy">
</div>

完整示例

页面配置

---
title: "旅行相册"
description: "记录走过的路和看过的风景"
layout: "photos"
---

模板代码

<div class="photos-grid">
  <div class="photo-item" data-src="/images/photos/tokyo.jpg">
    <img src="/images/photos/tokyo.jpg" alt="东京" loading="lazy">
    <div class="photo-overlay">
      <span class="photo-title">东京塔夜景</span>
    </div>
  </div>
  <div class="photo-item" data-src="/images/photos/kyoto.jpg">
    <img src="/images/photos/kyoto.jpg" alt="京都" loading="lazy">
    <div class="photo-overlay">
      <span class="photo-title">京都神社</span>
    </div>
  </div>
</div>

下一步

Comments

0%