Overview && 在线 Demo 与源码

skill当前比较🔥,我个人也写了很多skill,每一个skill都放到github感觉比较重,不是很有必要,所以单独开发了一个halo的plugin用于展示,过程中借鉴各种skillhub。

在线展示:https://boommanpro.cn/skill

插件源码:halo-plugin-skill-showcase

配套主题模板:halo-theme-chirpy 的 skill 模板

如果你也在用 Halo,并且手里攒了一堆 skill,欢迎直接装这个插件,把作品集当成内容和博客一起管理。

三种 Skill 形态

插件把 skill 抽象成三种内容形态,前台分别用合适的方式展示:

  • Markdown 文档:直接在管理端写/导入 markdown,前台渲染成图文文档

  • ZIP 网站包:包含 index.html,前台用 iframe 直接打开成可交互演示站

  • ZIP 项目包:以 SKILL.md 作为入口,前台用文件树加代码查看器浏览

  • 外链:只填一个 URL,前台一键跳转

管理端做了哪些事

插件装到后台后,在「插件」页比原生页面多出两个标签,用来管理数据和展示形态:

  • Skill 管理:增删改查、发布/下架、搜索、分类筛选、标签内联编辑

  • Category 管理:维护分类的显示名、图标和排序

  • ZIP 支持在线更新:重新上传替换,slug 不变

  • 所有类型都支持预览:Markdown 直接预览,ZIP 在线预览,外链跳转

image-pspU.png

技术实现

做这个插件的过程里,实现细节:

  • 路由复用 Halo 官方的 @Component + RouterFunction 模式,插件安装后自动注册到根上下文

  • ZIP 上传后解压并解析入口文件,优先级是 SKILL.md → README.md → 首个 md

  • 主题模板通过 SkillFinder 这个 Bean 读取数据,所以可以被任意主题复用

  • Markdown 渲染、代码高亮、iframe 预览都在前台用现成库完成