テーマとテーマコンポーネントを使用すると、画像やフォントなどのアップロードされたアセットを処理できます。サイト設定 theme authorized extensions を使用して、テーマが受け入れるアセットを制御できます。
テーマとコンポーネントへのアセットの組み込み
リモートテーマの場合
リモートテーマには以下が含まれます。
- テーマの [kbd]人気[/kbd] リストからインストールされたテーマとコンポーネント
- [kbd]gitリポジトリから[/kbd] の方法を使用してインストールされたテーマとコンポーネント
リモートテーマまたはテーマコンポーネントにアセットをアップロードするには、詳細な例として Create and share a font theme component を参照してください。
ローカルテーマとコンポーネントへのアセットのアップロード
ローカルテーマには以下が含まれます。
- すべての Discourse インスタンスに付属するデフォルトの Light および Dark テーマ
- [kbd]+ 新規作成[/kbd] のインストール方法を使用して作成されたテーマとコンポーネント
- [kbd]デバイスから[/kbd] のインストール方法を使用してローカルコンピューターからアップロードされたテーマとコンポーネント。
ローカルテーマまたはテーマコンポーネントにアセットをアップロードするには、テーマまたはコンポーネントに移動し、アップロードセクションの [kbd]+ 追加[/kbd] を選択します。
「アップロードの追加」モーダルでファイルを選択し、CSS、javascript、および/またはhandlebarsのカスタマイズで使用するSCSS変数名を入力します。
アップロードされると、アセットがアップロードリストに表示されます。
重要なお知らせ: 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);
}
:information*source: _
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);
}
テーマのアップロードを設定としてアクセスする
theme_uploads をJavaScriptの設定として扱うこともできます（関連コミット）。
これにより、テーマとコンポーネントがテーマアセットにアクセスできるようになります。
テーマのjs内では、次のようにしてアセットのURLを取得できます。
settings.theme_uploads.name
追加情報
このドキュメントはバージョン管理されています - 変更の提案はgithubで行ってください。
