Awesome
plugin-photos
Halo 2.0 的相册管理插件, 支持在 Console 进行管理以及为主题端提供 /photos
页面路由。
使用方式
- 下载,目前提供以下两个下载方式:
- GitHub Releases:访问 Releases 下载 Assets 中的 JAR 文件。
- Halo 应用市场:https://halo.run/store/apps/app-BmQJW
- 安装,插件安装和更新方式可参考:https://docs.halo.run/user-guide/plugins
- 安装完成之后,访问 Console 左侧的图库菜单项,即可进行管理。
- 前台访问地址为
/photos
,需要注意的是,此插件需要主题提供模板(photos.html)才能访问/photos
。
开发环境
git clone git@github.com:halo-sigs/plugin-photos.git
# 或者当你 fork 之后
git clone git@github.com:{your_github_id}/plugin-photos.git
cd path/to/plugin-photos
# macOS / Linux
./gradlew pnpmInstall
# Windows
./gradlew.bat pnpmInstall
# macOS / Linux
./gradlew build
# Windows
./gradlew.bat build
修改 Halo 配置文件:
halo:
plugin:
runtime-mode: development
classes-directories:
- "build/classes"
- "build/resources"
lib-directories:
- "libs"
fixedPluginPath:
- "/path/to/plugin-photos"
主题适配
目前此插件为主题端提供了 /photos
路由,模板为 photos.html
,也提供了 Finder API,可以将图库列表渲染到任何地方。
模板变量
路由信息
- 模板路径:/templates/photos.html
- 访问路径:/photos | /photos/page/{page}
路由可选参数
group: 图片分组名称, 对应 #PhotoGroupVo.metadata.name
示例:/photos?group=photo-group-UEcvi | /photos/page/1?group=photo-group-UEcvi
变量
groups
变量类型
List<#PhotoGroupVo>
示例
<th:block th:each="group : ${groups}">
<h2 th:text="${group.spec.displayName}"></h2>
<ul>
<li th:each="photo : ${group.photos}">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
</th:block>
变量
photos
变量类型
#UrlContextListResult<PhotoVo>
示例
<ul>
<li th:each="photo : ${photos.items}">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
<div th:if="${photos.hasPrevious() || photos.hasNext()}">
<a th:href="@{${photos.prevUrl}}">
<span>上一页</span>
</a>
<span th:text="${photos.page}"></span>
<a th:href="@{${photos.nextUrl}}">
<span>下一页</span>
</a>
</div>
Finder API
groupBy()
描述
获取全部分组内容。
参数
无
返回值
List<#PhotoGroupVo>
示例
<th:block th:each="group : ${photoFinder.groupBy()}">
<h2 th:text="${group.spec.displayName}"></h2>
<ul>
<li th:each="photo : ${group.photos}">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
</th:block>
listAll()
描述
获取全部图库内容。
参数
无
返回值
List<#PhotoVo>
示例
<ul>
<li th:each="photo : ${photoFinder.listAll()}" style="display: inline;">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
listBy(group)
描述
根据分组获取图片列表。
参数
group: string
- 图片分组名称, 对应 PhotoGroupVo.metadata.name
返回值
List<#PhotoVo>
示例
<ul>
<li th:each="photo : ${photoFinder.listBy('photo-group-UEcvi')}" style="display: inline;">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
list(page, size)
描述
根据分页参数获取图片列表。
参数
page: int
- 分页页码,从 1 开始size: int
- 分页条数
返回值
示例
<th:block th:with="photos = ${photoFinder.list(1, 10)}">
<ul>
<li th:each="photo : ${photos.items}">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
<div>
<span th:text="${photos.page}"></span>
</div>
</th:block>
list(page, size, group)
描述
根据分页参数及图片所在组获取图片列表。
参数
page: int
- 分页页码,从 1 开始size: int
- 分页条数group: string
- 图片分组名称, 对应 PhotoGroupVo.metadata.name
返回值
示例
<th:block th:with="photos = ${photoFinder.list(1, 10, 'photo-group-UEcvi')}">
<ul>
<li th:each="photo : ${photos.items}">
<img th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}" width="280">
</li>
</ul>
<div>
<span th:text="${photos.page}"></span>
</div>
</th:block>
类型定义
PhotoVo
{
"metadata": {
"name": "string", // 唯一标识
"labels": {
"additionalProp1": "string"
},
"annotations": {
"additionalProp1": "string"
},
"creationTimestamp": "2022-11-20T13:06:38.512Z", // 创建时间
},
"spec": {
"displayName": "string", // 图片名称
"description": "string", // 图片描述
"url": "string", // 图片链接
"cover": "string", // 封面链接
"priority": 0, // 优先级
"groupName": "string", // 分组名称,对应分组 metadata.name
},
}
PhotoGroupVo
{
"metadata": {
"name": "string", // 唯一标识
"labels": {
"additionalProp1": "string"
},
"annotations": {
"additionalProp1": "string"
},
"creationTimestamp": "2022-11-20T13:06:38.512Z", // 创建时间
},
"spec": {
"displayName": "string", // 分组名称
"priority": 0, // 分组优先级
},
"status": {
"photoCount": 0, // 分组下图片数量
},
"photos": "List<#PhotoVo>", // 分组下所有图片列表
}
ListResult<PhotoVo>
{
"page": 0, // 当前页码
"size": 0, // 每页条数
"total": 0, // 总条数
"items": "List<#PhotoVo>", // 图片列表数据
"first": true, // 是否为第一页
"last": true, // 是否为最后一页
"hasNext": true, // 是否有下一页
"hasPrevious": true, // 是否有上一页
"totalPages": 0 // 总页数
}
UrlContextListResult<PhotoVo>
{
"page": 0, // 当前页码
"size": 0, // 每页条数
"total": 0, // 总条数
"items": "List<#PhotoVo>", // 图片列表数据
"first": true, // 是否为第一页
"last": true, // 是否为最后一页
"hasNext": true, // 是否有下一页
"hasPrevious": true, // 是否有上一页
"totalPages": 0, // 总页数
"prevUrl": "string", // 上一页链接
"nextUrl": "string" // 下一页链接
}
Annotations 元数据适配
根据 Halo 的元数据表单定义文档和模型元数据文档,Halo 支持为部分模型的表单添加元数据表单,此插件同样适配了此功能,如果你作为主题开发者,需要为链接或者链接分组添加额外的字段,可以参考上述文档并结合下面的 TargetRef 列表进行适配。
对应模型 | group | kind |
---|---|---|
图库 | core.halo.run | Photo |
图库分组 | core.halo.run | PhotoGroup |