图库管理

图库管理

16,037
7,458

图库管理模块

下载

安装到 Halo

方式一

如果安装了应用市场插件,可以直接在应用市场中搜索图库管理并安装。

方式二

输入你的 Halo 站点地址,点击安装之后会重定向到你 Halo 后台并自动安装,Halo 的版本需要 >= 2.6.0。

方式三

点击手动下载,然后在 Console 上传。

plugin-photos

Halo 2.0 的相册管理插件, 支持在 Console 进行管理以及为主题端提供 /photos 页面路由。

使用方式

  1. 下载,目前提供以下两个下载方式:
  2. 安装,插件安装和更新方式可参考:https://docs.halo.run/user-guide/plugins
  3. 安装完成之后,访问 Console 左侧的图库菜单项,即可进行管理。
  4. 前台访问地址为 /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

变量类型

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>

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)

描述

根据分组获取图片列表。

参数
  1. 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)

描述

根据分页参数获取图片列表。

参数
  1. page: int - 分页页码,从 1 开始
  2. size: int - 分页条数
返回值

ListResult<PhotoVo>

示例
<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)

描述

根据分页参数及图片所在组获取图片列表。

参数
  1. page: int - 分页页码,从 1 开始
  2. size: int - 分页条数
  3. group: string - 图片分组名称, 对应 PhotoGroupVo.metadata.name
返回值

ListResult<PhotoVo>

示例
<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

{
  "page": 0,                                   // 当前页码
  "size": 0,                                   // 每页条数
  "total": 0,                                  // 总条数
  "items": "List<#PhotoVo>",                   // 图片列表数据
  "first": true,                               // 是否为第一页
  "last": true,                                // 是否为最后一页
  "hasNext": true,                             // 是否有下一页
  "hasPrevious": true,                         // 是否有上一页
  "totalPages": 0                              // 总页数
}

安装到 Halo

方式一

如果安装了应用市场插件,可以直接在应用市场中搜索图库管理并安装。

方式二

输入你的 Halo 站点地址,点击安装之后会重定向到你 Halo 后台并自动安装,Halo 的版本需要 >= 2.6.0。

方式三

点击手动下载,然后在 Console 上传。

这是一个开源应用,我们推荐优先在开源仓库中提交 issue,以便开发者更好地接收和跟进问题。

去提交 issue