Discourse の最新ビルドを取得すれば、簡単な JavaScript と HTML を使って、他のサイトにトピック一覧を 埋め込む機能 が利用可能になります。
この機能の一般的なユースケースは、ブログやコンテンツ中心のサイトなどです。画面のサイドにトピック一覧を表示するウィジェットを配置したい場合に便利です。カテゴリ、タグ、または 他の公開されている フィルタオプションのいずれかで絞り込むことができます。
トピック一覧の埋め込み方
まず、embed topics list サイト設定を有効にする必要があります。
次に、HTML に Discourse のトピックを埋め込むために必要な JavaScript を含む <script> タグを追加します。これは通常スクリプトを追加する場所であればどこでも構いません。例：
<script src="http://URL/javascripts/embed-topics.js"></script>
URL は、サブフォルダがある場合はそれを含めたフォーラムのアドレスに置き換えてください。
その後、HTML ドキュメントの <body> 内に、埋め込みたいトピック一覧を示す d-topics-list タグを追加します。ここでも URL をベース URL に置き換える必要があります。
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
discourse-url（必須）を除く、指定したすべての属性はトピック検索のクエリパラメータに変換されます。したがって、タグでトピックを検索したい場合は、以下のように記述できます。
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
クエリパラメータにアンダースコアが含まれている場合は、ダッシュに変換してください。上記の例では、per_page が per-page になっていることに気づかれたかもしれません。
SameSite コンテキスト（つまり、埋め込みサイトとフォーラムが親ドメインを共有している場合）では、Discourse はフォーラムにログインしているかどうかを認識し、その結果を適切に表示します。ログイン時にセキュリティが設定されたカテゴリなどが表示されても驚かないでください。匿名ユーザーには表示されません。
パラメータ一覧
template: complete または basic（デフォルト）。basic はトピックタイトルのリストのみですが、complete はタイトル、ユーザー名、ユーザーのアバター、作成日時、トピックのサムネイル画像を含みます。
per-page: 数値。返すトピックの数を制御します。
category: 数値。トピックを単一のカテゴリに制限します。対象カテゴリの id を指定してください。
allow-create: ブール値。有効にすると、埋め込み部分に「新規トピック」ボタンが表示されます。
tags: 文字列。指定したタグに関連付けられたトピックに制限します。
top_period: all, yearly, quarterly, monthly, weekly, daily のいずれか。有効にすると、その期間の「人気」トピックを返します。
例
ここにサンプルサイトを作成しました。
ブラウザでソースを表示してコードを確認できるほか、ソース全体も GitHub にあります。
これは非常に新しい機能ですので、フィードバックや要望をお待ちしています。
リストのスタイリング
既存のテーマ機能を使用して、埋め込みリストにカスタムスタイルを追加できます。
例えば、デフォルトでは complete テンプレートを使用する埋め込みリストは以下のようになります。
これを例えばグリッドのように表示したい場合は、テーマ > Common > Embedded CSS にカスタム SCSS を追加します。
.topics-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
.topic-list-item {
.main-link {
border: 1px dotted gray;
padding: 0;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-column.featured-image-column .topic-featured-image img {
max-width: initial;
max-height: initial;
width: 100%;
}
}
}
}
これにより、以下のように表示されます。
