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

[Discourse]

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

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

git リポジトリは更新を確認されます（1日1回）、または Check for Updates ボタンを使用して更新できます。変更が検出されると、Check for Updates ボタンは Update to Latest に変わります。

テーマを作成するには、特定のファイル構造に従う必要があります。含めることができるファイルは次のとおりです。

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 を複数のファイルに分割したい場合は、それが可能になりました。

Split up theme SCSS into multiple files

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files. When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will be available for you to import in the common / desktop / mobile SCSS sections of your t…

テーマを複数の 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 で行えます。

← START DOCS ASSET MAP
[
{
“local_path”: “/assets/theme-structure-1.png”,
“local_sha1”: “5d81758f2f3090bee941c034a5d5a8165df50ce4”,
“remote_short_url”: “upload://465qlv5OiFWlR8qrBc6wGExEt07.png”
},
{
“local_path”: “/assets/theme-structure-2.png”,
“local_sha1”: “66944b3e613c84ac19333461a11ffb39988b5f32”,
“remote_short_url”: “upload://d4Smpts3JzE3LozxhVOInZNjv3S.png”
},
{
“local_path”: “/assets/theme-structure-3.png”,
“local_sha1”: “971f8599d19fa8f30ba787bf7c74bdc54a5f9228”,
“remote_short_url”: “upload://vQ0g1yk6xAJqM2fLe2nCmTdsK9h.png”
}
]
END DOCS ASSET MAP →