Halo 插件如何为 Console 数据列表扩展自定义显示字段list-item:field:create【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/haloHalo 2 的 Console 中数据列表统一使用 Entity 组件渲染。当你的插件需要把额外信息比如插件的启动时间、文章的某个元数据直接展示在列表行上而不是让用户点进详情页查看时可以定义list-item:field:create扩展点由插件向前端数据列表注入自定义显示字段无需改动 Console 源码。本文覆盖从字段结构、UI 插件入口代码到打包构建的完整操作路径目标结果是在 Console 对应列表的行上新增一列由插件提供的字段。扩展点支持哪些列表根据扩展点文档目前支持扩展的数据列表只有两个插件plugin:list-item:field:create?: (plugin: RefPlugin) | EntityFieldItem[] | PromiseEntityFieldItem[]文章post:list-item:field:create?: (post: RefListedPost) | EntityFieldItem[] | PromiseEntityFieldItem[]回调会收到当前行数据Vue 的Ref返回字段项数组。注意不在上述名单中的列表暂不支持通过该扩展点添加字段不要按其他列表名臆造扩展点。EntityFieldItem 字段结构每个字段项的结构由EntityFieldItem类型定义仓库中的类型声明见 list-entity-field.ts经由 ui-plugin-module.ts 被扩展点引用export interface EntityFieldItem { priority: number; // 优先级越小越靠前 position: start | end; // 显示字段的位置 component: RawComponent; // 字段组件可以使用 halo-dev/components 中提供的 VEntityField也可以自定义 props?: Recordstring, unknown; // 组件的 props permissions?: string[]; // 权限设置 hidden?: boolean; // 是否隐藏 }Console 侧的合并逻辑实现在 use-entity-extension-points.ts插件返回的字段会与内置预设字段合并先按priority升序排序所以priority越小越靠前再按position分成start与end两组渲染。VEntityField 组件文档示例使用halo-dev/components提供的VEntityField作为字段组件也可以传入自定义组件。该组件的 props 定义见 EntityField.vuetitle字段标题description字段描述内容route可选提供后title渲染为RouterLinkwidth/maxWidth可选控制宽度数字按 px 处理字符串原样使用。编写 UI 插件入口UI 插件项目的基本结构如下摘自构建工具 READMEui-plugin/ ├── package.json ├── src/index.ts └── vite.config.ts下面以在插件列表中新增一个显示插件启动时间的字段为例src/index.ts内容来自扩展点文档import { definePlugin } from halo-dev/ui-shared; import { markRaw, type Ref } from vue; import type { Plugin } from halo-dev/api-client; import { VEntityField } from halo-dev/components export default definePlugin({ extensionPoints: { plugin:list-item:field:create: (plugin: RefPlugin) { return [ { priority: 40, position: end, component: markRaw(VEntityField), props: { title: 启动时间 description: plugin.value.status.lastStartTime }, }, ]; }, }, });要改到文章列表只需把扩展点键换成post:list-item:field:create回调参数变为post: RefListedPostprops里取post.value上你需要的字段。markRaw用于把组件标记为不可响应式避免 Vue 对组件对象做深度代理。构建配置UI 插件使用halo-dev/ui-plugin-bundler-kit打包要求 Node.js^18.0.0 || 20.0.0Vite 路径的 peer 依赖为vite与vitejs/plugin-vue。安装npm/yarn/pnpm 任选其一npm install halo-dev/ui-plugin-bundler-kit npm install vite vitejs/plugin-vuevite.config.ts使用构建系统专用入口自 2.26.0 起从包根导入的配置方式已废弃2.27.0 移除import { viteConfig } from halo-dev/ui-plugin-bundler-kit/vite; export default viteConfig({ // provider defaults to plugin vite: {}, });package.json中加入文档推荐的脚本{ scripts: { dev: vite dev --modedevelopment --watch, build: vite build } }构建产物位置相对 UI 插件项目根目录开发模式输出到../build/resources/main/ui生产构建输出到./build/dist。./build/dist产物随插件一起分发后才能被 Halo 加载ui-plugin.json文件名保留给 bundler kit 生成不要自行创建同名文件。文档同时提供 Rsbuild 路径halo-dev/ui-plugin-bundler-kit/rsbuild对新插件而言 Vite 是推荐默认本文不展开。结果验证文档未提供针对该扩展点的独立诊断命令验证方式是直接观察列表在 Console 打开插件列表或文章列表行上出现你定义的列示例中为启动时间取值plugin.value.status.lastStartTime且列位置由priority与position决定即说明扩展点生效。开发调试时注意仓库项目结构文档给出的约束页面入口始终从 Halo 后端地址进入开发环境默认http://localhost:8090/console不能直接访问 Vite Dev Server 的http://localhost:3000/console否则页面内的后端 API 请求会产生跨域问题。已知限制与相关扩展点该扩展点当前仅覆盖插件列表与文章列表两个数据列表且文档签名允许返回PromiseEntityFieldItem[]而源码类型声明为同步返回以文档签名编写即可。列表操作菜单行内按钮是另一套扩展点list-item:operation:create结构与字段扩展点不同见entity-listitem-operation.md不要把两者的返回类型混用。若插件spec.requires是 Halo 2.26.0 及以上的简单MAJOR.MINOR.PATCH目标构建走 ESM 输出缺失、通配或不支持的版本范围会回退为 IIFE 输出并给出警告Halo 2.x 会持续加载这两种产物。【免费下载链接】haloHalo 是一款强大易用的开源建站工具从个人博客、知识库到企业官网、在线商城Halo 都能助您轻松实现一站式满足您的多样化建站需求。项目地址: https://gitcode.com/GitHub_Trending/ha/halo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考