diff --git a/README.md b/README.md index 00a0861..a9a8836 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,6 @@ 一个移植自 Typecho 主题 [whitespace 留白](https://kehua.me) 的 [Halo](https://www.halo.run/) 主题,主打极简留白风格与清晰的排版,并为多款常用插件提供开箱即用的适配页面。 > 本项目由 AI 开发完成,人工仅进行部分功能测试及问题找寻。 -> 源码仓库: ## 环境要求 @@ -21,30 +20,30 @@ ## 已适配插件 -| 插件名称 | 插件标识 | 适配页面路由 | 说明 | -| --- | --- | --- | --- | -| [瞬间](https://github.com/halo-sigs/plugin-moments) | `plugin-moments` | `/moments` | 瞬间动态列表页,含 `/moments/{name}` 详情页(完整内容、媒体、标签、作者信息、评论区) | -| [图库](https://github.com/halo-sigs/plugin-photos) | `plugin-photos` | `/photos` | 图片展示页面,按相册分组、封面自动选取、瀑布流 + 预览模式 | -| [重要日子](https://github.com/yyliucha/plugin-important-dates) | `plugin-important-dates` | `/important-dates` | 即将到来提醒、全部日期倒计时、重要标记、人员生日 | -| [友情链接](https://github.com/halo-sigs/plugin-links) | `plugin-links` | `/links` | 友链展示页,按分组显示标题、卡片统一高度;内嵌申请表单 | -| [链接订阅](https://github.com/halo-sigs/plugin-links) | `plugin-links` | `/subscriptions` | RSS 订阅动态聚合,作者链接来源博客、摘要折叠 5 行 | -| [豆瓣](https://github.com/chengzhongxue/plugin-douban) | `plugin-douban` | `/douban` | 豆瓣记录页,按「读过 / 在读 / 看过 / 在追」分栏展示书影音 | -| [微信读书](https://github.com/yeora26/halo-weread-plugin) | `halo-weread-plugin` | 自定义页面 | 微信读书书架展示,访客免登录查看 | -| [API 扩展包](https://github.com/HowieHz/halo-plugin-extra-api) | `extra-api` | 全站 | 服务端字数统计、代码高亮、全站/单条字数展示 | +| 插件名称 | 插件标识 | 适配页面路由 | 说明 | +| ----------------------------------------------------------- | ------------------------ | ------------------ | ---------------------------------------------------- | +| [瞬间](https://github.com/halo-sigs/plugin-moments) | `plugin-moments` | `/moments` | 瞬间动态列表页,含 `/moments/{name}` 详情页(完整内容、媒体、标签、作者信息、评论区) | +| [图库](https://github.com/halo-sigs/plugin-photos) | `plugin-photos` | `/photos` | 图片展示页面,按相册分组、封面自动选取、瀑布流 + 预览模式 | +| [重要日子](https://github.com/yyliucha/plugin-important-dates) | `plugin-important-dates` | `/important-dates` | 即将到来提醒、全部日期倒计时、重要标记、人员生日 | +| [友情链接](https://github.com/halo-sigs/plugin-links) | `plugin-links` | `/links` | 友链展示页,按分组显示标题、卡片统一高度;内嵌申请表单 | +| [链接订阅](https://github.com/halo-sigs/plugin-links) | `plugin-links` | `/subscriptions` | RSS 订阅动态聚合,作者链接来源博客、摘要折叠 5 行 | +| [豆瓣](https://github.com/chengzhongxue/plugin-douban) | `plugin-douban` | `/douban` | 豆瓣记录页,按「读过 / 在读 / 看过 / 在追」分栏展示书影音 | +| [微信读书](https://github.com/yeora26/halo-weread-plugin) | `halo-weread-plugin` | 自定义页面 | 微信读书书架展示,访客免登录查看 | +| [API 扩展包](https://github.com/HowieHz/halo-plugin-extra-api) | `extra-api` | 全站 | 服务端字数统计、代码高亮、全站/单条字数展示 | -> **注意**:插件需单独安装,安装后主题自动适配对应页面。若未安装某插件,对应页面或功能自动隐藏 / 降级,不会报错。 +> **注意**:插件需单独安装,安装后主题自动适配对应页面。若未安装某插件,对应页面或功能自动隐藏 / 降级,不会报错。 > 豆瓣插件建议 **v1.2.6+**(SQLite 数据结构)。 ## 自定义页面模板 在 Halo 后台「页面 → 新建 → 自定义模板」中选择使用: -| 模板名 | 模板文件 | 说明 | -| --- | --- | --- | -| 关于 | `page_about.html` | 关于页,头像 / 简介 / 社交链接可配置 | -| 留言板 | `page_guestbook.html` | 以评论区作为留言板的单页 | -| 微信读书 | `weread.html` | 微信读书书架展示,依赖微信读书插件 | -| 豆瓣页面 | `douban.html` | 豆瓣记录页,依赖豆瓣插件 | +| 模板名 | 模板文件 | 说明 | +| ---- | --------------------- | --------------------- | +| 关于 | `page_about.html` | 关于页,头像 / 简介 / 社交链接可配置 | +| 留言板 | `page_guestbook.html` | 以评论区作为留言板的单页 | +| 微信读书 | `weread.html` | 微信读书书架展示,依赖微信读书插件 | +| 豆瓣页面 | `douban.html` | 豆瓣记录页,依赖豆瓣插件 | ## 主要功能 @@ -71,8 +70,10 @@ ### 图库 -- 首屏按相册分组展示,封面默认自动取相册内第一张图(分组无图时回退取首图),可在后台为每个相册手动配置封面 +- 首屏按相册网格展示,封面 4:3 自适应填满,默认自动取相册内第一张图(分组无图时回退取首图) +- 后台可为每个相册手动指定封面:「相册」直接从图库插件**已存在的分组中下拉选择**,无需手输名称 - 点击相册进入 `?group=photo-group-*` 瀑布流视图(一行三张、页面加宽) +- 相册切换由前端按 URL 上的 `group` 参数完成,不依赖服务端变量,因此**不受页面静态缓存影响** - 预览模式:默认值可在设置中配置(默认开),访客可在前台自行切换(开 → 点击图片灯箱放大;关 → 点击进入图片详情) ### 瞬间 diff --git a/i18n/default.properties b/i18n/default.properties index 7f79e16..a520758 100644 --- a/i18n/default.properties +++ b/i18n/default.properties @@ -48,5 +48,6 @@ stats.visits={0} visits stats.words={0} words douban.plugin_required=Douban plugin (plugin-douban) not detected. Please install and enable it, then set your Douban ID in the plugin settings. photos.photo_count={0} photos +photos.back=Back to all albums moment.back_to_list=Back to moments moment.tags=Tags diff --git a/i18n/zh_CN.properties b/i18n/zh_CN.properties index a53ecad..f919cdd 100644 --- a/i18n/zh_CN.properties +++ b/i18n/zh_CN.properties @@ -48,5 +48,6 @@ stats.visits={0} 次访问 stats.words={0} 字 douban.plugin_required=未检测到豆瓣插件(plugin-douban),请安装并启用后在插件设置中填写豆瓣 ID。 photos.photo_count={0} 张照片 +photos.back=返回全部相册 moment.back_to_list=返回瞬间列表 moment.tags=标签 diff --git a/settings.yaml b/settings.yaml index f3b38ac..9e94ca1 100644 --- a/settings.yaml +++ b/settings.yaml @@ -170,12 +170,21 @@ spec: name: album_covers label: 相册封面 value: [] - help: 为相册手动指定封面;不配置时自动使用相册内第一张图片。「相册名称」填写图库页面显示的相册名 + help: 为相册手动指定封面;不配置时自动使用相册内第一张图片。「相册」直接从图库插件已存在的分组中选择 children: - - $formkit: text + - $formkit: select name: group - label: 相册名称 + label: 相册 validation: required + clearable: true + searchable: true + action: /apis/console.api.photo.halo.run/v1alpha1/photogroups + requestOption: + method: GET + itemsField: "" + labelField: spec.displayName + valueField: metadata.name + help: 选项自动取自图库插件中已创建的相册分组(需安装并启用图库插件) - $formkit: attachment name: cover label: 封面图 diff --git a/src/photos.html b/src/photos.html index dca0987..7473326 100644 --- a/src/photos.html +++ b/src/photos.html @@ -6,30 +6,27 @@ .container { max-width: 75rem; } - :where(.photos-groups) { - margin: 1.5rem 0; - } - :where(.photos-groups__list, .photos-grid, .photos-card__tags) { - margin: 0; - padding: 0; - list-style: none; - } - :where(.photos-groups__list, .photos-card__tags) { + + /* 相册内视图工具条 */ + :where(.photos-toolbar) { display: flex; + align-items: center; flex-wrap: wrap; gap: 0.75rem; + margin-top: 1rem; } - :where(.photos-group__link) { - display: inline-flex; - gap: 0.25rem; - align-items: baseline; + :where(.photos-back) { color: var(--color-link); + font-size: 0.9rem; } - :where(.photos-group__link):hover { + :where(.photos-back):hover { color: var(--color-link-hover); } - :where(.photos-group.is-active .photos-group__link) { + :where(.photos-album-title) { + margin: 0; + font-size: 1.05rem; font-weight: 600; + flex: 1 1 auto; } /* 相册网格 */ @@ -44,6 +41,20 @@ ); gap: 1.5rem; } + /* 打开某个相册后:只显示该相册,卡片收起、瀑布流展开 */ + :where(.albums-grid.is-album-open) { + display: block; + } + :where(.albums-grid.is-album-open .albums-item) { + display: none; + } + :where(.albums-grid.is-album-open .albums-item.is-active) { + display: block; + } + :where(.albums-item.is-active .albums-card) { + display: none; + } + :where(.albums-card) { display: block; color: var(--color-text); @@ -103,6 +114,9 @@ columns: 3; column-gap: 1rem; } + :where(.photos-masonry[hidden]) { + display: none; + } :where(.photos-masonry > li) { break-inside: avoid; margin: 0 0 1rem; @@ -137,11 +151,6 @@ } /* 预览模式切换 */ - :where(.photos-toolbar) { - display: flex; - justify-content: flex-end; - margin-top: 1rem; - } :where(.photos-preview-toggle) { padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); @@ -161,13 +170,6 @@ color: var(--color-text-muted); padding: 2rem 0; } - :where(.photos-pagination) { - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; - margin-top: 2rem; - } @@ -177,203 +179,167 @@

图库

- + + - - - - +

+ 暂无相册 +