模板介绍
- 名称
- Resources（资源门户）
- 描述
- 专业的资源库站点模板，支持多级栏目分类导航、标签分类、多条件查询筛选；首页可选列表/网格或画廊照片墙两种主题样式，具备权限管理与资源下载有效期等能力。
- 适用场景
-
- 企业数字资产库、品牌素材中心
- 设计 / 运营团队的图片、视频、文档共享
- 图片为主的画廊 / 作品集展示门户
- 对外可检索的资源下载门户
- 按栏目与标签组织的大规模媒体文件管理
模板基本结构
主题目录与页面模板对应关系如下：
| 路径 / 模板 | 说明 |
|---|---|
| templates/index.liquid | 首页（默认）：栏目树、筛选、网格/列表视图、Hero / 栏目卡片 |
| templates/index.gallery.liquid | 首页 · 画廊：照片墙网格；点击进入全屏大图轮播（可左右滑动） |
| templates/channel.liquid | 栏目页（访问后重定向至首页并带 channel 参数） |
| templates/page.liquid | 资源详情页：附件预览与下载 |
| config/settings_schema.json | 站点全局设置（Logo、页头页脚 HTML、API 等） |
| presets/*.html | HTML 预设片段，供设置项默认值或复制参考 |
| statics/about.liquid | 本说明页（/s/about） |
技术栈：Liquid 模板、Tailwind CSS 4、DaisyUI、Stimulus、Alpine.js、Turbo。
快速开始
-
1. 配置站点（全局设置）
在后台 主题设置 中完成：
- 上传 Logo
- 编辑 顶部导航 HTML、页脚 HTML（可使用
preset:header_default.html等） - 选择推荐配色：奢华 / 现代 / 优雅
- 按需设置资源下载链接有效期、API 域名
-
2. 配置首页
编辑首页页面设置：
- 主题样式：选择「首页」或「首页 · 画廊」（详见下方「画廊主题」）
- Hero 区域 HTML：粘贴或引用
preset:hero.html等预设 - 显示栏目导航卡片：勾选后展示一级栏目卡片（需为栏目配置封面）
- 在详情页面打开资源：控制点击资源后是页内预览还是跳转详情页
Hero 与栏目卡片仅在首页根路径（非栏目 path）时显示。
-
3. 添加栏目
在首页下新建子页面，模板选择 栏目页（channel）：
- 填写栏目名称、描述
- 上传 封面图片（用于首页栏目卡片展示）
- 可继续在其下嵌套子栏目或资源
-
4. 添加资源
在栏目下新建子页面，模板选择 详情页（page）：
- 选择资源文件（图片、视频、PDF 等）
- 设置资源标签、描述等字段
- 保存后可在首页按栏目筛选、关键词与高级条件检索
画廊主题
适合以图片展示为主的资源站。首页以照片墙形式陈列资源；点击后进入全屏大图浏览，可左右滑动翻页，并支持查看照片信息与下载。
如何切换
- 打开后台，进入站点的首页编辑页
- 在页面模板 / 主题样式中选择 首页 · 画廊（与默认「首页」二选一）
- 保存并发布后，前台首页即为照片墙布局
若需恢复网格与列表工具栏体验，将首页样式改回 首页 即可。两种样式共用同一套栏目、筛选与资源数据，仅展示方式不同。
照片墙与全屏浏览
- 照片墙：以预览图网格展示当前栏目 / 筛选结果下的资源，突出画面本身
- 全屏大图：点击某张照片进入深色全屏浏览；桌面端可用左右箭头，移动端可左右滑动切换
- 缩略图条：全屏底部可展开 / 收起缩略图，快速跳到指定资源；支持翻到上一页 / 下一页结果
- 照片信息：全屏右上角可打开侧栏，查看元数据并下载；也可从底栏「打开详情」进入完整详情页
与默认首页的差异
| 能力 | 首页（默认） | 首页 · 画廊 |
|---|---|---|
| 资源呈现 | 网格 / 列表，可显示标题、标签等 | 照片墙，突出预览图 |
| 点击资源 | 页内预览侧栏 / 弹层，或跳转详情页（由设置决定） | 进入全屏大图轮播 |
| 批量下载 | 列表视图中勾选下载 | 可切换到列表视图后勾选下载 |
预设样式列表
以下为本主题 presets/ 目录中的 HTML 预设预览，可复制内容到对应站点 / 首页设置中使用。
hero
DaisyUI Hero简洁卡片 Hero，首页默认 preset:hero.html。
Resources Portal
数字资源库
集中管理图片、视频、文档等媒体资源，支持多级栏目、标签筛选与权限控制。
hero3
DaisyUI Carousel多屏轮播 Hero，presets/hero3.html。
hero4（参考样式）
Tailwind UI HeroesTailwind Plus 营销 Hero 参考，可按需复制至首页 Hero HTML。
We’re changing the way people connect
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
