白标处理#

功能可用性

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

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

packages/design-system：n8n 的 storybook 设计系统，包含 CSS 样式和 Vue.js 组件
packages/editor-ui：n8n 的 Vue.js 前端构建，使用 Vite.js

先决条件#

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

git
Node.js 和 npm。最低版本 Node 18.17.0。您可以在这里找到使用 nvm（Node 版本管理器）为 Linux、Mac 和 WSL 安装两者的说明。对于 Windows 用户，请参考 Microsoft 的在 Windows 上安装 NodeJS 指南。

创建 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/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/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/editor-ui/src/plugins/i18n/locales/en.json。

n8n 使用 Vue I18n 国际化插件来翻译大部分 UI 文本。要搜索和替换 en.json 中的文本出现，您可以使用链接的区域设置消息。

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

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

窗口标题#

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

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

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

$titleSet(workflow: string, status: WorkflowTitleStatus) {
	// 替换 n8n 前缀
	window.document.title = `My Brand - ${icon} ${workflow}`;
},

$titleReset() {
	// 替换 n8n 前缀
	document.title = `My Brand - 工作流自动化`;
},