本教程非技术性,将引导您自定义 Discourse 站点的品牌标识和外观。
所需用户级别:管理员
想要自定义站点品牌标识,却不知从何下手?继续阅读以了解更多!
设置向导
Discourse 具有极高的可定制性!进行站点自定义的一个好起点是登录您的管理员账户,然后 运行站点的设置向导。![]()
设置向导允许您配置站点标题、默认语言环境以及访问设置(公开或私密、注册或仅限邀请,以及用户是否需要审核)。这些是让站点运行的基本第一步。
向导完成后,您可以从管理面板进一步自定义站点的外观,包括徽标、颜色、字体等。
您可以直接在此页面上预览可用选项。找到适合您的设置后,点击“下一步”按钮。别担心,如果您后来发现这些设置不符合您的需求,随时可以更改。
站点主题
一旦基本配置就绪,就可以进一步自定义站点了!![]()
主题是对站点样式进行的大规模自定义,会改变论坛设计的多个元素,通常还包含额外的前端功能。主题能够显著改变论坛的外观和布局。
Meta 上的 #theme 分类托管了各种预建主题,您可以在站点上使用它们来自定义外观。这是搜索站点主题的最佳位置。请从这个分类中挑选一个您想使用的主题。
确定要使用的主题后,您可以从 Admin -> Customize -> Themes 页面(位于 /admin/config/customize/themes)将主题添加到站点。您也可以从此页面修改站点主题,甚至创建一个全新的主题。
Discourse 主题使用入门指南 是 Discourse 主题基础知识的速成课程,并概述了如何在 Discourse 站点上安装主题。请阅读该指南以了解如何安装您选择的主题。
:tipsing_hand_woman: 您还可以在以下资源中找到更多关于如何使用、创建和分享自己主题的详细信息:
配色方案
您可以通过从 Admin -> Config -> Colors 页面(位于 /admin/config/colors)调整配色方案来进一步自定义站点。![]()
在此页面,您可以创建新的配色方案,选择现有方案进行自定义,并将方案分配为主题默认的浅色或深色模式。
选择一个现有的配色方案作为新方案的基础,然后点击每个颜色部分旁边的色块来自定义新方案的颜色:
别忘了为您的新配色方案命名,并在完成后保存更改!
:tipsing_hand_woman: 需要帮助来决定颜色吗?像 Paletton - The Color Scheme Designer 这样的选色工具会非常有帮助!
有关如何在 Discourse 内使用配色方案的更多信息,请参阅:
主题组件
与主题类似,Discourse 还提供“主题组件”,可用于更改论坛设计的表面元素或添加额外的前端功能。主题组件比完整主题更小、更具针对性,通常(尽管并非总是)可以与其他主题组件组合,为您的社区打造定制的论坛设计。![]()
Meta 上的 #theme-component 分类包含了 Discourse 所有官方和非官方的主题组件。浏览列出的主题组件,如果您想在站点上安装任何组件,只需按照此处说明操作:Discourse 主题界面及如何安装主题组件
一些最受欢迎的 Discourse 主题组件包括:
:tipsing_hand_woman: Discourse 还内置了深色/浅色模式切换功能,由 interface_color_selector 站点设置控制,该设置可配置为在侧边栏页脚或页眉中显示切换按钮。
:tipsing_hand_woman: Meta 上的 theme-guides 标签也包含大量操作指南,提供使用主题组件进一步自定义站点的创意。
站点品牌标识
Discourse 提供了一个专用的徽标配置页面 Admin -> Appearance -> Logo(位于 /admin/config/logo),您可以在其中管理站点的所有徽标和图标。
主徽标- 显示在站点顶部导航栏以及站点电子邮件通知的顶部。推荐尺寸为 600 × 80 像素。主徽标(深色模式)- 主徽标的深色模式替代版本。推荐尺寸为 600 × 80 像素。方形图标- 徽标图像的方形版本,显示在站点顶部,同时也是移动应用徽标。推荐尺寸为 512 × 512 像素。网站图标 (Favicon)- 徽标将作为浏览器标签页和浏览器收藏夹/书签中的图标显示。小徽标- 显示在站点左上角的小徽标图像,向下滚动时可见。如果留空,将显示主页符号。推荐尺寸为 120 × 120 像素。小徽标(深色模式)- 小徽标的深色模式替代版本。推荐尺寸为 120 × 120 像素。
在 移动设备 部分下:
移动徽标- 用于站点移动版本的徽标。如果留空,将使用logo设置中的图像。请使用高度为 120 像素且宽高比大于 3:1 的宽矩形图像。移动徽标(深色模式)- 移动徽标的深色模式替代版本。请使用高度为 120 像素且宽高比大于 3:1 的宽矩形图像。清单图标 (Manifest icon)- 用作 Android 设备上的徽标/启动画面图像。如果留空,将使用 large_icon。推荐尺寸为 512 × 512 像素。清单截图 (Manifest screenshots)- 用于展示实例功能和特性的截图,显示在 Android 的“添加到主屏幕”安装提示页面上。所有图像都应为本地上传,且尺寸相同。Apple 触摸图标- 用于 Apple 触摸设备的图标。如果留空,将使用 large_icon。推荐尺寸为 180 × 180 像素。不建议使用透明背景。
在 电子邮件 部分下:
摘要徽标- 用于站点电子邮件摘要顶部的替代徽标图像。如果留空,将使用logo设置中的图像。请使用宽矩形图像。请勿使用 SVG 图像。
在 社交媒体 部分下:
OpenGraph 图像- 默认 OpenGraph 图像,许多应用程序和平台在页面没有其他合适图像时用于网页链接预览。如果留空,将使用 large_icon。X 摘要大图- X 卡片“摘要大图”。如果留空,只要 OpenGraph_image 不是 .svg 格式,系统将使用 OpenGraph_image 生成常规卡片元数据。推荐尺寸至少为 280 × 150 像素。请勿使用 SVG 图像。
:tipsing_hand_woman: 为了获得最佳效果,我们建议遵循上述每种徽标和图标的尺寸指南。
其他自定义
现在,您已经为站点添加了自定义主题、配色方案、一些品牌徽标,可能还有一些主题组件,基本站点自定义工作已完成!![]()
如果您仍在寻找更多自定义 Discourse 站点的方法,我们建议您阅读以下可能感兴趣的任何主题:





