白标定制#

功能可用性 Embed 功能需要有效的 Embed 许可证。有关何时使用 Embed、费用及许可流程的更多信息，请参考 n8n 官网上的 Embed 页面。对 n8n 进行白标定制（white labelling）意味着自定义前端样式和资源，以匹配您的品牌标识。该过程涉及修改 n8n 源码中的两个包 github.com/n8n-io/n8n：

packages/frontend/@n8n/design-system：n8n 的 Storybook 设计系统，包含 CSS 样式和 Vue.js 组件
packages/frontend/editor-ui：基于 Vue.js 和 Vite.js 构建的 n8n 前端项目

前提条件#

您需要在开发机器上安装以下工具：

git
Node.js 和 npm，最低版本为 Node 18.17.0。您可以参考此处使用 nvm（Node Version Manager）在 Linux、Mac 和 WSL 上安装 Node.js 和 npm 的说明。Windows 用户请参阅微软官方指南在 Windows 上安装 NodeJS。

创建 n8n 仓库的一个 fork，并克隆您的新仓库。

1
2

| ``` git clone cd n8n


---|---
安装所有依赖项，构建并启动 n8n。

1 2 3

| ```
npm install
npm run build
npm start

---|--- 每次修改代码后都需要重新构建并重启 n8n。在开发过程中，您可以使用 npm run dev 命令，以便在代码变更时自动重建并重启 n8n。

主题颜色#

要自定义主题颜色，请打开 packages/frontend/@n8n/design-system，并从以下文件开始：

packages/frontend/@n8n/design-system/src/css/_tokens.scss
packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss

在 _tokens.scss 文件顶部，您会看到以 HSL 格式定义的 --color-primary 变量：

| ``` @mixin theme { --color-primary-h: 6.9; --color-primary-s: 100%; --color-primary-l: 67.6%; }


---|---
在以下示例中，主色将更改为 #0099ff。您可以使用 颜色转换工具 将十六进制颜色转换为 HSL 格式。

1 2 3 4

| ```
@mixin theme {
  --color-primary-h: 204;
  --color-primary-s: 100%;
  --color-primary-l: 50%;
}


---|---
[示例主题颜色自定义](https://docs.n8n.io/_images/embed/white-label/color-transition.gif)
## 主题 Logo #
要更改编辑器的 Logo 资源，请查看 packages/frontend/editor-ui/public 并替换以下文件：
  * favicon-16x16.png
  * favicon-32x32.png
  * favicon.ico
  * n8n-logo.svg
  * n8n-logo-collapsed.svg
  * n8n-logo-expanded.svg


替换这些 Logo 资源。n8n 在 Vue.js 组件中使用它们，包括：
  * MainSidebar.vue：主侧边栏顶部/左侧的 Logo。
  * Logo.vue：在其他组件中复用。


在以下示例中，替换 `n8n-logo-collapsed.svg` 和 `n8n-logo-expanded.svg` 可更新主侧边栏的 Logo 资源。
[主侧边栏 Logo 示例](https://docs.n8n.io/_images/embed/white-label/logo-main-sidebar.png)
如果您的 Logo 资源需要不同的尺寸或位置，您可以在 MainSidebar.vue 文件底部自定义 SCSS 样式。

| ``` .logoItem{ display:flex; justify-content:space-between; height:$header-height; line-height:$header-height; margin:0!important; border-radius:0!important; border-bottom:var(--border-width-base)var(--border-style-base)var(--color-background-xlight); cursor:default;

&:hover,&:global(.is-active):hover{ background-color:initial!important; }

*{vertical-align:middle;} .icon{ height:18px; position:relative; left:6px; }

}

---|---

文本本地化#

若要将所有文本（如 n8n 或 n8n.io）更改为您的品牌标识，您可以自定义 n8n 的英文国际化文件：packages/frontend/@n8n/i18n/src/locales/en.json。 n8n 使用 Vue I18n 这个 Vue.js 国际化插件来翻译大部分 UI 文本。要在 en.json 文件中搜索并替换文本内容，可以使用 Linked locale messages（链接的区域消息）功能。在以下示例中，添加 _brand.name 翻译键，以对 n8n 的 AboutModal.vue 组件进行白标处理。

| ``` { "_brand.name":"My Brand", // 将 n8n 替换为指向 _brand.name 的引用 "about.aboutN8n":"关于 @:_brand.name", "about.n8nVersion":"@:_brand.name 版本", }


---|---
[示例：关于模态框本地化](https://docs.n8n.io/_images/embed/white-label/about-modal.png)
### 窗口标题#
要将 n8n 的窗口标题更改为您的品牌名称，请修改以下文件：
  * packages/frontend/editor-ui/index.html
  * packages/frontend/editor-ui/src/composables/useDocumentTitle.ts


以下示例在 `index.html` 和 `useDocumentTitle.ts` 中将所有 `n8n` 和 `n8n.io` 替换为 `My Brand`。

1 2 3 4 5 6

| ```
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- 替换 html title 属性 -->
	<title>My Brand - 工作流自动化</title>
</head>

---|---

| ``` import{useSettingsStore}from'@/stores/settings.store';

// 替换 n8n constDEFAULT_TITLE='My Brand'; constDEFAULT_TAGLINE='Workflow Automation';


---|---
[示例：窗口标题本地化](https://docs.n8n.io/_images/embed/white-label/window-title.png)
与文档聊天
此页面 !Thumbs up有帮助  !Thumbs down无帮助
感谢您的反馈！
提交
 上一页  工作流模板  
由  Material for MkDocs Insiders  提供支持

白标定制#

前提条件#

主题颜色#

文本本地化#

On this page