Dify 前端去除 Logo 与社区入口改造方案

1、目标

在本地 WSL 部署的 Dify 中，对前端页面做轻量定制：

• 去掉左上角的 Dify Logo。
• 去掉应用首页左下角的“参与社区”区域，以及下面的 GitHub、Discord、论坛入口。
• 去掉右上角用户菜单中的“查看帮助文档”“支持”“路线图”“GitHub”“关于”。
• 保留页面底部中间的“拖放 DSL 文件到此处创建应用”提示。

当前源码路径：

/home/xle/workspaces/dify

当前 Docker 部署路径：

/home/xle/workspaces/dify/docker

当前访问地址：

http://localhost/apps

原始图片样式：

改造后样式：

主要改造内容为：

2、涉及文件

主要修改以下前端源码文件：

web/app/components/header/index.tsx
web/app/components/apps/list.tsx
web/app/components/header/account-dropdown/index.tsx

相关但不一定需要修改的文件：

web/app/components/apps/footer.tsx
web/app/components/base/logo/dify-logo.tsx
web/app/components/header/account-dropdown/support.tsx
web/app/components/header/account-about/index.tsx

3、改造点一：去掉左上角 Dify Logo

文件

web/app/components/header/index.tsx

修改说明

当前 Header 中会渲染 Logo、分隔符 / 和工作区选择器。需要去掉 Logo 和 /，只保留工作区选择器。

需要删除或注释的代码：

{renderLogo()}
<div className="mx-1.5 shrink-0 font-light text-divider-deep">/</div>

保留：

<WorkspaceProvider>
  <WorkplaceSelector />
</WorkspaceProvider>

注意

该文件里移动端和桌面端各有一处类似结构，建议两处都处理，否则窄屏或移动端仍可能显示 Logo。

4、改造点二：去掉应用首页“参与社区”区域

文件

web/app/components/apps/list.tsx

修改说明

当前应用首页底部通过 Footer 组件显示“参与社区”区域。

需要删除或注释导入：

import Footer from './footer'

需要删除或注释渲染逻辑：

{!systemFeatures.branding.enabled && (
  <Footer />
)}

这样可以移除：

参与社区
与团队成员、贡献者和开发者在不同频道中交流
GitHub / Discord / Forum 图标

保留项：拖放 DSL 文件提示

不要删除下面这段逻辑：

{isCurrentWorkspaceEditor && (
  <div
    className={`flex items-center justify-center gap-2 py-4 ${dragging ? 'text-text-accent' : 'text-text-quaternary'}`}
    role="region"
    aria-label={t('newApp.dropDSLToCreateApp', { ns: 'app' })}
  >
    <span className="i-ri-drag-drop-line size-4" />
    <span className="system-xs-regular">{t('newApp.dropDSLToCreateApp', { ns: 'app' })}</span>
  </div>
)}

这段对应页面底部中间的：

拖放 DSL 文件到此处创建应用

5、改造点三：去掉右上角用户菜单中的帮助与关于区域

文件

web/app/components/header/account-dropdown/index.tsx

目标

点击右上角用户头像后，去掉以下菜单项：

查看帮助文档
支持
路线图
GitHub
关于

保留以下菜单项：

账户
设置
主题
登出

当前本地源码对应行号

以下行号基于当前本地文件：

/home/xle/workspaces/dify/web/app/components/header/account-dropdown/index.tsx

需要删除或 JSX 注释的核心菜单区域：

第 177 行 到 第 228 行

该区域对应以下菜单项：

查看帮助文档
支持
路线图
GitHub
关于

需要删除或注释的渲染代码

在文件中找到下面这一整段：

{!systemFeatures.branding.enabled && (
  <>
    <AccountMenuSection>
      <AccountMenuExternalItem
        href={docLink('/use-dify/getting-started/introduction')}
        iconClassName="i-ri-book-open-line"
        label={t('userProfile.helpCenter', { ns: 'common' })}
        trailing={<ExternalLinkIndicator />}
      />
      <Support />
      {IS_CLOUD_EDITION && isCurrentWorkspaceOwner && <Compliance />}
    </AccountMenuSection>
    <DropdownMenuSeparator className="my-0! bg-divider-subtle" />
    <AccountMenuSection>
      <AccountMenuExternalItem
        href="https://roadmap.dify.ai"
        iconClassName="i-ri-map-2-line"
        label={t('userProfile.roadmap', { ns: 'common' })}
        trailing={<ExternalLinkIndicator />}
      />
      <AccountMenuExternalItem
        href="https://github.com/langgenius/dify"
        iconClassName="i-ri-github-line"
        label={t('userProfile.github', { ns: 'common' })}
        trailing={(
          <div className="flex items-center gap-0.5 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] py-[3px]">
            <span aria-hidden className="i-ri-star-line size-3 shrink-0 text-text-tertiary" />
            <GithubStar className="system-2xs-medium-uppercase text-text-tertiary" />
          </div>
        )}
      />
      {
        env.NEXT_PUBLIC_SITE_ABOUT !== 'hide' && (
          <AccountMenuActionItem
            iconClassName="i-ri-information-2-line"
            label={t('userProfile.about', { ns: 'common' })}
            onClick={() => {
              setAboutVisible(true)
            }}
            trailing={(
              <div className="flex shrink-0 items-center">
                <div className="mr-2 system-xs-regular text-text-tertiary">{langGeniusVersionInfo.current_version}</div>
                <Indicator color={langGeniusVersionInfo.current_version === langGeniusVersionInfo.latest_version ? 'green' : 'orange'} />
              </div>
            )}
          />
        )
      }
    </AccountMenuSection>
    <DropdownMenuSeparator className="my-0! bg-divider-subtle" />
  </>
)}

