ComfyPilotComfyPilot
文档 / 自定义节点 / 关于面板徽章

关于面板徽章

使用 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 界面右上角的齿轮图标进入。