NocoBase 自定义品牌（Custom Brand）插件完全指南：登录页品牌、关于菜单与 favicon 配置

NocoBase 自定义品牌（Custom Brand）插件完全指南：登录页品牌、关于菜单与 favicon 配置

【免费下载链接】nocobaseNocoBase is an open-source AI + no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase

本文是 NocoBase 系统管理中「自定义品牌」功能的实操指南。它围绕 docs/docs/cn/system-management/custom-brand/index.md 展开，讲解如何通过自定义品牌插件替换系统默认的 "NocoBase" 品牌文字、配置页面右上角「关于」菜单内容，以及设置网站 favicon。读完本文，你将掌握该插件的激活方式、配置入口、两个核心配置项（品牌与关于）的 HTML 用法，并理解这些配置在客户端源码中的实际生效机制。

介绍：品牌名称显示在哪里

NocoBase 系统默认的品牌名称是 "NocoBase"，主要显示在以下三个位置：

1. 页面左上角的 Logo（位置 1）
2. 页面右上角的「关于」菜单（位置 2）
3. 登录页面底部的品牌文字（位置 3）

其中：

• 位置 1（Logo）可通过系统设置中的 Logo 选项进行配置，属于系统设置插件的能力，不在本文插件范围内；
• 位置 2（关于菜单）与位置 3（登录页品牌文字）可通过本文介绍的「自定义品牌」插件进行配置。

从源码看，登录页底部品牌文字由 packages/core/client/src/powered-by/index.tsx 中的PoweredBy组件渲染。当@nocobase/plugin-custom-brand插件激活并配置了brand选项时，该组件会优先渲染插件配置的内容；未配置时则回退到默认的Powered by <a>NocoBase</a>链接（链接根据语言环境指向 nocobase.com 或 nocobase.com/cn）。

插件属性与激活

自定义品牌插件在仓库中的包名为@nocobase/plugin-custom-brand，其文档元信息位于 docs/docs/cn/plugins/@nocobase/plugin-custom-brand/index.md，关键属性如下：

由于defaultEnabled: false，该插件需要先激活才能使用。激活后，页面右上角会出现「自定义品牌」菜单入口。

使用说明：配置入口

插件激活后，点击页面右上角的「自定义品牌」菜单即可进入配置页面。配置页面包含两个核心配置项：

• 品牌（Brand）：用于设置登录页面底部的文字（即上文的位置 3）
• 关于（About）：用于设置页面右上角的菜单内容（即上文的位置 2）

配置项详解

品牌（Brand）

该配置项对应登录页底部的品牌文字。从源码 packages/core/client/src/powered-by/index.tsx 可以看出：

__html: parseHTML( customBrandPlugin?.options?.options?.brand || `Powered by <a href="${urls[i18n.language] || urls['en-US']}" target="_blank">NocoBase</a>`, { appVersion }, )

也就是说，只要在插件配置中设置了brand，登录页底部就会渲染该 HTML 内容；否则显示默认的 "Powered by NocoBase"。

关于（About）

该配置项对应页面右上角的「关于」菜单。源码 packages/core/client/src/user/Help.tsx 中的Help组件展示了其生效逻辑：

• 当插件配置了about时，右上角图标从默认的下拉菜单（包含主页、手册、许可协议等链接）切换为 Popover 弹层，弹层内容渲染配置的 HTML；
• 未配置时，右上角图标保持默认的「帮助」下拉菜单。

if (customBrandPlugin?.options?.options?.about) { const appVersion = `<span class="nb-app-version">v${data?.data?.version}</span>`; const content = parseHTML(customBrandPlugin.options.options.about, { appVersion }); // 渲染 Popover，rootClassName 为 "nb-about" }

HTML 格式支持与版本占位符

品牌与关于两个配置项均支持使用 HTML 格式，便于灵活设置内容，例如插入链接、图片、自定义样式等。两个渲染点都调用了parseHTML(content, { appVersion })，其中appVersion是自动注入的版本占位符，渲染为当前应用版本号（如v1.x.x）。

如果只需简单修改文字，可以直接在现有内容的基础上进行修改，例如保留默认的品牌链接结构、仅替换文字与跳转地址，无需从零编写 HTML。

设置网站 favicon

除了品牌与关于两项文字类配置，插件还支持设置网站图标 favicon。配置 favicon 后，浏览器标签页、收藏夹中显示的网站图标将随之替换，用于进一步统一品牌形象。

底层原理：配置如何生效

自定义品牌插件的配置存储在插件的options中，客户端在运行时通过usePlugin('@nocobase/plugin-custom-brand')读取插件实例，并访问options.options.brand与options.options.about：

• 品牌文字渲染链路：PoweredBy组件 →parseHTML(brand)→ 登录页底部nb-brand区域；
• 关于菜单渲染链路：Help组件 → 判断about是否存在 → 渲染nb-aboutPopover 或默认帮助下拉菜单。

两个组件都位于 packages/core/client/src 目录，其中PoweredBy在 powered-by/index.tsx，Help在 user/Help.tsx，可供开发者深入阅读与二次开发参考。

常见场景速查

小结

NocoBase 的自定义品牌插件将品牌定制收敛为「品牌文字、关于菜单、favicon」三个维度：登录页底部品牌与右上角「关于」菜单均支持 HTML 内容与版本占位符，Logo 则由系统设置管理。通过本文的配置步骤与源码级说明，你可以快速完成面向客户的品牌替换，并在 packages/core/client/src/powered-by/index.tsx 与 packages/core/client/src/user/Help.tsx 中继续探索其渲染细节。

【免费下载链接】nocobaseNocoBase is an open-source AI + no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase