主题和主题组件的结构

Discourse · 2017 年4 月 12 日 15:41

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}.hbs
javascripts/{anything}.hbr

assets/{asset_filename}

settings.yml

以上任何文件都是可选的，所以你只需要创建需要的那些。

对于那些希望将主题 SCSS 分割成多个文件的用户，现在可以做到了。

对于那些希望将主题分割成多个 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 你要添加的是一个主题组件 (theme component) 而不是一个完整主题，只需在 about.json 文件中添加一行 "component": true 即可。

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

进一步阅读

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

另请参阅：

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

此文档是版本控制的 - 在 github 上建议更改。

此文档是版本控制的 - 建议在 github 上进行更改。

此文档是版本控制的 - 建议在 github 上建议更改。

此文档受版本控制 - 在 github 上建议更改。

此文档受版本控制 - 建议在 github 上建议更改。

此文档受版本控制 - 建议在 github 上

话题		回复	浏览量
Split up theme SCSS into multiple files Developer Guides how-to	12	4659	2024 年1 月 18 日
Developing Discourse Themes & Theme Components Developer Guides tutorial , reference , theme-guides	15	106902	2025 年3 月 18 日
Theme Developer Tutorial: 1. Introduction Developer Guides	0	1191	2025 年3 月 18 日
Beginner's guide to using Discourse Themes Site Management reference , customization	11	83097	2025 年3 月 26 日
Theme Developer Quick Reference Guide Developer Guides reference , theme-guides	9	9685	2026 年3 月 17 日

主题和主题组件的结构

进一步阅读

相关话题