テーマとテーマコンポーネントの構造

[Discourse]

Discourse は、.tar.gz アーカイブやリモート Git リポジトリ（プライベートリポジトリを含む）からソースを取得できるネイティブテーマをサポートしています。

テーマの例はこちらです: GitHub - discourse/discourse-simple-theme: Sam's simple discourse theme · GitHub

Git リポジトリは毎日1回（1日1回）更新を確認するか、更新を確認 ボタンを使用して確認できます。変更が検出されると、更新を確認 ボタンは 最新に更新 に変わります。

テーマを作成するには、特定のファイル構造に従う必要があります。以下のファイルを含まれます:

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ファイルを好きなフォルダー構造で配置すると、すべてのファイルがテーマの共通/デスクトップ/モバイルの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…

テーマを複数の 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 でどうぞ。