# Discourse 主题使用入门指南

**URL:** https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966
**Category:** Site Management
**Tags:** reference, customization
**Created:** [2018年七月10日 12:10 UTC](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966 "2018-07-10T12:10:56Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [2018年七月10日 12:10 UTC](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966/1 "2018-07-10T12:10:56Z")

</div>

这是一门关于 Discourse 主题基础知识的速成课程。本指南面向所有不熟悉 Discourse 主题的用户。如果您已经使用过 Discourse 主题或主题组件，那么您可能不需要阅读本指南。

### 什么是主题和主题组件？

主题或主题组件是一组打包在一起的文件，旨在修改 Discourse 的外观或添加新功能。

让我们先从主题开始。

#### 主题

通常，主题之间并不兼容，因为它们本质上是不同的独立设计。您可以将主题想象成皮肤，或者 Android 上的启动器。您可以安装多个启动器，但不能同时使用两个。您的默认 Discourse 安装包含两个主题： **Foundation** 和 **Horizon** 。

Foundation 是一种简洁、经典的 Discourse 外观，而 Horizon 则提供了一种更现代的设计，并提供多种配色方案供选择（例如 Horizon、Royal、Clover、Lily、Violet 和 Marigold——每种都有浅色和深色变体）。

Foundation

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/a/7/3a77e2c8d4061331a68aeb2f96395caeed19b722.png)

以及 [Horizon](https://meta.discourse.org/t/horizon-theme/360486)

 ![horizon-latest](https://global.discourse-cdn.com/meta/original/4X/3/0/d/30d4c36f46f65bb223da3bab649e9afafe77af33.png)

假设这还不够，您想要更多。没关系，您可以相当轻松地安装额外的主题。以下是 Meta 上可用的几个免费主题示例。

[Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142)

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/0/d/10d69a9c6a1fae7506b1c3a01c19ae20cbe0b5da.png)

[Sam’s personal “minimal” topic list design](https://meta.discourse.org/t/sams-personal-minimal-topic-list-design/23552)

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/3/a/73a11f3c544022eeeddc0e5946d012e1bdfb382f.png)

[Mint](https://meta.discourse.org/t/mint-theme/202822)

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/b/5/cb5c06238ab9ab019a9e33c2f30a1d5938ca0706.jpeg)

正如您所看到的，根据您选择的不同主题，您的站点外观可能会有巨大的差异；然而，这还不是全部。除了主题之外，Discourse 还支持主题组件。

#### 主题组件

我们使用“主题组件”这个词来描述那些更侧重于定制 Discourse 某一方面的包。由于它们的焦点更窄，主题组件几乎总是相互兼容的。这意味着您可以在任何主题下同时运行多个主题组件。您可以将主题组件想象成手机上的应用程序。

一如既往，举例是描述事物的最佳方式，以下是 Meta 上可用的几个主题组件示例

[Discourse Category Banners](https://meta.discourse.org/t/discourse-category-banners/86241)

> 此主题组件会获取您现有的类别详细信息，包括名称、描述和颜色，并在相关类别页面的顶部生成一个横幅。

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/6/d/76d31d1ac65a338a67ab5580f0110f64296b85e5.png)

[Brand header theme component](https://meta.discourse.org/t/brand-header-theme-component/77977)

> 此主题组件为品牌添加了一个额外的顶部标题栏，包含您的徽标、导航链接以及适用于移动设备和桌面视图的社交图标。品牌徽标可以是图像或文本。

正如您所看到的，主题组件的焦点要窄得多。因此，在大多数情况下，它们是相互兼容的。现在您对 Discourse 主题和主题组件有了一个大致的了解。让我们深入探讨一下。

### Discourse 主题界面

让我们来看看主题的界面。访问 `your.site.com/admin/customize/themes`，您应该会看到类似这样的界面：

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/4/1/241386e458672ff38ccfd3684433efe2dfde2522.jpeg)

这是 Discourse 中的默认主题界面。您可以在此处执行以下操作：

- 设置默认活动主题
- 选择向用户开放哪些主题
- 创建新主题和主题组件
- 导入新主题和主题组件
- 向主题添加主题组件
- 修改配色方案
- 更改主题设置
- 预览主题

让我们逐一介绍这些功能。

#### 设置默认活动主题

您可以看到一个徽章，指示某个主题被设置为默认主题：

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/9/0/e903da2077d2e352e6a40a21d6785b53a4e279c2.jpeg)

