★ FEATURED ARTICLE 【免费下载链接】slopsmithSelf-hosted Docker web app for browsing, playing practicing interactive full-band music notation, with an extensive plugin system项目地址https://gitcode.com/gh_mirrors/sl/slopsmith点击查看免费下载Slopsmith 是一款自托管的 Docker Web 应用用于浏览、播放和练习交互式全乐队乐谱吉他、贝斯、键盘、鼓与人声最吸引开发者的正是它强大的插件系统。本教程带你从零开始用约 20 行代码写出第一个 Slopsmith 插件——一份 plugin.json 清单加最小前后端文件重启容器即可在导航栏看到它。 先认识 Slopsmith 插件系统30 秒看懂机制Slopsmith 的插件就是一个放在plugins/目录下的文件夹。启动时插件加载器 plugins/init.py 会自动发现每个子目录中的plugin.json清单文件然后按声明挂载导航链接nav——出现在顶部导航栏独立页面screen.htmlscreen.js——插件自己的完整界面设置面板settings.html——注入到 Settings 页后端 APIroutes.py——注册在/api/plugins/插件id/下的 FastAPI 路由上图Slopsmith 曲库浏览器。顶部导航栏里 “Create from Tab”“Download CDLC” 等入口正是插件通过nav字段自动挂载的结果——你的第一个插件也会出现在这个位置。插件能做的事情非常广泛仓库自带的 3D Highway 就是一个典型例子它把整个播放器视觉换成了带景深相机和灯光的 3D 效果。 快速开始Docker 一键部署 Slopsmith插件开发需要一个运行中的 Slopsmith。整个过程只需三步git clone https://gitcode.com/gh_mirrors/sl/slopsmith cd slopsmith DLC_PATH/path/to/your/songs docker compose up -d克隆仓库并进入目录用DLC_PATH指向你的歌曲文件夹PSARC 或 sloppak 歌曲启动容器后浏览器打开http://localhost:8000上图Slopsmith 播放器主界面——这也是你的插件脚本将要运行其中的环境。 第一个 plugin.json20 行代码的核心插件清单的完整 schema 见 docs/plugin-manifest.schema.json其中只有id和name是必填字段其余全部按需组合。以下是本教程示例的完整plugin.json11 行{ id: my_first_plugin, name: My First Plugin, version: 1.0.0, nav: { label: My First Plugin, screen: plugin-my_first_plugin }, screen: screen.html, script: screen.js, routes: routes.py }各字段速查表字段必填作用id✅唯一标识仅限字母数字、_、.、-用于 API 路径name✅显示名称nav否导航栏链接screen指定点击后跳转的页面 IDscreen否插件页面的 HTML 片段文件script否页面注入后加载的 JavaScriptsettings否设置面板{ html: settings.html }routes否后端路由模块须导出setup(app, context)styles否插件自编译的样式表须位于assets/下tour否新手引导步骤文件JSONtype否设为visualization可进入 Highway 可视化选择器创建插件目录结构plugins/ my_first_plugin/ plugin.json screen.html screen.js routes.py 参考真实案例内置小游戏插件 plugins/minigames/plugin.json 还额外声明了settings.server_files参与设置导出/导入和diagnostics参与诊断包导出都是可选的进阶字段。️ 最小前端screen.html 与 screen.jsscreen.html是一段HTML 片段不能有html/body标签会被注入到div classscreen容器中可直接使用 Tailwind 工具类div classmax-w-3xl mx-auto px-6 pt-24 h1 classtext-3xl font-bold text-white mb-2My First Plugin/h1 p idhello-output classtext-gray-400Loading…/p /divscreen.js运行在全局作用域可访问window.playSong、window.showScreen、window.slopsmith事件总线等核心 API。建议用 IIFE 包裹避免污染全局变量(function () { use strict; fetch(/api/plugins/my_first_plugin/hello) .then((r) r.json()) .then((data) { document.getElementById(hello-output).textContent data.message; }); })();⚙️ 最小后端8 行 routes.py 写出你的 APIroutes.py必须导出一个setup(app, context)函数。context字典提供持久配置目录config_dir、get_dlc_dir()、元数据库meta_db、日志器log等——后端状态请写入config_dir下该目录在 Docker 卷中持久保存def setup(app, context): log context[log] log.info(my_first_plugin ready) app.get(/api/plugins/my_first_plugin/hello) def hello(): return {message: Hello, Slopsmith!}路由统一注册在/api/plugins/{plugin_id}/前缀下天然避免与其他插件冲突。注意日志请一律使用context[log]不要用print()。 安装与验证重启容器即可生效插件安装就是“丢文件夹 重启”没有任何注册步骤确认 4 个文件已放入plugins/my_first_plugin/若用 Docker 卷挂载了插件目录则放入对应宿主机目录重启容器docker compose restart刷新浏览器http://localhost:8000顶部导航栏应出现My First Plugin入口点击导航进入插件页面应显示后端返回的Hello, Slopsmith!也可直接访问http://localhost:8000/api/plugins/my_first_plugin/hello验证 API✅ 看到导航链接 页面内容 API 三处全部正常恭喜你——第一个 Slopsmith 插件就跑通了。⚠️ 常见坑位为什么我的插件没出现现象排查方向导航栏没有链接plugin.json必须是合法 JSONid只允许字母、数字、_、.、-确认容器已重启页面空白screen.html里误写了html/body标签打开浏览器控制台看screen.js报错API 返回 404routes.py缺少setup(app, context)导出路由路径前缀是否写成了/api/plugins/my_first_plugin/样式全丢使用了核心未扫描的 Tailwind 类如任意值text-[11px]需按 docs/plugin-styles.md 自编译样式表并声明styles字段改了代码没生效前后端改动都要重启容器Python 模块有缓存加载过程的所有警告都会以[Plugin]前缀写入服务器日志用docker compose logs查看是最快的排错入口。 进阶路线从入门到完整插件掌握基本骨架后建议按以下路径升级你的插件加设置面板plugin.json加settings: { html: settings.html }片段会被注入 Settings 页加新手引导参考 plugins/app_tour_library/tour.json 的 spotlight 步骤格式声明能力域capabilities让其他插件与核心能感知你的 provider/requester 关系详见 docs/capability-domains.md写 Highway 可视化插件type: visualizationwindow.slopsmithViz_id渲染器工厂参考 plugins/highway_3d/plugin.json参与诊断与备份diagnostics与settings.server_files字段说明见 CLAUDE.md完整插件规范前端全局 API、playSong包装链、WebSocket 协议、load_sibling等都在 CLAUDE.md 中社区插件开发约定见 CONTRIBUTING.md想写小游戏类插件可再读 plugins/minigames/README.md 中的 SDK 用法。从这份 20 行的 plugin.json 起步重启容器你的功能就会出现在 Slopsmith 的导航栏里——这就是它插件系统的全部“仪式感”。赞分享【免费下载链接】slopsmithSelf-hosted Docker web app for browsing, playing practicing interactive full-band music notation, with an extensive plugin system项目地址https://gitcode.com/gh_mirrors/sl/slopsmith点击查看免费下载相关推荐expo-tailcat为 Expo 应用注入原生级 Tailcat 隧道 —— iOS/Android 上的应用内 HTTP 与 WebSocket 直连方案expo tailcat为 Expo 应用注入原生级 Tailcat 隧道 —— iOS/Android 上的应用内 HTTP 与 WebSocket 直连方人工智能AI AgentAI 应用移动开发CLI后端awsm.fish插件开发入门如何编写你的第一个Fish插件awsm.fish插件开发入门如何编写你的第一个Fish插件 想要为现代化的Fish Shell编写插件却不知从何开始awsm.fish项目为你提供了完美文档notepad--插件开发入门编写你的第一个扩展notepad 插件开发入门编写你的第一个扩展 引言为什么选择notepad 插件开发 你是否曾在使用文本编辑器时遇到重复繁琐的操作而感到效率低下是否桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
