1.Halo工程的搭建和插件模板工程的搭建
1.1 下载Halo代码并本地启动
Halo的Github仓库地址：https://github.com/halo-dev/halo。
使用git clone git@github.com:halo-dev/halo.git将仓库代码clone在本地。
Halo工程主要包含下面几个部分：
- api，Halo项目的公共API，插件开发就需要依赖API的jar包。
- application，Halo的后端工程Java代码。
- ui，Halo的前端工程，基于Vue进行编写。
启动Halo前端工程，需要先安装npm依赖
npm install
安装npm之后，切换到ui目录下(cd ui)，接着通过npm run dev去启动Halo的前端工程。
~/Desktop/Code/java/my-project/halo/ui/ [main] npm run dev
> dev
> run-p dev:console dev:uc
> dev:console
> vite --host --config ./vite.config.ts
> dev:uc
> vite --host --config ./vite.uc.config.ts
22:49:58
22:49:58
VITE v5.4.1 ready in 828 ms
22:49:58
VITE v5.4.1 ready in 827 ms
➜ Local: http://localhost:3000/console/ 22:49:58
➜ Local: http://localhost:4000/uc/ 22:49:58
➜ Network: http://100.80.70.92:4000/uc/ 22:49:58
➜ Network: http://100.80.70.92:3000/console/ 22:49:58
➜ Network: http://100.85.139.49:4000/uc/ 22:49:58
➜ Network: http://100.85.139.49:3000/console/ 22:49:58
➜ Vue DevTools: Open http://localhost:3000/console/__devtools__/ as a separate window 22:49:58
➜ Vue DevTools: Open http://localhost:4000/uc/__devtools__/ as a separate window 22:49:58
➜ Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools 22:49:58
➜ Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools 22:49:58
➜ press h + enter to show help 22:49:58
➜ press h + enter to show help 22:49:58
[vite-plugin-static-copy] Collected 12 items. 22:49:58
[vite-plugin-static-copy] Collected 12 items. 22:49:58
接着使用./gradlew build去启动打包后端工程。
找到Halo应用的Application启动类即可启动Halo工程，也可以使用java -jar xxx.jar去进行启动。
1.2 下载Halo插件模板
编写插件，可以基于官方给定的https://github.com/halo-dev/plugin-starter的插件开发模板去进行实现。
clone项目之后执行./gradlew build去进行插件的构建，接着就会在build/libs下生成插件的jar包，这个jar包就是我们可以使用的插件jar包。
1.3 插件调试
使用Intellij IDEA启动的话，可以添加启动时参数，指定插件的位置，这样Halo工程在启动时就会自动加载我们实现的插件。
添加的参数如下，并将halo.plugin.fixed-plugin-path替换成为真实的插件地址，比如/Users/jianchaojia/Desktop/Code/java/my-project/halo-backup-plugin/build/libs/plugin-starter-1.0.0-SNAPSHOT.jar。
--halo.plugin.runtime-mode=development --halo.plugin.fixed-plugin-path=/path/to/plugin-starter-1.0.0-SNAPSHOT.jar
也可以使用java -jar的方式去进行启动，基于如下的命令在本地启动Halo项目。
java -jar halo-2.20.9-SNAPSHOT.jar --halo.plugin.runtime-mode=development --halo.plugin.fixed-plugin-path=/path/to/plugin-starter-1.0.0-SNAPSHOT.jar
在Halo项目启动之后，就可以在管理页面的底部新出现一个"示例页面"的页面，说明我们刚刚指定的插件已经生效。
在启动的日志当中也可以找到"插件启动成功！“的字样。
1.4 插件实现备份页面新增Tab栏
对于插件开发，可以参考Halo的官方文档：https://docs.halo.run/developer-guide/plugin/extension-points/ui/和https://docs.halo.run/developer-guide/plugin/extension-points/server/。
我们想要实现，在备份页面上新增一个Tab栏，我们可以在index.ts文件的extensionPoints当中自定义内容，比如我这里新增一个tab栏。
import {definePlugin} from "@halo-dev/console-shared";
import type {BackupTab} from "@halo-dev/console-shared";
import HomeView from "./views/HomeView.vue";
export default definePlugin({
components: {},
routes: [
],
extensionPoints: {
"backup:tabs:create": (): BackupTab[] | Promise<BackupTab[]> => {
return [
{
id: "schedule-backup", // URL上的tab参数信息
label: "定时备份", // 页面上展示的Tab标签名称
component: HomeView,
permissions: [],
},
];
},
},
});
接着，重新使用./gradlew build打包一份插件并重启我们本地的Halo工程，重新打开Halo在备份页面，就出现了我们新增的Tab栏"定时备份”。
评论