最近折腾相册，结合了Multiverse和Light，弄出来一个初步感觉可以的，技术有限，都是通过Ai做的。
QQ20260217-230254.webp

一个优雅的 Typecho 独立页面模板，支持文章封面列表与图片详情双视图，集成 Masonry 瀑布流、Uncover 切片动画、Magnific Popup 灯箱。让你的博客瞬间变身高颜值相册！

在线演示：https://blog.ziyege.com 点击分类相册

特性

  • 双视图切换

    • 首页视图：展示指定分类下所有文章的封面卡片，点击封面进入该文章的图片详情页。
    • 详情视图：展示单篇文章的所有图片，支持瀑布流、动画、灯箱。

  • 兼容 Markdown 图片语法

    • 支持行内式 ![alt](url)
    • 支持引用式 ![alt][id] + [id]: url
  • 瀑布流布局：使用 Masonry 自动排列卡片，消除高度差，完美适配手机、平板、桌面。
  • Magnific Popup 灯箱：点击图片放大浏览，支持左右导航、标题显示、预加载、淡入淡出动画。
  • 响应式设计：基于 Bootstrap 5，边距和列数自动适应屏幕尺寸。
  • 安全可靠：严格的 Typecho 入口检查，所有输出经过安全过滤。

安装

1. 下载与放置

  • https://github.com/gxdng24/Typecho-photos-for-Ziyege
  • 下载本仓库的 Ziyegephoto.php 文件，将其上传至你的 Typecho 主题目录（例如 /usr/themes/你的主题名/）。

  • 确保主题目录下存在 ziyege 文件夹，并包含以下文件：

    • ziyege/anime.min.js（动画引擎）
    • ziyege/uncover.js（切片动画库）
    • ziyege/uncover.css（切片动画样式）
  • 如果你没有这些文件，可以下载或使用 CDN 版本，但需要相应修改代码中的引入路径。

2. 创建独立页面

  1. 进入 Typecho 后台 → 管理 → 独立页面 → 新增。
  2. 标题任意，例如“相册”。
  3. 在“高级选项”中，模板选择为 ziyegephoto（即上传的文件名）。
  4. 固定链接可设为 xiangce、photos 等，例如 https://yourdomain.com/photos.html。
  5. 发布页面。

3. 修改分类 ID

打开 Ziyege.php，找到以下代码行（约第 75 行）：

php

$category_id = 3; //  请改为你实际的分类ID

将 3 替换为你想要展示的文章分类的 ID（例如 1、2）。如果分类不存在，首页将显示“暂无文章”。

4. 检查编码

确保文件保存为 UTF-8 无 BOM 格式（用 VS Code 或 Notepad++ 另存时可选择）。否则可能导致页面顶部出现乱码或意外文本。

使用指南

添加图片到文章

本模板从文章的 Markdown 内容中提取图片。你需要在文章中使用标准的 Markdown 图片语法：

  • 行内式（推荐）：

    markdown

    ![晚霞](https://example.com/sunset.jpg)

  • 引用式（适用于多图复用）：

    markdown

    ![夕阳][sunset]
![海滩][beach]

[sunset]: https://example.com/sunset.jpg
[beach]: https://example.com/beach.jpg

文章的第一张图片会被作为该文章的封面图（用于首页卡片），文章中的所有图片都会在详情页展示。

首页浏览

访问你创建的独立页面（如 /photos.html），即可看到指定分类下的文章封面卡片。卡片上显示文章标题和图片数量，点击封面进入该文章的详情页。

详情页浏览

  • 图片以瀑布流网格排列，鼠标悬停显示图片标题和所属文章。
  • 点击图片打开 Magnific Popup 灯箱，支持左右箭头切换、标题显示、键盘导航。
  • 点击导航栏的“返回相册”可回到首页。

页脚控制台

  • 页脚左侧显示站点标题 + “相册”，点击可返回首页。
  • 右侧“关于”按钮点击后，从底部滑出全宽面板，显示图片总数、系统信息及版权。

自定义

修改样式

所有 CSS 位于 <style> 标签内，你可以根据需要调整：

  • 卡片边距：修改 .thumb 的 margin-bottom。
  • 左右边距：修改 .container-fluid.custom-wide 的 padding-left/right 及媒体查询。
  • 动画颜色：修改 uncoverOpts 中的 slicesColor（默认白色）。

修改动画参数

在 JavaScript 的 initUncover 函数中，可以调整：

  • slicesTotal：切片数量（手机 3，桌面 4）。
  • duration：动画时长（毫秒）。
  • delay：切片延迟函数。

添加分页（详情页）

如果某篇文章图片非常多，可以在详情页启用分页。代码已预留分页导航容器（#pagination-nav），你需要：

  1. 在 PHP 部分将 $initialData 按页分割。
  2. 修改 render 函数，只渲染当前页图片。
  3. 实现 updatePagination 函数并绑定事件。可参考版本6中的分页实现。

修改站点标题

导航栏和页脚的站点标题来自 Typecho 后台的“站点标题”。你可以在后台 设置 → 基本 中修改，或直接在模板中替换 <?php $this->options->title(); ?> 为固定文字。

常见问题

Q: 页面顶部出现“子夜歌”或其他意外文本？

A: 这是文件编码问题。请用编辑器（VS Code、Notepad++）将 Multiverse.php 转为 UTF-8 无 BOM 格式并保存。

Q: 首页不显示任何卡片？

A: 请检查：

  • 分类 ID 是否正确。
  • 该分类下是否有已发布的文章。
  • 文章中是否包含至少一张图片（Markdown 格式）。

Q: 图片加载失败显示占位图？

A: 图片 URL 可能无效或跨域被拦截。占位图为灰色 SVG，不影响浏览。请检查图片链接。

Q: 灯箱左右箭头不显示？

A: 请确保当前页面（详情页）至少有 2 张 图片。如果只有一张，导航箭头会自动隐藏。

Q: 如何修改每页图片数量？

A: 当前版本详情页未分页。如需分页，请参考“自定义”部分。

📄 开源协议

本项目基于 MIT 协议开源，你可以自由使用、修改、分发。但需注明原代码作者地址。

贡献

欢迎提交 Issue 和 Pull Request。如果你有好的改进建议，请随时联系。