halo-sigs/plugin-injection

plugin-injection

基于Halo 2.0 插件开发快速开始模板开发的代码注入管理插件。 用户可以添加、编辑、删除和启用/禁用HTML代码片段，并通过特定规则匹配页面和注入位置。

开发环境

所需环境：

1. Java 17
2. Node 20
3. pnpm 9
4. Docker (可选)

克隆项目：

git clone [email protected]:halo-sigs/plugin-injection.git

# 或者当你 fork 之后

git clone [email protected]:{your_github_id}/plugin-injection.git

cd path/to/plugin-injection

# macOS / Linux
./gradlew build

# Windows
./gradlew.bat build

使用方式

1. 在 Releases 下载最新的 JAR 文件。
2. 在 Halo 后台的插件管理上传 JAR 文件进行安装。
3. ...

plugin-injection's Issues

实现代码的全局注入

/kind feature

概述

实现代码head和footer的全局注入
目前暂时不增加注入路径的判断

实现方法

参考自模型交互调用listAll读取所有代码自定义模型，根据head内容处理扩展点和footer内容处理扩展点实现代码注入

代码片段自定义模型设计

/kind feature

概述

根据项目需求<希望对HTML代码片段实现增删改查，定义注入页面及位置，启用/禁用功能>,讨论自定义模型成员变量的设计

具体设计

• name：代码片段的名称；类型：String；最大长度：100
• description：描述该代码有什么用；类型：String；最大长度：500
• codeContent: 代码具体内容；类型：String；最大长度：5000
• codePosition: 在一个页面代码片段应注入的位置；类型：enum；允许值：HEADER, FOOTER
• targetPages: 应注入代码片段的页面；类型：String[]
• isEnabled: 代码片段是否启用；类型：boolean

设计插件界面并实现基本增删改查功能

/kind feature

概述

设计插件界面并实现基本增删改查功能

UI具体设计

参考了Halo插件的界面和用户Role的界面设计，包含一个新增表单或者修改表单的界面（这两个功能复用）和一个管理代码主界面。

主界面：

• 显示名称、描述、创建时间和启用状态
• 在搜索框中输入关键词进行搜索
• 通过切换“全部”、“启用”和“禁用”选项，按状态筛选HTML
• 点击新增代码实现增加新的HTML
• 操作菜单包括“删除”、“修改”和“详情”。

新增/修改界面：

• 包含“HTML基本信息”和“HTML代码内容”选项卡。
• 在模态窗口中填写或者修改名称、描述、注入点（Header或Footer）、页面规则和启用状态
• 点击“提交”按钮提交表单
  

建议重构代码注入表单组件

现状
目前代码注入的编辑和创建公用一个表单并且逻辑混在一起来处理

建议

1. 拆分表单组件：
   将表单拆分为单独的视图组件（如 HtmlInjectionForm），这有助于提高代码的可维护性和重用性。通过这样做，你可以将表单的展示逻辑和数据处理逻辑分离，从而使代码更清晰和模块化。

2. 创建独立的创建和编辑组件：
   分别创建 新增 (HtmlInjectionCreationModal)和 编辑 (HtmlInjectionEditionModal)的组件来调用 HtmlInjectionForm，这使得你可以在这些组件中分别处理各自的逻辑，而不必将所有的逻辑混在一个组件中。这样做不仅使代码更具可读性，还能使每个组件专注于自己的职责，从而减少耦合度。

3. 数据回调和逻辑处理：
   通过在 HtmlInjectionForm 中定义 submit 事件来允许调用者通过 @submit="onSubmit" 来得到表单数据进行额外的逻辑处理如调用 API 与服务端交互，而将表单的展示和基本交互逻辑留在 HtmlInjectionForm 中，表单需要渲染的表单项通过如定义 form-state props 来传递并根据条件渲染,参考 Post form-state props。这种做法符合单一职责原则，使得每个组件只做一件事，并做得很好。

优点

• 模块化： 将表单逻辑和显示逻辑分离，代码更具模块化。
• 可维护性： 每个组件专注于自己的职责，逻辑更清晰，易于维护。
• 可复用性： 表单组件 HtmlInjectionForm 可在其他地方重复使用，而不必重复编写代码。

这种结构符合 Vue 的组件化**，也是前端开发中推荐的最佳实践。

参考:

• PostSettingForm
• PostCreationModal
• PostSettingEditModal onSubmit

基于路径的代码注入功能实现

/kind feature

概述

实现代码根据设置路径的注入
目前代码只能全局注入，增加路径匹配逻辑，用户访问特定的页面时，检测到匹配该页面路径的所有启用的代码片段，完成注入

实现方法

参考灯箱插件实现路径匹配