Skip to content

白色标签

功能可用性

嵌入需要嵌入许可证。有关何时使用嵌入以及费用和许可流程的更多信息，请参阅n8n 网站上的“嵌入” 。

n8n 白标意味着您可以根据自己的品牌形象定制前端样式和资源。此过程涉及更改 n8n 源代码github.com/n8n-io/n8n中的两个软件包：

先决条件

您需要在开发机器上安装以下软件：

  • git
  • Node.js 和 npm。最低版本 Node 18.17.0。您可以在此处找到有关如何在 Linux、Mac 和 WSL 上使用 nvm（Node 版本管理器）安装两者的说明。对于 Windows 用户，请参阅 Microsoft 的“在 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。在开发过程中，您可以使用此功能在每次更改代码时自动重建并重新启动 n8n。

主题颜色

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

在顶部你会发现变量是 HSL 颜色：

1
2
3
4
@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%;

主题颜色自定义示例

主题徽标

要更改编辑器的徽标资产，请查看packages/editor-ui/public并替换：

  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • n8n-logo.svg
  • n8n-logo-collapsed.svg
  • n8n-徽标-扩展.svg

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

在以下示例中，替换并更新主侧边栏的徽标资产。

示例徽标主侧边栏

如果您的徽标资产需要不同的尺寸或位置，您可以在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 的英语国际化文件： packages/editor-ui/src/plugins/i18n/locales/en.json 。

n8n 使用Vue.js 的Vue I18n国际化插件来翻译大部分 UI 文本。要搜索和替换其中的文本，您可以使用链接的语言环境消息。

在以下示例中，将翻译键添加到白标 n8n 的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",
}

关于模态定位的示例

窗口标题

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

以下示例将所有出现的and替换为in and 。

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

窗口标题本地化示例