Typecho插件-双视图相册

AomanHao

发布于 2026-03-08 09:19:03

1200

一、Typecho双视图相册插件

发现一款优雅、高性能的 Typecho 相册模板，支持文章封面列表与图片详情双视图，集成 Masonry 瀑布流、Magnific Popup 灯箱、图片懒加载，支持缩略图生成、图片预加载、URL 编码、XSS 防护，并支持七牛云、又拍云、阿里云 OSS、缤纷云等主流云存储的实时图片裁剪。

![QQ20260217-230254.webp](https://blog.ziyege.com/usr/uploads/2026/02/2960727911.webp "QQ20260217-230254.webp")

在线演示：相册路径

二、功能特性

双视图切换
- 首页：展示指定分类下所有文章的封面卡片（第一张图片作为封面），卡片显示文章标题和图片数量。
- 详情页：点击卡片进入单篇文章，展示该文章所有图片，支持瀑布流布局与灯箱画廊。
图片处理优化
- 自动为封面图生成 400×300 缩略图，支持七牛云、又拍云、阿里云 OSS、缤纷云等主流云存储实时裁剪，大幅节省带宽。
- 首页前 4 张封面图预加载，首屏秒开。
- 图片 URL 自动编码（空格转 %20），避免特殊字符导致加载失败。
丝滑交互
- Masonry 瀑布流：图片自动排列，高度自适应，视觉整齐美观。
- Magnific Popup 灯箱：点击图片放大浏览，支持左右导航、键盘控制、标题显示。
- jQuery LazyLoad 懒加载：仅当图片进入视口时加载，提升页面速度。
- 悬停效果：卡片悬停时显示半透明遮罩及文章标题/图片数量。
安全可靠
- 所有输出均经过 htmlspecialchars 转义，有效防止 XSS 攻击。
- 严格遵循 Typecho 开发规范，代码结构清晰。
完全响应式
- 基于 Bootstrap 5，手机、平板、桌面均完美适配，边距随屏幕自动调整。
开箱即用
- 仅需修改一个分类 ID，即可将指定分类下的文章转为相册。
- 所有前端资源均从 CDN 加载，无需本地存放额外文件。

三、安装方法

下载文件 从 GitHub 仓库下载 ziyegephotos.php。

上传将文件上传至你的 Typecho 主题目录（例如 /usr/themes/你的主题/）。

创建独立页面 在 Typecho 后台新建一个独立页面，并在“高级选项”中选择模板 “子夜歌双视图相册”。发布后即可访问该页面。

修改分类 ID 打开 ziyegephotos.php，找到第 132 行附近：

php

复制

$category_id = 3; // &#x26A0;&#xFE0F; &#x8BF7;&#x6539;&#x4E3A;&#x4F60;&#x5B9E;&#x9645;&#x7684;&#x5206;&#x7C7B;ID

将 3 替换为你希望作为相册来源的分类 ID。 提示：可在 Typecho 后台“管理”→“分类”中查看分类 ID。

四、进阶配置

1. 缩略图支持（云存储用户）

在 getThumbnailUrl 函数中（约第 24–70 行），已预设了七牛云、又拍云、阿里云 OSS 的缩略图参数。

2. 图片预加载数量

默认预加载前 4 张封面图，如需调整，修改 <head> 中的循环（约第 280 行）：

php

复制

&lt;?php for ($i = 0; $i &lt; min(4, count($initialData)); $i++): ?&gt;

将 4 改为你期望的数量（例如 6 或 8）。

3. 自定义样式

模板使用内联 CSS，你可以直接修改 <style> 标签中的样式，或通过主题的 custom.css 覆盖。卡片尺寸、悬停效果、边距等均可按需调整。

五、使用指南

1. 首页模式

打开你创建的独立页面，即可看到按发布时间倒序排列的文章卡片。
每张卡片显示文章标题、图片数量，点击卡片进入该文章的详情页。

2. 详情页模式

进入文章详情页后，所有图片以瀑布流网格展示。
点击任意图片，即可弹出灯箱画廊，左右滑动浏览全部图片，标题显示图片的 alt 文本及所属文章标题。

六、开源路径

项目 GitHub 地址：https://github.com/gxdng24/Typecho-photos-for-Ziyege

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-03-07，如有侵权请联系 cloudcommunity@tencent.com 删除

云存储

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度