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





