这是一门关于 Discourse 主题基础知识的速成课程。目标受众是所有不熟悉 Discourse 主题的用户。如果您已经使用过 Discourse 主题或主题组件,本指南可能不是您必读的内容。
什么是主题和主题组件?
主题或主题组件是一组打包在一起的文件,旨在从视觉上修改 Discourse 或添加新功能。
让我们从主题开始。
主题
一般来说,主题之间并不应该相互兼容,因为它们本质上是不同的独立设计。可以将主题比作皮肤,或者 Android 上的启动器。您可以安装多个启动器,但无法同时使用两个。默认的 Discourse 安装自带两个主题:Foundation 和 Horizon。
Foundation 呈现的是简洁经典的 Discourse 外观,而 Horizon 则提供更具现代感的设计,并拥有多种配色方案可供选择(例如 Horizon、Royal、Clover、Lily、Violet 和 Marigold——每种都有浅色和深色变体)。
默认
以及深色
如果您觉得这还不够,想要更多选择,那么您可以相当轻松地安装额外的主题。以下是 Meta 上提供的几个免费主题示例。
如您所见,根据您的主题选择,您的网站外观可能会有显著差异;但这还不是全部。除了主题之外,Discourse 还支持主题组件。
主题组件
我们使用“主题组件”一词来描述那些更侧重于自定义 Discourse 某一特定方面的软件包。由于它们的焦点更集中,主题组件几乎总是相互兼容的。这意味着您可以在任何主题下同时运行多个主题组件。您可以将主题组件比作手机上的应用程序。
正如往常一样,举例是描述事物的最佳方式,以下是 Meta 上可用的几个主题组件示例:
该主题组件利用您现有的分类详细信息(包括名称、描述和颜色),在相关分类页面的顶部生成横幅。
该主题组件为品牌添加了一个额外的顶部页眉,包含您的标志、导航链接以及社交图标,同时支持移动设备和桌面视图。品牌标志可以是图片或文本。
如您所见,主题组件的焦点要狭窄得多。因此,在大多数情况下,它们彼此兼容。现在您对 Discourse 主题和主题组件有了大致的了解。让我们再深入探讨一下。
Discourse 主题界面
让我们看看主题界面。访问 your.site.com/admin/customize/themes,您应该会看到类似以下内容:
这是 Discourse 的默认主题界面。您可以在这里执行多项操作:
- 设置默认活动主题
- 选择向用户开放哪些主题
- 创建新主题和主题组件
- 导入新主题和主题组件
- 向主题添加主题组件
- 修改配色方案
- 更改主题设置
- 预览主题
让我们逐一介绍这些功能。
设置默认活动主题
默认主题名称旁边的小勾号表示这是您网站上的活动主题。
现在,让我们将活动主题更改为 Dark。点击 Dark 主题,您应该会看到以下内容:
您网站上的活动主题将设置为 Dark。这意味着所有访问您网站的人都会看到以下内容:
此时,勾号会移动到 Dark 主题名称旁边,表示它是活动主题。
选择向用户开放哪些主题
能够为您网站设置主题固然很好,但更棒的是什么呢?让用户自己决定。Discourse 允许您向用户提供不同的主题,使他们能够根据自己的偏好设置主题。他们的选择仅限于自己的账户,不会影响您的活动主题选择或其他用户的选择。
例如,您可以将活动主题设置为默认主题(浅色),但将深色主题作为选项提供。让我们现在尝试这样做。在主题界面中:
您拥有的所有活动主题,无论是您网站设置的默认主题还是您标记为用户可选择的主题,都会显示在这里:
但只有默认主题会有绿色勾号。
现在,让我们尝试将 Red 主题设为用户可选择。
您只需要点击它,然后勾选“用户可选择主题”复选框即可。
就这样!您会注意到它会自动从不活动主题列表移动到活动主题列表。
您的用户将能够通过访问以下地址选择他们喜欢的任何主题:
your.site.com/my/preferences/interface
创建新主题和主题组件
要创建新主题或主题组件,点击任意一个“安装”按钮。
随后会出现一个对话框。在左侧菜单中选择“新建”选项。您需要为要创建的内容提供名称,并决定它是主题还是主题组件。
我们已经大致介绍了主题和主题组件的基础知识。如果您还记得,主题组件通常专注于修改 Discourse 的某个特定区域,而主题通常涵盖多个方面。您还应注意,一个主题下可以包含任意数量的主题组件,但主题组件下不能包含其他组件。目前不必为此担心,稍后会有更详细的解释。
现在,假设您已经确定了名称并决定将其创建为主题。一旦点击“创建”按钮,主题就会被创建,之后您将能够:
- 更改主题/主题组件的名称
- 为主题设置或更改配色方案
- 向主题/主题组件添加 HTML/CSS/JS
- 向主题添加文件或上传内容
- 向主题添加子组件
具体的自定义操作超出了本指南的范围,因此我就此打住。
添加 HTML/CSS/JS 的界面如下所示(点击上面的 #3 后):
导入新主题和主题组件
我们已经有关于如何导入主题的指南,但既然本指南旨在涵盖所有基础知识,我还是将导入方法包含在内。
要导入主题或主题组件,点击任意一个“安装”按钮。
“热门”部分允许您从我们最受欢迎的主题和组件列表中预览或安装。
您还可以从设备导入主题文件,或通过主题仓库链接导入。每个主题的仓库链接由作者在主题帖子中提供。一旦导入主题,前面讨论过的所有内容都适用于它。您可以将其设为默认主题、设为用户可选择主题等。
如果您导入的是主题组件,还可以将其添加到任何主题中。这在下一节中有详细说明。
向主题添加主题组件
假设您喜欢 Discourse 分类横幅主题组件并希望使用它。您可以按以下步骤操作:
- 如上所述从仓库导入主题组件
- 将其作为主题组件添加到您的活动主题或用户可选择主题中
您可以这样做:
导入组件后,前往您想要添加它的主题,找到“包含的组件”部分。
该列表将显示所有已安装的主题组件。从那里,您可以将主题组件添加到主题中。添加 Versatile Banner 主题组件的效果如下:
在单个组件的页面上也存在类似的“在这些主题中包含组件”选项。这允许您一次性将组件添加到多个主题中。
基本上就是这样。Discourse 分类横幅现在是默认主题的一个活动组件。如果您也想将其添加到 Dark 主题中,只需为 Dark 主题重复添加主题组件的过程即可。
如果您已将 Dark 主题设为用户可选择,并同样向其中添加了 Discourse 分类横幅主题组件,那么选择 Dark 主题作为活动主题的用户也将获得 Discourse 分类横幅主题组件,因为它是 Dark 主题的“子主题”。
一个主题下可以拥有无限数量的主题组件,正如我们之前讨论的,它们通常彼此兼容。因此,您可以像这样操作:
所有这些组件将同时作为默认主题的活动组件运行。
修改配色方案
配色方案是您选择的一组颜色,用于生成主题中元素的颜色。这里我不会深入细节,但会向您展示如何使用配色方案。
导航至 your.site.com/admin/customize/colors,您将看到:
从这里,您可以编辑配色方案或创建新的配色方案。要编辑配色方案,点击它并按您的喜好更改颜色。
要创建新的配色方案,请点击此处。
更改颜色完成后,现在需要将配色方案设置为活动状态,应用于您的活动主题或用户可选择主题。为此,请前往主题页面并查看此处:
主题设置
Discourse 主题可以包含设置。这些设置旨在为您提供一种简便的方式来配置主题或主题组件以满足您的需求。例如,Discourse 按钮样式主题包含一些设置,允许您通过简单地更改几个值来轻松自定义按钮的外观。
并非所有主题/主题组件都有设置,但对于那些有的,它们总是会显示在这里。设置通常包括作者提供的说明,帮助您确定需要进行哪些更改。
预览主题
有时,在应用主题之前,您需要查看它在您网站上的效果。Discourse 提供了一种简便的方法来预览主题,而无需将其设为活动主题。
在主题页面上,点击此处:
新标签页将打开,显示该主题在您网站上的实时预览效果。您可以导航到不同的页面,查看各项内容的显示效果。
预览主题最棒的一点是,您可以实时测试更改,而无需担心万一出现问题会对您的网站造成任何影响。
附加信息
安全模式
Discourse 内置了一种绕过当前活动主题的方法,以防出现问题。例如,组件代码中的 JavaScript 错误可能导致您的网站无法正常工作。要绕过当前活动主题,只需访问:
your.site.com/safe-mode
您将看到:
从这里,您可以禁用当前活动主题,导航到主题页面,然后修复问题或永久禁用该主题。
获取新主题
查找新主题和主题组件最直接的方法是查看 Meta 上的 #theme 分类。
进一步阅读
Designer's Guide to getting started with themes in Discourse
Developing Discourse Themes & Theme Components
Using Safe Mode to troubleshoot issues with themes and plugins
Structure of themes and theme components
Create and share a font theme component
Create and share a color scheme
Use Discourse Core Variables in your Theme
Add settings to your Discourse theme
Theme Creator, create and show themes without installing Discourse!
如果您有任何问题,请随时提问。

























