白标定制#

/// 信息 | 功能可用性 Embed 功能需要嵌入许可证。有关何时使用 Embed、成本及授权流程的更多信息，请参阅 n8n 官网上的 Embed 页面。 ///

白标定制 n8n 是指修改前端样式和资源以匹配您的品牌标识。该过程需要修改 n8n 源代码中的两个包 github.com/n8n-io/n8n：

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

先决条件#

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

git
Node.js 和 npm。最低版本要求 Node 18.17.0。Linux、Mac 和 WSL 用户可以通过 nvm (Node Version Manager) 安装，具体步骤参见此处。Windows 用户请参考微软的在 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 这个 Vue.js 国际化插件来翻译大部分 UI 文本。要搜索和替换 en.json 文件中的文本内容，您可以使用 Linked locale messages 功能。

在以下示例中，添加 _brand.name 翻译键来实现 n8n AboutModal.vue 的白标化：

{
	"_brand.name": "我的品牌",
	//将 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 - Workflow Automation</title>
</head>

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

$titleReset() {
	// 替换 n8n 前缀
	document.title = `My Brand - Workflow Automation`;
},