テーマおよびテーマコンポーネントを使用すると、アップロードされたアセット（画像やフォントなど）を管理できます。サイト設定の theme authorized extensions を使用して、テーマが受け入れるアセットの種類を制御できます。
テーマおよびコンポーネントへのアセットの含め方
リモートテーマの場合
リモートテーマには以下が含まれます：
- Popular リストからインストールされたテーマおよびコンポーネント
- From a git repository メソッドを使用してインストールされたテーマおよびコンポーネント
リモートテーマまたはテーマコンポーネントにアセットをアップロードするには、詳細な例として Create and share a font theme component を参照してください。
ローカルテーマおよびコンポーネントへのアセットのアップロード
ローカルテーマには以下が含まれます：
- すべての Discourse インスタンスに同梱されているデフォルトのライトテーマとダークテーマ
- + Create New インストールメソッドを使用して作成されたテーマおよびコンポーネント
- From your device インストールメソッドを使用して、ローカルコンピュータからアップロードされたテーマおよびコンポーネント
ローカルテーマまたはテーマコンポーネントにアセットをアップロードするには、該当するテーマまたはコンポーネントに移動し、Uploads セクションで + Add を選択します：
Add Upload モーダルで、ファイルを選択し、CSS、JavaScript、および/または Handlebars カスタマイズで使用するための SCSS 変数名を入力します。
アップロードが完了すると、アセットは Uploads リストに表示されます：
重要な注意: コンポーネントが git リポジトリからリモートでインストールされた場合、管理画面を通じてテーマやコンポーネントにアップロードを追加しないでください。コンポーネントの更新により、git リポジトリに含まれていなかったアップロードはすべて削除されます。
アセットの利用方法
SCSS
@font-face {
font-family: Amazing;
src: url($Comic-Sans) format("woff2");
}
body {
font-family: Amazing;
font-size: 15px;
}
.d-header {
background-image: url($texture);
}
:informationsource: _
ttfまたはotfフォントを使用する場合は、opentypeを形式として使用してください。
Javascript
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
console.log(settings.theme_uploads.balloons);
});
HTML
バニラ HTML（カスタマイズ管理パネルのヘッダーやヘッダー後セクションなど）にテーマアセットを直接追加することはできません。Handlebars テンプレートまたはプラグイン API を使用する必要があります（詳細は Developing Discourse Themes & Theme Components を参照）。
1つの回避策は、SCSS を使用してアセットを背景画像として読み込むことです（上記の例参照）。したがって、テーマのヘッダーセクションには以下を追加できます：
<div class="my-custom-div">
<a href="/"></a>
</div>
そして、CSS では以下のようにします：
.my-custom-div a {
height: 50px;
width: 100px;
background-image: url($asset-name);
}
テーマアップロードを設定としてアクセスする
JavaScript において theme_uploads を設定として扱うこともできます（関連コミット）。
これにより、テーマおよびコンポーネントからテーマアセットにアクセスできるようになります。
テーマの JS 内では、以下を使用してアセットの URL を取得できます：
settings.theme_uploads.name
追加情報
このドキュメントはバージョン管理されています - 変更提案は github で行ってください。
