Dify 源码改造：自定义品牌实践

背景

Dify 是一款开源的大语言模型（LLM）应用开发平台，凭借其灵活的插件机制和可视化编排能力，成为企业构建 AI 应用的热门选择。我们希望通过品牌(以品牌 YZHU 为例)定制让 Dify 平台融入其企业形象，强化用户对品牌的认知。

本次变更聚焦于品牌定制，覆盖前端界面（标题、Logo）和嵌入式脚本（交互图标），形成了一套完整的品牌替换流程。这种场景在开源项目二次开发中非常常见：企业需要通过品牌替换和配置调整，让工具更贴合业务需求。本文记录了此次变更的实践细节，希望为其他开发者提供可复用的参考模板。

核心变更的技术细节

本次变更涉及 前端资源 和 嵌入式脚本 两个模块，围绕品牌定制目标展开。以下从技术视角逐一解析关键修改点。

前端资源

前端资源是品牌定制的核心，目标是将 “Dify” 品牌替换为 “YZHU”，并优化视觉和无障碍体验。

1. 页面标题

修改 web/hooks/use-document-title.ts 中的标题拼接逻辑，将 ${prefix}Dify 替换为 ${prefix}YZHU，确保所有页面标题（如 “Home - Dify”）显示为 “Home - YZHU”：

1
2
3

// web/hooks/use-document-title.ts
- const title = `${prefix}Dify`;
+ const title = `${prefix}YZHU`;

测试方法：运行 npm run dev，打开浏览器检查页面标题后缀是否正确更新为 “ - YZHU” 。

2. Logo 描述

更新以下文件中 Logo 图片的 alt 属性，从 “Dify logo” 改为 “YZHU logo”，提升搜索引擎优化（SEO）和无障碍访问体验（屏幕阅读器会读取 alt 文本）：

web/app/account/(commonLayout)/header.tsx
web/app/components/base/logo/dify-logo.tsx

1
2
3

// web/app/components/base/logo/dify-logo.tsx
- <img src="logo.svg" alt="Dify logo" />
+ <img src="logo.svg" alt="YZHU logo" />

注意：alt 属性的修改需确保描述准确，反映品牌名称，有助于搜索引擎抓取和无障碍工具识别。

3. Logo 图片更新

将 web/app/components/base/logo/logo.svg 替换为自定义的 YZHU Logo。确保新 SVG 文件的尺寸与原文件一致，以避免界面布局错乱。示例 SVG 结构：

<!-- web/app/components/base/logo/logo.svg -->
<svg width="200" height="50" viewBox="0 0 200 50">
  <text x="10" y="35" font-size="24" fill="#000">YZHU</text>
</svg>

测试方法：在开发环境中检查 Logo 在不同页面和屏幕尺寸下的显示效果，确保无拉伸或模糊。

嵌入式脚本

嵌入式脚本 embed.js 用于在网页中嵌入 Dify 的交互组件（如聊天窗口）。本次变更更新了脚本中使用的图标文件 closeIcon.svg 和 openIcon.svg，用于 “展开/关闭” 交互按钮。

图标文件更新

在embed.js将 closeIcon.svg 和 openIcon.svg 替换为自定义 SVG 图标。SVG 格式支持矢量缩放，适合高清屏幕，且可通过代码调整样式（例如颜色、大小）。示例：

<!-- closeIcon.svg -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path fill="#FF0000" d="M10 10L14 14M14 10L10 14" />
</svg>

<!-- openIcon.svg -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <path fill="#0000FF" d="M12 5V19M5 12H19" />
</svg>

优势：SVG 图标支持动态修改 fill 属性（例如，切换为暗模式时更改颜色），比字体图标更灵活。

测试方法：在网页中嵌入 embed.js，检查交互按钮的图标是否正确显示，点击时是否触发展开/关闭功能。

后续优化建议

新增品牌配置文件：当前品牌标识（如 “YZHU”）硬编码在代码中，后续修改需逐文件替换。建议新增 brand.config.js：

// web/brand.config.js
export const brand = {
  name: 'YZHU',
  logoPath: '/path/to/logo.svg',
  altText: 'YZHU logo'
};

在代码中引用：

1 2	import { brand } from './brand.config.js'; const title = `${prefix}${brand.name}`;

总结

开源项目的二次开发不一定需要改动核心功能，像本次 Dify 品牌定制这样，通过精细化的文本替换、视觉更新和部署优化，同样能让工具无缝融入企业业务场景。本文提供了一套可复用的品牌替换流程，涵盖前端资源和嵌入式脚本，适合中小型企业或初次接触 Dify 的开发者。

如果你也在进行 Dify 的二次开发，欢迎分享你的经验！希望本文能为你的项目提供参考。