Skip to content

白标#

¥White labelling

Feature availability

Embed requires an embed license. For more information about when to use Embed, as well as costs and licensing processes, refer to Embed on the n8n website.

n8n 白标化是指自定义前端样式和资源，使其与你的品牌标识相匹配。该过程涉及修改 n8n 源代码中的两个包 github.com/n8n-io/n8n：

¥White labelling n8n means customizing the frontend styling and assets to match your brand identity. The process involves changing two packages in n8n's source code github.com/n8n-io/n8n:

¥packages/frontend/@n8n/design-system: n8n's storybook design system with CSS styles and Vue.js components

¥packages/frontend/editor-ui: n8n's Vue.js frontend build with Vite.js

先决条件#

¥Prerequisites

你的开发机器上需要安装以下软件：

¥You need the following installed on your development machine:

  • git
  • Node.js and npm. Minimum version Node 18.17.0. You can find instructions on how to install both using nvm (Node Version Manager) for Linux, Mac, and WSL here. For Windows users, refer to Microsoft's guide to Install NodeJS on Windows.

创建 n8n 的代码仓库 的一个分支，并克隆你的新仓库。

¥Create a fork of n8n's repository and clone your new repository.

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

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

¥Install all dependencies, build and start n8n.

1
2
3
npm install
npm run build
npm run start

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

¥Whenever you make changes you need to rebuild and restart n8n. While developing you can use npm run dev to automatically rebuild and restart n8n anytime you make code changes.

主题颜色#

¥Theme colors

自定义主题颜色，请打开 packages/frontend/@n8n/design-system 并执行以下操作：

¥To customize theme colors open packages/frontend/@n8n/design-system and start with:

在 _tokens.scss 的顶部，你将看到以 HSL 颜色表示的 --color-primary 变量：

¥At the top of _tokens.scss you will find --color-primary variables as HSL colors:

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

在以下示例中，主色更改为 #0099ff。要转换为 HSL，你可以使用 颜色转换工具。

¥In the following example the primary color changes to #0099ff. To convert to HSL you can use a color converter tool.

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

Example Theme Color Customization

主题徽标#

¥Theme logos

要更改编辑器的徽标素材，请查看 packages/frontend/editor-ui/public 并进行替换：

¥To change the editor’s logo assets look into packages/frontend/editor-ui/public and replace:

  • favicon-16x16.png

  • favicon-32x32.png

  • favicon.ico

  • n8n-logo.svg

  • n8n-logo-collapsed.svg

  • n8n-logo-expanded.svg

替换这些徽标素材。n8n 在 Vue.js 组件中使用它们，包括：

¥Replace these logo assets. n8n uses them in Vue.js components, including:

¥MainSidebar.vue: top/left logo in the main sidebar.

  • Logo.vue：在其他组件中重用。

¥Logo.vue: reused in other components.

在以下示例中，替换 n8n-logo-collapsed.svg 和 n8n-logo-expanded.svg 以更新主侧边栏的徽标资源。

¥In the following example replace n8n-logo-collapsed.svg and n8n-logo-expanded.svg to update the main sidebar's logo assets.

Example Logo Main Sidebar

如果你的徽标素材需要不同的尺寸或位置，你可以在 MainSidebar.vue 的底部自定义 SCSS 样式。

¥If your logo assets require different sizing or placement you can customize SCSS styles at the bottom of MainSidebar.vue.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
.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;
	}

}

文本本地化#

¥Text localization

要将所有文本（例如 n8n 或 n8n.io）更改为你的品牌标识，你可以自定义 n8n 的英文国际化文件：packages/frontend/@n8n/i18n/src/locales/en.json。

¥To change all text occurrences like n8n or n8n.io to your brand identity you can customize n8n's English internationalization file: packages/frontend/@n8n/i18n/src/locales/en.json.

n8n 使用 Vue.js 的 Vue 国际化 国际化插件来翻译大部分 UI 文本。要在 en.json 中搜索和替换文本，你可以使用 LinkedIn 本地化消息。

¥n8n uses the Vue I18n internationalization plugin for Vue.js to translate the majority of UI texts. To search and replace text occurrences inside en.json you can use Linked locale messages.

在以下示例中，将 _brand.name 翻译键添加到白标 n8n 的 AboutModal.vue。

¥In the following example add the _brand.name translation key to white label n8n's AboutModal.vue.

1
2
3
4
5
6
{
	"_brand.name": "My Brand",
	//replace n8n with link to _brand.name
	"about.aboutN8n": "About @:_brand.name",
	"about.n8nVersion": "@:_brand.name Version",
}

Example About Modal Localization

窗口标题#

¥Window title

要将 n8n 的窗口标题更改为你的品牌名称，请编辑以下内容：

¥To change n8n's window title to your brand name, edit the following:

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

¥The following example replaces all occurrences of n8n and n8n.io with My Brand in index.html and useDocumentTitle.ts.

1
2
3
4
5
6
<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Replace html title attribute -->
	<title>My Brand - Workflow Automation</title>
</head>

1
2
3
4
5
import { useSettingsStore } from '@/stores/settings.store';

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

Example Window Title Localization