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

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

それは可能ではないと思います。トピックを取得するために使用される Discourse のコードは、最新のトピックリストのみを取得しています。リストの順序付けに使用できるフィルタとして、私が把握しているのは replies、views、activity、likes です。これらのフィルタのいずれかでリストを順序付けして、最適なトピックを選択してみてください。例えば：

<d-topics-list discourse-url="http://localhost:3000" category="14" per-page="5" order="replies"></d-topics-list>

iframe で使用されるフォントは Discourse 側で設定されています。私が現在使用している Discourse の最新バージョンでは、WordPress サイトにトピックリストを埋め込む際にフォントを設定する際に問題が発生しています。これは本番環境ではなくローカルでテストしているため、それが問題の原因である可能性もあります。私が確認したところ、iframe のフォントに対して以下のスタイルが適用されています：

font-family: var(--font-family);

このスタイルは Discourse 側で設定されていますが、WordPress にはその変数へのアクセス権がないため、私のサイトではフォントが Times New Roman に設定されてしまいます。この問題についてさらに調査します。（編集：フォント設定の問題は、Discourse の最近の変更によるものです。修正いたします。）

これは少し難しい場合があります。作成される iframe は、ページに追加する d-topics-list 要素の内部に配置されます。私のウェブサイトの CSS で幅を明示的な値に設定することで、私の環境では機能しています。ただし、これは改善の余地があると思います：

d-topics-list iframe{
	width: 700px !important;
	margin-left: auto;
	margin-right: auto;
}
「いいね！」 6
61

iframe の左上隅には数字（例：110.5ms）が表示されており、これは /embed/topics へのリンクになっています。これを非表示にする方法はありますか？

追記：答えは、これは「Discourse 開発者」にのみ表示されるということです：What is this box at the upper left displaying timings in milliseconds when I am logged in as admin? :slight_smile:

「いいね！」 7
75

こんにちは！WordPress サイトに投稿を埋め込む試みをしており、埋め込み部分はうまくいっています。モバイル表示をもう少し見やすくすることは可能でしょうか？投稿に画像が含まれている場合、画像を含むカラムのレイアウトが窮屈になってしまいます。以下のような CSS でこの問題は解決します。

@media (max-width: 768px) {
    .topics-list .topic-list-item .topic-column-wrapper {
        flex-direction: column;
    }
}

このような対応の実施は可能でしょうか？

よろしくお願いいたします、M

「いいね！」 3
76

テーマを編集する際に、ここで独自のカスタム CSS を追加できるはずです。なぜコアに含めたいとお考えなのでしょうか？

「いいね！」 2
77

ああ、これが Discourse のテーマ CSS を読み込むとは気づきませんでした！試してみて、またご連絡しますね！

「いいね！」 2
78

この目的のために、テーマの下に埋め込み用のセクションがあります！

「いいね！」 4
79

こんにちは、すでにウェブサイト上にトピックのリストを埋め込みましたが、現在はタグに基づいて特定のトピック 1 つのみを強調表示しようとしています。per-page=1 で別のリストの埋め込みには成功したのですが、CSS クラスや ID を追加できないため、最初のリストとこのリストの間に全く区別がつけられません。

つまり、埋め込まれたリストの 1 つに異なる背景色を設定するといった単純なことさえ不可能です。

何か回避策はありますか？

お手伝いいただければ幸いです。

「いいね！」 2
80

@eviltrout さん、ありがとうございます！そのコードを「埋め込み CSS」に追加したところ、問題が解決しました！

「いいね！」 2
82

現在、異なる埋め込みに対して個別の CSS ルールを追加する方法はありません。すべての埋め込みに適用されるカスタムスタイルのみを追加可能です。

「いいね！」 4
83

https://vceliquidrecipes.com/ に最新トピックを埋め込む際に、以下のエラーが表示されます。

includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168 POST https://vapingcommunity.co.uk/mini-profiler-resources/results 404

(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:168
fetchResults @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:169
initPopupView @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:763
doInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1050
sc.onload.sc.onreadystatechange @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1065
load (async)
load @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1061
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1109
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1089
setTimeout (async)
deferInit @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1085
init @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1118
(anonymous) @ includes.js?v=f8924c1fd3fbe1787f0bed5c8998b636:1463

私の埋め込みコードは以下の通りです。

<d-topics-list discourse-url="https://vapingcommunity.co.uk" status="open" order="replies" per-page="10"></d-topics-list>
「いいね！」 2
84

そのエラーは MiniProfiler 由来のもののようで、一般ユーザーが目にする内容とはおそらく関係ないでしょう。サイトを訪問しましたが、エラーなしにトピックの一覧が表示されていました。

「いいね！」 4
85

ああ、つまりそれは正常で、ログに表示されるんですよね？

「いいね！」 2
86

正常かどうかはわかりませんが、心配する必要はありません。ほとんどのユーザーはミニプロファイラーにアクセスできないため、あなたが操作した際に表示されているだけだと思われます。

「いいね！」 3
87

はい、ご支援いただきありがとうございます。いつも大変感謝しております。素晴らしい活動を続けてください。

「いいね！」 2
88

こんにちは、ご尽力いただきありがとうございます。

Firefox と Chrome では、リストが期待通りに動作していません。10 件のトピックを表示するように設定しているにもかかわらず、実際には 4 件しか表示されません。

Chrome では、リストを埋め込んだ際に以下の JS エラーが発生します。

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '' in a call to 'postMessage'.
    at u (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:105)
    at window.onload (https://rembetiko.gr/assets/embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1:515)

興味深いことに、Safari ではこの問題は発生しません。

このリストは以下のウェブサイトに埋め込まれています（ご自身でテストしたい場合は、ページ下部にあります）。

「いいね！」 4
89

皆さんの中でこの問題を再現できる方はいますか？ :slight_smile:

CC: @JimPas, @simon, @Vaping_Community

「いいね！」 3
90

ページには 10 のトピックリンクがありますが、何らかの理由で 6 つが隠れており、そのエラーの原因はわかりません。

iframe に高さを設定することで、隠れていたトピックリンクが表示されます。

d-topics-list iframe {
    height: 380px;
    width: 700px !important;
    margin-left: auto;
    margin-right: auto;
}
「いいね！」 4
91

私も同じ問題に直面しました。時には正常に表示されることもあれば、トピックのリストが途中で切れてしまうこともありました（トピックの数ではなくピクセル数で決まっているかのようでした）。また、フォントも期待通りではなかったようです（詳細は覚えていません）。その後はDiscourseのRSSフィードを使うように切り替えました。私はChromeのみを使用しており、Chrome固有の問題だとは疑っていませんでした。

「いいね！」 3
92

こんにちは！

トピックをリストから除外する方法はありますか？

「いいね！」 2
93

それにはタグを使ってみてはどうでしょうか？リストに表示させたいトピックにタグを付け、それでフィルターをかければ？

「いいね！」 5