主题及主题组件的结构

[Discourse]

Discourse 支持原生主题，可以从 .tar.gz 归档文件或远程 git 仓库（包括私有仓库）中获取。

一个主题示例位于：GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub

Git 仓库将检查更新（每天一次），或者通过使用 检查更新 按钮进行。当检测到更改时，检查更新 按钮将变为 更新到最新版本。

要创建主题，您需要遵循特定的文件结构。您可以包含以下文件：

about.json (必需)

common/common.scss
common/header.html
common/after_header.html
common/footer.html
common/head_tag.html
common/body_tag.html
common/embedded.scss

desktop/desktop.scss
desktop/header.html
desktop/after_header.html
desktop/footer.html
desktop/head_tag.html
desktop/body_tag.html

mobile/mobile.scss
mobile/header.html
mobile/after_header.html
mobile/footer.html
mobile/head_tag.html
mobile/body_tag.html

locales/en.yml
locales/{locale}.yml

stylesheets/{anything}/{anything}/{anything}.scss

javascripts/{anything}.js
javascripts/{anything}.gjs
javascripts/{anything}.hbs

assets/{asset_filename}

settings.yml

上述文件 均为可选，因此您只需创建所需的文件。

对于那些希望将主题 SCSS 拆分为多个文件的人来说，现在这是可行的。

将主题SCSS拆分为多个文件

主题和主题组件正变得越来越强大，开发人员也越来越有雄心壮志。为了方便开发人员，主题现在可以将它们的 SCSS 分成多个文件。 当使用 主题 CLI 创建新主题，或在 GitHub 上 分享主题时，只需创建一个名为 scss 的新文件夹。用你的 .scss 文件填充它，遵循任何文件夹结构，所有文件都可以在主题的 common / desktop / mobile SCSS 部分中导入。 例如，如果你想让一个通用的变量可用于移动端和桌面端的 SCSS，你可以这样做： scss/my-folder/variables.scss $favourite-color = red; desktop/desktop.scss @import "my-folder/variables"; body { background-color: $favourite-color; } mobile/mobile.scss @import "my-folder/variables"; body { color: $favourite-color; } 此功能已在 v2.3.0.bet…

对于那些希望将主题拆分为多个 JS 文件的人来说，只需将您想要的 JS 文件添加到 javascripts 目录中即可。

about.json 文件的结构如下，您可以在 Adding metadata and screenshots to a Theme 查看更多相关信息：

{
  "name": "My Theme",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
    "variable-name": "assets/my-asset.jpg"
  },
  "color_schemes": {
    "My Color Scheme": {
      "primary": "222222"
    }
  },
  "screenshots": ["screenshots/light.jpeg", "screenshots/dark.jpeg"]
}

有关如何为主题添加设置的说明，请参见此处：Add settings to your Discourse theme.

要告诉 Discourse 您将要添加的是一个主题组件而不是完整主题，只需在 about.json 文件中添加一行 "component": true

文件结构与主题自定义 CSS / HTML 相匹配。

延伸阅读

查看带有 #themes::tag 标签的其他文章。

另请参阅：

• Developing Discourse Themes & Theme Components
• Install the Discourse Theme CLI console app to help you build themes
• Include assets (e.g. images, fonts) in themes and components

---

最后由 @SaraDev 于 2022-08-15T21:00:00Z 审核

---

本文档受版本控制 - 建议修改请提交至 github。