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主要显示在以下三个位置页面左上角的 Logo位置 1页面右上角的「关于」菜单位置 2登录页面底部的品牌文字位置 3其中位置 1Logo可通过系统设置中的 Logo 选项进行配置属于系统设置插件的能力不在本文插件范围内位置 2关于菜单与位置 3登录页品牌文字可通过本文介绍的「自定义品牌」插件进行配置。从源码看登录页底部品牌文字由 packages/core/client/src/powered-by/index.tsx 中的PoweredBy组件渲染。当nocobase/plugin-custom-brand插件激活并配置了brand选项时该组件会优先渲染插件配置的内容未配置时则回退到默认的Powered by aNocoBase/a链接链接根据语言环境指向 nocobase.com 或 nocobase.com/cn。插件属性与激活自定义品牌插件在仓库中的包名为nocobase/plugin-custom-brand其文档元信息位于 docs/docs/cn/plugins/nocobase/plugin-custom-brand/index.md关键属性如下属性值说明displayName自定义品牌界面中展示的插件名称packageNamenocobase/plugin-custom-brand插件包名supportedVersions1.x / 2.x支持版本isFreefalse商业插件非免费builtInfalse非内置插件defaultEnabledfalse默认未启用需手动激活editionLevel1商业版授权等级由于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_blankNocoBase/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 classnb-app-versionv${data?.data?.version}/span; const content parseHTML(customBrandPlugin.options.options.about, { appVersion }); // 渲染 PopoverrootClassName 为 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.tsxHelp在 user/Help.tsx可供开发者深入阅读与二次开发参考。常见场景速查需求操作替换登录页底部 Powered by NocoBase 文字激活插件 → 配置「品牌」为自定义 HTML如公司名称 官网链接自定义右上角「关于」菜单内容激活插件 → 配置「关于」为自定义 HTML如公司介绍、版本信息保留默认链接、仅修改文字在默认 HTML 基础上直接修改文字与 href修改页面左上角 Logo前往系统设置配置 Logo 选项设置浏览器标签页图标激活插件后在配置页面设置 favicon小结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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
