白标定制#

功能可用性

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

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

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

前置条件#

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

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

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

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

Install all dependencies, build and start n8n.

npm install
npm run build
npm run start

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

主题颜色#

要自定义主题颜色，请打开packages/frontend/@n8n/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/frontend/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/frontend/@n8n/i18n/src/locales/en.json。

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

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

{
	"_brand.name": "My Brand",
	//replace n8n with link to _brand.name
	"about.aboutN8n": "About @:_brand.name",
	"about.n8nVersion": "@:_brand.name Version",
}

窗口标题#

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Replace html title attribute -->
	<title>My Brand - Workflow Automation</title>
</head>

import { useSettingsStore } from '@/stores/settings.store';

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

此页面是否

💬 微信

🚀 与作者交流

关注公众号

n8n实战笔记
📚 教程 💡 案例 🔧 技巧

添加微信

1对1 专业指导
⚡ 快答 🎯 定制 🚀 支持

添加后请直说来意，看到会回复。谢谢