现在让我们将活动主题更改为 Horizon。您可以通过菜单按钮 … 或点击主题名称并在设置页面选中复选框来执行此操作：

 ![change](https://global.discourse-cdn.com/meta/original/4X/e/d/b/edbf54d9af11eae1a6595c280d70aa2fd8702e08.jpeg)

 ![default-theme](https://global.discourse-cdn.com/meta/original/4X/b/0/2/b0203cce1ced24c195e5126fcc7b0d594daeee9b.jpeg)

您站点上的活动主题将设置为 Horizon。这意味着访问您站点的每个人都会看到以下内容：

 ![horizon-latest](https://global.discourse-cdn.com/meta/original/4X/3/0/d/30d4c36f46f65bb223da3bab649e9afafe77af33.png)

#### 选择向用户开放哪些主题

能够为站点设置主题固然不错，但更棒的是什么？让用户自己决定。Discourse 允许您向用户提供不同的主题，让他们根据自己的喜好设置主题。他们的选择仅限于其自己的账户，不会影响您的活动主题选择或其他用户的选择。

例如，您可以将活动主题设置为默认主题（Horizon），但提供 Foundation 主题作为选项。让我们在主题界面中尝试这样做。

您只需点击菜单按钮 …，然后选择“允许用户选择”

 ![select](https://global.discourse-cdn.com/meta/original/4X/5/b/f/5bf1554f77029fe17f9f7a81466c59e631c914b1.jpeg)

就是这样！它现在会获得一个“用户可选择”的徽章

 ![user-badge](https://global.discourse-cdn.com/meta/original/4X/6/c/c/6ccb0769631539d0b39dc8a663bc9da17e752cce.jpeg)

您的用户可以通过访问以下链接来选择他们喜欢的任何主题

`your.site.com/my/preferences/interface`

 ![image](https://global.discourse-cdn.com/meta/original/4X/1/d/6/1d6138912522c30930652fe40b8b91ed60d92f0a.png)

#### 创建新主题和主题组件

要创建新主题或主题组件，请点击“安装”按钮

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/9/ce9f9b47bfcc6dba62a75dfec1bda7e0d2ce5292.jpeg)

然后会出现一个对话框。在菜单中选择“创建新”选项。您需要提供要创建内容的名称，并决定它是主题还是主题组件。

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/3/5/53571fa427f55c9d31176835a128e5929f4ca4d6.png)

我们大致介绍了主题和主题组件的基础知识。如果您还记得，主题组件通常专注于修改 Discourse 的某个区域。而主题通常涵盖多个方面。您还应注意，一个主题下可以包含任意数量的主题组件，而主题组件则不能。现在不必为此担心，稍后将对这种关系进行更详细的解释。

现在，假设您已决定名称并决定将其制作为主题。好吧，一旦点击“创建”按钮，主题将被创建，然后您将能够

1. 更改主题/主题组件的名称
2. 为主题设置或更改配色方案
3. 向您的主题添加子组件
4. 向主题/主题组件添加 html / css / js
5. 向主题添加文件或上传内容

 ![theme-settings](https://global.discourse-cdn.com/meta/original/4X/a/9/1/a91e4a1820283e43d2ec88b3e2507a6289cd18e7.jpeg)

具体的自定义内容超出了本指南的范围，因此这一点我就讲到这里。

添加 html / css / js 的界面如下（点击上述第 4 项后）

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/6/1/361c83aff35998e72245bd7678c340c19499639e.png)

#### 导入新主题和主题组件

我们已经有 [如何导入主题的指南](https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682)，但由于本指南旨在涵盖所有基础知识，因此我也在此处包含操作方法。

要导入主题或主题组件，请点击“安装”按钮

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/e/9/ce9f9b47bfcc6dba62a75dfec1bda7e0d2ce5292.jpeg)

“热门”部分允许您从我们最流行的主题和组件列表中进行预览/安装。

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/9/3/b93faf46372bf27e58dbbde1b09f444683e02c07.jpeg)

您还可以从您的设备或通过主题存储库链接导入主题文件。每个主题的存储库链接由作者在主题话题中提供。导入主题后，前面讨论的所有内容都将适用于它。您可以将其设置为默认主题，使其可供用户选择，等等。

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/0/c/a0cd1dd28f8d076772deaf381baab1007caa0f8d.png)

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/b/2/eb28a12a50434cbc02ccfb9940476012c8edaae0.png)

如果您导入的是主题组件，您还可以将其添加到您的任何主题中。这在下一节中将有详细介绍

#### 向主题添加主题组件

假设您喜欢 Discourse 类别横幅主题组件并希望使用它。您可以按以下步骤操作

1. 如上所述从存储库导入主题
2. 将其作为主题组件添加到您的活动/用户可选择主题中

您可以这样操作：

导入组件后，进入您想要添加该组件的主题，并查找“包含的组件”部分

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/d/c/cdca82244b4f299cbbe6d828a3c956e8d71d6593.jpeg)

