白标功能#

功能可用性说明

嵌入功能需要嵌入许可证。有关使用场景、费用及授权流程的详细信息，请参阅 n8n 官网上的嵌入功能说明。

n8n 的白标功能是指通过定制前端样式和资源来匹配您的品牌形象。该流程需要修改 n8n 源代码中的两个模块（github.com/n8n-io/n8n）：

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

前置要求#

开发环境需预装以下组件：

git
Node.js 与 npm（最低版本 Node 18.17.0）。Linux、Mac 和 WSL 用户可通过 nvm（Node 版本管理器）安装，具体步骤参见此指南。Windows 用户请参考微软官方文档在 Windows 上安装 NodeJS。

请先 Fork n8n 代码库，然后克隆您新建的代码库。

git clone https://github.com/<your-organization>/n8n.git n8n cd n8n

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

npm install npm run build npm run start

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

主题色彩#

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

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

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

在以下示例中，主色调将变为 #0099ff。如需转换为 HSL 格式，您可使用颜色转换工具。

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

主题颜色定制示例

主题标识#

要修改编辑器的标识资源，请查看 packages/frontend/editor-ui/public 目录并替换以下文件：

favicon-16x16.png
favicon-32x32.png
favicon.ico
n8n-logo.svg
n8n-logo-collapsed.svg
n8n-logo-expanded.svg

n8n 在 Vue.js 组件中使用这些标识资源，包括：

MainSidebar.vue：主侧边栏顶部/左侧的标识
Logo.vue：在其他组件中复用的标识

以下示例通过替换 n8n-logo-collapsed.svg 和 n8n-logo-expanded.svg 来更新主侧边栏的标识资源：

若标识资源需要调整尺寸或位置，可在 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 国际化插件翻译大部分界面文本。要搜索并替换 en.json 中的文本内容，可使用链接区域设置消息。

以下示例通过添加 _brand.name 翻译键来实现 n8n AboutModal.vue 的白标化。

{
	"_brand.name": "My Brand",
	//replace n8n with link to _brand.name
	"about.aboutN8n": "About @:_brand.name",
	"about.n8nVersion": "@:_brand.name Version",
}

关于模态本地化示例

窗口标题#

要将n8n窗口标题更改为您的品牌名称，请编辑以下文件：

以下示例将在index.html和useDocumentTitle.ts文件中将所有出现的n8n和n8n.io替换为My Brand。

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Replace html title attribute -->
	<title>My Brand - Workflow Automation</title>
</head>

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

// replace n8n
const DEFAULT_TITLE = 'My Brand';
const DEFAULT_TAGLINE = 'Workflow Automation';

示例窗口标题本地化

前置要求#​

主题色彩#​

主题标识#​

文本本地化#​

窗口标题#​

前置要求#

主题色彩#

主题标识#

文本本地化#

窗口标题#