別のサイトにDiscourseトピックのリストを埋め込む

ニュースとイベント お知らせ
95

こんにちは、

フォーラムのトップページのように、トピックのタイトルだけでなく、最新の投稿者のアバターと投稿のカテゴリーも表示することは可能でしょうか？

「いいね！」 3
96

template=complete を指定すると、埋め込みにより多くの情報が含まれます：

image
image563×915 87.8 KB

「いいね！」 3
97

おっと、ありがとう！それは…情報が多すぎますね :laughing: その中間的な何かはありませんか？それとも、不要な情報をカスタム CSS で非表示にすべきでしょうか？

それとは別に、これはトピックの作成者ではなく、最新の投稿者の名前を表示しています。

「いいね！」 3
98

完全なテンプレートは、すべての情報をコンテナで囲んでいます。これは、各サイトが独自のデザインに合わせて CSS でカスタマイズすることが想定されているためです。

「いいね！」 3
99

これは素晴らしいですね！

幅を変更することは可能でしょうか？

「いいね！」 2
100

これは流体コンテナであり、親要素の幅に合わせて調整されます。

「いいね！」 2
101

私のサイトでは表示されません。残念ながら、div の幅が広すぎて収まりきらないのです。

「いいね！」 2
102

マークアップを再確認し、要素を適切に非表示にして配置してください。どのコンテナでも動作するはずです：

「いいね！」 2
103

残念ながら、私のウェブサイトではそれが機能しません。レスポンシブフレームワーク内のCSSが混乱を招いているのかもしれません。幅を変更する方法（例えば、現在の値の90%にする、またはピクセル単位で狭くする）はありますか？

「いいね！」 2
104

以下のような CSS を試しましたか？

d-topics-list iframe {
    padding: 0 5%;
}
「いいね！」 2
105

それでは動作しません。ただし、Chrome の F12 コンソールで iframe タグを編集して width="100%" を追加すれば正常に動作します。この変更を適用する方法はありますか？

「いいね！」 2
106

OPのリストにカスタムCSSを追加する方法の例を追加しました。

「いいね！」 4
107

ありがとうございます。試してみました。埋め込みトピックがグリッド形式で表示されるようになりました。ただし、グリッドの幅（つまり、2 つのトピック）は以前と同じままで、100% にほど遠いです。

上記の CSS（d-topics-list iframe）では iframe が全く変化しません。「width: 100%」に変更できればいいのですが…

空の HTML ドキュメントで試してみても、まだ幅が狭いままです。他にアイデアはありますか？:slight_smile:

「いいね！」 3
108

この埋め込み、素敵ですね！ :sparkling_heart:

いくつかの課題と機能リクエストがあります…:

  • allow-create="true" と category="4" パラメータを追加して「新しいトピックを作成」ボタンをクリックすると、「新しいトピックを追加」モーダル/ポップアップが表示されません。これは意図した動作でしょうか？
  • allow-create="true" と tags="random-tag" パラメータを追加して「新しいトピックを作成」ボタンをクリックすると、random-tag でフィルタリングされたトピック一覧に移動しますが、タグドロップダウンに「random-tag」が表示されず、「新しいトピックを追加」をクリックしてもタグが事前に選択されていません。
  • 投稿の最初の約100語を完全なテーマに含めることは可能でしょうか？
「いいね！」 4
109

これは素晴らしいアイデアですね！

また、幅の問題についても引き続き解決したいと考えています… :slight_smile:

「いいね！」 2
110

CSS は Discourse の埋め込みではなく、あなたのサイトに追加する必要があります。そのため、以下のようなコードになります：

<html>
  <head>
    <script src="https://jonathan5-discourse.com/javascripts/embed-topics.js"> 
    </script>
    <style>
      d-topics-list iframe{
        width: 100%!important;
        }
    </style>
  </head>
  <body>
    <d-topics-list discourse-url="https://jonathan5-discourse.com" category="5" per-page="5"></d-topics-list>
  </body>
</html>
「いいね！」 6
Examples of styling and use of Embedding a list of Discourse Topics on a external site
111

ありがとうございます。今ならそれが当然のように思えますね。サイト内で試してiframe内部のCSSをスタイルできない失敗から、Discourse内で試してiframe自体をスタイルできない失敗へと移っていました。これを試して、結果をお知らせします！

更新：CSSが機能しました—どうもありがとうございます。

「いいね！」 4
112

試してみました。私の場合は category=5 です（埋め込んでいるカテゴリ番号が5のため）。ポップアップは表示されませんが、URL https://forum.example.com/new-topic?category_id=5 の新しいタブが開きます。もしかすると、ブラウザの設定でこのような「ポップアップ」がブロックされているかもしれません。

「いいね！」 2
113

動作確認ありがとうございます、@Jonathan5 さん。discourse-tag-sidebar というテーマコンポーネントを無効にしたところ、ポップアップが正常に動作するようになりました :sunglasses:

「いいね！」 3
114

確認してみます :eyes:

「いいね！」 4