跳至内容

白标#

功能可用性

Embed功能需要Embed许可证。有关何时使用Embed、费用及许可流程的更多信息，请参阅n8n网站上的Embed。

白标n8n意味着自定义前端样式和资源以匹配您的品牌标识。该过程涉及更改n8n源代码中的两个包github.com/n8n-io/n8n：

先决条件#

您需要在开发机器上安装以下内容：

  • git
  • Node.js 和 npm。最低版本要求 Node 18.17.0。您可以在此处找到关于如何使用nvm（Node版本管理器）在Linux、Mac和WSL上安装两者的说明。Windows用户请参考微软的在Windows上安装NodeJS指南。

创建n8n仓库的分支并克隆你的新仓库。

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

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

1
2
3
npm install
npm run build
npm run start

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

主题颜色#

要自定义主题颜色，请打开 packages/design-system 并开始：

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

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

在以下示例中，主色调将更改为#0099ff。如需转换为HSL格式，您可以使用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

主题标志#

要更改编辑器的徽标资源，请查看 packages/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组件中使用它们，包括：

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

Example Logo Main Sidebar

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

 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;
	}

}

文本本地化#

要将所有出现的文本如n8n或n8n.io更改为您的品牌标识，您可以自定义n8n的英文国际化文件：packages/editor-ui/src/plugins/i18n/locales/en.json。

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.

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

窗口标题#

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

The following example replaces all occurrences of n8n and n8n.io with My Brand in index.html and titleChange.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
6
7
8
9
$titleSet(workflow: string, status: WorkflowTitleStatus) {
	// replace n8n prefix
	window.document.title = `My Brand - ${icon} ${workflow}`;
},

$titleReset() {
	// replace n8n prefix
	document.title = `My Brand - Workflow Automation`;
},

Example Window Title Localization

优云智算