可以直接删除，也可以用 JSX 注释包起来：

{/*
{!systemFeatures.branding.enabled && (
  <>
    ...
  </>
)}
*/}

推荐直接删除这一整段，因为这些菜单后续不需要显示。

建议同步清理的 import

如果直接删除第 177-228 行，建议同步删除以下导入：

第 7 行：import { useState } from 'react'
第 13 行：import { IS_CLOUD_EDITION } from '@/config'
第 15 行：import { useDocLink } from '@/context/i18n'
第 18 行：import { env } from '@/env'
第 23 行：import AccountAbout from '../account-about'
第 24 行：import GithubStar from '../github-star'
第 25 行：import Indicator from '../indicator'
第 26 行：import Compliance from './compliance'
第 28 行：import Support from './support'

建议同步清理的变量

删除：

第 111 行：const [aboutVisible, setAboutVisible] = useState(false)
第 115 行：const docLink = useDocLink()

将第 116 行：

const { userProfile, langGeniusVersionInfo, isCurrentWorkspaceOwner } = useAppContext()

改成：

const { userProfile } = useAppContext()

删除底部 About 弹窗

删除：

第 253 行 到 第 255 行

对应代码：

{
  aboutVisible && <AccountAbout onCancel={() => setAboutVisible(false)} langGeniusVersionInfo={langGeniusVersionInfo} />
}

修改后的菜单结构

修改后，下拉菜单中间应只剩：

<AccountMenuSection>
  <DropdownMenuItem
    closeOnClick={false}
    className="cursor-default data-highlighted:bg-transparent"
  >
    <MenuItemContent
      iconClassName="i-ri-t-shirt-2-line"
      label={t('theme.theme', { ns: 'common' })}
      trailing={<ThemeSwitcher />}
    />
  </DropdownMenuItem>
</AccountMenuSection>
<DropdownMenuSeparator className="my-0! bg-divider-subtle" />
<AccountMenuSection>
  <AccountMenuActionItem
    iconClassName="i-ri-logout-box-r-line"
    label={t('userProfile.logout', { ns: 'common' })}
    onClick={() => {
      void handleLogout()
    }}
  />
</AccountMenuSection>

注意

如果只是用 JSX 注释第 177-228 行，也建议清理以上 import 和变量。否则在构建时可能因为未使用变量或导入导致报错。

6、推荐实施步骤

进入源码目录：

cd /home/xle/workspaces/dify

修改前建议确认 Git 状态：

git status

用编辑器修改文件：

vim web/app/components/header/index.tsx
vim web/app/components/apps/list.tsx
vim web/app/components/header/account-dropdown/index.tsx

也可以使用 VS Code 打开 WSL 目录后修改。

7、部署方式

说明

当前 Docker Compose 通常使用官方镜像，例如：

langgenius/dify-web:1.14.2

因此只改源码后，正在运行的容器不会自动变化。需要重新构建自定义前端镜像，并让 Compose 使用该镜像。

构建自定义 web 镜像

cd /home/xle/workspaces/dify
sudo docker build -t dify-web-custom:1.14.2 -f web/Dockerfile .

构建完成后可以查看本地镜像：

sudo docker images | grep dify-web-custom

修改 Docker Compose

编辑：

/home/xle/workspaces/dify/docker/docker-compose.yaml

找到 web 服务，原来是：

web:
  image: langgenius/dify-web:1.14.2

把官方镜像改为：

web:
  image: dify-web-custom:1.14.2

就是将其替换为自定义镜像。

重启 web 服务

cd /home/xle/workspaces/dify/docker
sudo docker compose up -d web

如果需要整体重启：

sudo docker compose up -d

8、验证方式

访问：

http://localhost/apps

如果页面仍显示旧内容，执行浏览器强制刷新：

Ctrl + F5

检查以下结果：

• 左上角不再显示 Dify Logo。
• 左上角不再显示 Logo 后面的 / 分隔符。
• 左下角不再显示“参与社区”区域。
• GitHub、Discord、论坛图标入口不再显示。
• “拖放 DSL 文件到此处创建应用”仍然保留。
• 点击右上角用户头像后，“查看帮助文档”“支持”“路线图”“GitHub”“关于”不再显示。
• 点击右上角用户头像后，“账户”“设置”“主题”“登出”仍然保留。
• 应用列表、创建应用、搜索、标签筛选等功能正常。

9、风险与建议

• 这是前端 UI 级别定制，不影响数据库和后端 API。
• 不建议直接进入容器修改打包后的文件，因为容器重建后改动会丢失。
• 建议保留源码改动，并使用自定义镜像部署。
• 后续升级 Dify 版本时，需要重新检查这些文件是否发生结构变化。
• 每次修改前端源码后，都需要重新构建自定义 web 镜像并重启 web 服务。