此列表将显示所有已安装的主题组件。从那里您可以向主题添加主题组件。添加 Homepage Feature 组件看起来像这样

 ![component-add](https://global.discourse-cdn.com/meta/original/4X/b/b/c/bbc0a644ecbbfe2e701499160a7652364f77a72f.jpeg)

在单个组件的页面上也存在一个类似的“在这些主题中包含组件”选项。这允许您一次将组件添加到多个主题

 ![component-theme](https://global.discourse-cdn.com/meta/original/4X/1/e/a/1ea16a370c16b9c2f70f36dfe6663e9482424f11.jpeg)

差不多就是这样。Homepage Feature 现在是默认主题的活动组件。如果您还希望将其添加到另一个主题，您需要重复添加主题组件的过程。

如果您已将 Foundation 主题设置为用户可选择，并将 Homepage Feature 主题组件也添加到了其中，那么选择 Foundation 主题作为其活动主题的用户也将获得 Homepage Feature 主题组件，因为它是 Foundation 主题的“子主题”。

您可以在一个主题下拥有无限数量的主题组件，并且如前所述，它们通常是相互兼容的。因此您可以执行以下操作：

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/d/a/eda5e666a7c8a41003033af1b280b755dd6e53da.png)

所有这些组件将在该主题上同时处于活动状态。

#### 修改配色方案

配色方案是您选择的用于生成主题中元素颜色的颜色调色板。这里我不会深入太多细节，但会向您展示如何使用配色方案。

导航至 `your.site.com/admin/config/colors`，您将看到

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/6/7/d67a24c09dd4e2330f4a4aef73f8977abb86d8da.png)

在此处您可以编辑配色方案或创建新的配色方案。要编辑配色方案，请点击它并将颜色更改为您喜欢的颜色

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/0/c/50c036a8b20bdd9d1b831930b9a33779c3c7ec9e.png)

要创建新的配色方案，请点击此处

 ![new-color](https://global.discourse-cdn.com/meta/original/4X/0/a/6/0a6b2eb87bfe55652909cc0293a9a5fd326ebea2.jpeg)

完成颜色更改后，现在是时候在您的活动主题或用户可选择主题中将配色方案设置为活动状态了。为此，请进入主题页面并查看此处

 ![color-select](https://global.discourse-cdn.com/meta/original/4X/d/a/5/da56b4f19cae016560735e0b806c565dbf208f08.jpeg)

#### 主题设置

Discourse 主题可以具有设置。这些设置旨在为您提供一种简便的方法，以便根据您的需要配置主题或主题组件。例如，Homepage Feature 主题组件有一些设置，用于控制哪些主题被推荐：

 ![theme-setting](https://global.discourse-cdn.com/meta/original/4X/0/b/2/0b2636e01a0abce81c55c482ee0811c1ab38eaf3.jpeg)

并非所有主题/主题组件都有设置，但对于那些有的主题，它们将始终显示在此处。设置通常包括作者提供的说明，帮助您确定需要进行哪些更改。

#### 预览主题

有时在应用主题之前，您需要查看主题在站点上的外观。Discourse 提供了一种简便的方法来预览主题，而无需将其设置为活动状态。

在主题页面上时，请点击此处

 ![preview-theme](https://global.discourse-cdn.com/meta/original/4X/d/6/d/d6d7745c0041c07433ff3ef23a0af1c9afc9d66d.jpeg)

然后会打开一个新标签页，显示该主题在您站点上的实时预览。您可以导航到不同的页面，查看所有内容的外观。预览主题最棒的地方在于，您可以实时测试更改，即使出现问题也不会影响您的站点。

### 其他信息

##### 安全模式

Discourse 内置了一种在出现问题时绕过当前活动主题的方法。例如，组件代码中的 javascript 错误可能导致您的站点无法正常工作。要绕过当前活动主题，只需访问

`your.site.com/safe-mode`

然后您将看到

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/0/4/80482296c5886b341350b22c0ab9225bdecfbb3e.png)

从那里您可以禁用当前活动主题，导航到主题页面并修复问题或永久禁用该主题。

#### 获取新主题

查找新主题和主题组件的最直接方法是查看 Meta 上的 #Customization > Theme 类别。

#### 进一步阅读

[Designer's Guide to getting started with themes in Discourse](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002)  
[Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)  
[Using Safe Mode to troubleshoot issues with themes and plugins](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504)  
[Structure of themes and theme components](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848)  
[Create and share a font theme component](https://meta.discourse.org/t/create-and-share-a-font-theme-component/62462)  
[Create and share a color scheme](https://meta.discourse.org/t/how-to-create-and-share-a-color-scheme/61196)  
[Use Discourse Core Variables in your Theme](https://meta.discourse.org/t/use-discourse-core-variables-in-your-theme/77551)  
[Add settings to your Discourse theme](https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557)  
[Theme Creator, create and show themes without installing Discourse!](https://meta.discourse.org/t/theme-creator-create-and-show-themes-without-installing-discourse/84942)

如果您有任何问题，请随时提问。

---

_[View the full topic](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)._