# 拾光 · 极简相册 (ShiGuang)
Typecho 独立相册插件，双列瀑布流与三列网格一键切换，零配置开箱即用。
适配Cuteen主题/其余模板可用独立路由或者改路径
适配后的OneBlog主题的代码在压缩包里面，手动复制page-photo.php粘贴到主题目录(请先启用插件后再进行操作，复制粘贴后如果再禁用启用插件，这个文件就会被自动覆盖成适配Cuteen主题的文件)
演示：linyu.live · 作者：Lin · 下载：GitHub
演示
特性
- 双列瀑布流 — 小红书风格，图片按原始比例自然错落，无白边、无强制裁剪
- 三列大图网格 — 边缘贴合，圆角裁切，最大化利用屏幕空间
- 现代灯箱 — 深色沉浸背景、缩略图导航、键盘/触摸/手势滑动、淡入淡出过渡
- 暗色模式 — 自动适配主题暗色变量，无缝切换
- 自动部署 — 启用插件即自动写入主题模板与样式文件，无需手动复制
- 双入口访问 — 支持独立页面模板（
/photo.html）与独立路由（/shiguang） - 侧边栏兼容 — 自动识别 Cuteen 主题
Context::SidebarEcho()，PC 端左侧边栏正常显示 - 零依赖 — 纯原生 CSS/JS，无第三方库
安装
- 下载插件，解压至
usr/plugins/ShiGuang/ 确保目录结构如下：
ShiGuang/
├── Plugin.php
├── Action.php
└── views/ (自动生成，无需手动创建)- 后台 → 控制台 → 插件 → 启用「拾光·极简相册」
- 插件会自动将
page-photo.php部署到当前主题目录，并将 CSS/视图写入views/
使用
方式一：独立页面（推荐）
后台 → 管理 → 独立页面 → 新建页面 → 模板选择「拾光·极简相册」→ 发布。
方式二：独立路由
直接访问 https://你的域名/shiguang，手机端自带返回顶栏。
后台设置
| 选项 | 说明 |
|---|---|
| 相册标题 | 首图大标题与页面标题 |
| 相册副标题 | 首图小字/英文 |
| 默认分类ID | 支持多分类，英文逗号分隔；填 0 或留空显示全部 |
| 首图背景 | 相对于插件目录的路径或完整 URL |
| 网格布局 | 三列密集网格 / 双列瀑布流卡片 |
目录结构（启用后）
usr/plugins/ShiGuang/
├── Plugin.php # 核心：路由、数据抓取、自动部署
├── Action.php # /shiguang 路由控制器
└── views/ ├── shiguang.css # 样式（自动写入） └── shiguang.php # /shiguang 路由视图（自动写入）
usr/themes/你的主题/ └── page-photo.php # 独立页面模板（自动写入）
技术细节
- 图片提取：自动解析文章 Markdown 中的
与引用式图片语法 - 瀑布流：CSS
column-count实现，图片height: auto保持原始比例，无 JS 计算 - 灯箱：原生 JS 实现，支持
← →键盘导航、触摸滑动、缩略图点击跳转 - 自动部署：
activate()时通过file_put_contents将模板与样式写入对应位置，升级时禁用再启用即可刷新
更新日志
v2.2.2
- 修复 PC 端侧边栏布局，兼容 Cuteen 主题原生 Bootstrap 结构
- 路由视图增加手机端 sticky 返回顶栏
- PC 端相册整体缩小，更精致
- 双排瀑布流改为自然高度（按图片原始比例）
- 灯箱沉浸感优化：缩略图放大、箭头半透明、底部毛玻璃
- 路由首图高度压缩，更扁平
- 增加 PC 端左侧边栏支持
- 三列模式图片边缘贴合，零内边距
- 统一圆角与轻微阴影
- 重写双列模式为真瀑布流，支持 3/4、4/3、1/1 错落比例
- 增加滚动入场动画（IntersectionObserver）
v1.2.1
- 初始版本，基础双列/三列布局与灯箱