文档 /
自定义节点 /
关于面板徽章
关于面板徽章
使用 About Panel Badges API 为 ComfyUI 关于面板添加带标签、URL 和图标的自定义徽章,并链接到文档、GitHub 或扩展资源。
自定义节点
javascript_about_panel_badges 更新于 2026-11-04
关于面板徽章
使用 About Panel Badges API 为 ComfyUI 关于面板添加带标签、URL 和图标的自定义徽章,并链接到文档、GitHub 或扩展资源。
关于面板徽章 API 允许扩展为 ComfyUI 的关于页面添加自定义徽章。这些徽章可以显示有关你的扩展的信息,并包含指向文档、源代码或其他资源的链接。
基本用法
app.registerExtension({
name: "MyExtension",
aboutPageBadges: [
{
label: "Documentation",
url: "https://example.com/docs",
icon: "icon-[lucide--file]"
},
{
label: "GitHub",
url: "https://github.com/username/repo",
icon: "icon-[lucide--github]"
}
]
});
徽章配置
每个徽章都需要以下所有属性:
{
label: string, // 徽章上显示的文本
url: string, // 点击徽章时打开的 URL
icon: string // 图标类名(例如 "icon-[lucide--github]")
}
图标选项
徽章图标使用 icon-[lucide--<icon-name>] 格式的 Lucide 图标类名。以下是一些常用图标:
- 文档:
icon-[lucide--file]或icon-[lucide--book-open] - GitHub:
icon-[lucide--github] - 外部链接:
icon-[lucide--external-link] - 信息:
icon-[lucide--info] - 下载:
icon-[lucide--download] - 网站:
icon-[lucide--globe]
这些类名在前端构建时生成,因此只能使用前端自身用到的 Lucide 图标。如果图标无法显示,请换一个图标,或在扩展加载的样式表中定义自己的图标类名。
pi pi-file 等 PrimeIcons 类名目前仍可显示,但正在逐步淘汰,请勿在新代码中使用。请参阅 PrimeVue 移除迁移指南。
示例
app.registerExtension({
name: "BadgeExample",
aboutPageBadges: [
{
label: "Website",
url: "https://example.com",
icon: "icon-[lucide--globe]"
},
{
label: "Donate",
url: "https://example.com/donate",
icon: "icon-[lucide--heart]"
},
{
label: "Documentation",
url: "https://example.com/docs",
icon: "icon-[lucide--book-open]"
}
]
});
徽章会显示在设置对话框的关于面板中,可以通过 ComfyUI 界面右上角的齿轮图标进入。