トピック一覧プレビュー(レガシー)

各トピックの抜粋の下にある latest.json にライトボックスが表示されていますか?Discourse がこの望ましくない HTML をシリアライズされた抜粋に含めているのではないかと疑っています。

「いいね!」 1

本日、Discourse と TLP の最新バージョンにアップグレードしたところ、わずかながら煩わしい問題に気づきました。特定のトピックをクリックすると、「フラッシュ」や再読み込みが発生します。その様子を動画で示します:

ステージングサーバーで安全モードや再構築テストを何度か実施した結果、この問題は TLP に起因することが判明しました。また、TLP を使用している他のサイトでも同様の現象を確認しています。

再現手順:

  1. Blenderartists.org にアクセス
  2. 返信があるトピックをクリック(返信数が多いほど、この現象が顕著に現れます)

以下のサイトでも同様の現象が確認できます:

TLP プラグインを削除して再構築を行ったところ、「フラッシュ」現象は解消されました。

「いいね!」 1

はい、上記で報告があり、私も返信しました。この状況がいつ頃から続いているか、あなたのご認識ではいかがでしょうか。

どうやら何か奇妙な Ember の問題のようです(上記参照)。

現時点では解決策を持っていません。URL はコアテンプレート(TLP ではありません)によって生成されており、規格に準拠しています。また、TC 上でも同様の事象が発生しています。

「いいね!」 1

あ、ごめんなさい。そこまで遡って確認していませんでした。2か月前(2.7.0.beta1)から更新していなかったのですが、今日のアップデート後に気づきました。

「いいね!」 2

サムネイルが表示されないのに、リンクはほぼ完全に一致しています(トピックを読んでいない場合は同一です)。

TLP コードはこちら:

コア部分はこちら:

差分に気づきましたか?

メタの標準表示:

TLP の例:

答えをポストカードで送ってください。

「いいね!」 1

Discourse でのリンクの仕組みはよくわかりません。アプリを離れないため、通常のハイパーリンクのように動作しないのは確かです。私が観察したところ、2 回目の読み込みが非常に遅いようです。リンクをクリックすると、まず「アプリリンク」が機能し、コンテンツが素早く読み込まれます。同時に、裏側ではページ全体が再読み込みを開始し、アプリ全体を再読み込みする必要があり、これが非常に遅くなります。a href に加えて、リンクにイベントリスナーや onclick イベントが追加されているのでしょうか?

「いいね!」 1

TLP のタイトルリンクが何らかの原因で、Ember フレームワークとブラウザを完全なページ呼び出しにエスカレートさせているようです。一方、標準の Discourse アプリでは XHR リクエスト(ページのリフレッシュなし)のみが行われています。TLP ではサムネイルクリックはこの方法で正常に動作しています。以前はこのような挙動はなかったと確信しており、非常に奇妙です。

「いいね!」 1

事情は複雑になる一方です。この決定をブラウザが行っているのですか?

Meta 側には問題はありません:

image

「いいね!」 1

あ、何が起こっているのか分かったかもしれません!表面全体がクリック可能なエリアになっています。ダブルクリックでエラーが出ているのかもしれません。確認しますね。

これを機能させるには、表面でのクリック機能を削除する必要があるかもしれません。

「いいね!」 2

OK @bartv @_diondiondion

これはプラグインで修正されています:FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub
および TC:FIX: remove click event from topic list item component to prevent con… · merefield/discourse-tc-topic-list-previews@7fbe8ca · GitHub

「いいね!」 3

抜粋に “inline-onebox” リンクが含まれている場合、タイル画像が重なってしまうようです。

“excerpt”: “source: <a href="https://t.co/WMHOR1b1cm\” class="inline-onebox">https://twitter.com/gintarosu/status/1304621851075731457/photo/1 …",

投稿を編集して、リンクの前に改行を入れると、重なる問題は解決しました。

“excerpt”: “source: \n<a href="https://t.co/WMHOR1b1cm\” class="onebox" target="_blank" rel="noopener">https://twitter.com/gintarosu/status/1304621851075731457/photo/1 \n",


投稿の上部に画像がある場合、抜粋には “lightbox” リンクが含まれます。画像の後に抜粋テキストのフォントサイズとフォントスタイルが変化しますが、タイル画像の重なりは発生しません。

“excerpt”: “<a class="lightbox" href="https://whatever.hk/uploads/default/original/2X/c/c42ca98cb9b3b6c6401c89940259cdc84800c70d.jpeg\” data-download-href="https://whatever.hk/uploads/default/c42ca98cb9b3b6c6401c89940259cdc84800c70d\" title="image_title">\n text ",

「いいね!」 1

lightbox クラスのアンカーを CSS で非表示にしてみてください。

「いいね!」 1

ご協力いただき、本当にありがとうございます。:grinning:

フォントスタイルの問題については、現在、すべてのテーマ CSS で tiles-style の topic-details、topic-excerpt、topic-excerpt-more に対して font-size と color を追加しています。これで問題が解決したようです。:smiling_face_with_three_hearts:

画像のライトボックスリンクのコードは、excerpt の中に隠れたまま残っています。Discourse はこれを完全に削除すべきだと思います。それらのコードは、ウェブページのサイズを増やすこと以外に何もしていないように見えます。:thinking:

「いいね!」 2

はい、それで直りました。ロバートさん、ありがとう!

「いいね!」 2

はい、同意します。これはネイティブな機能として残すべきであるため、バックエンドを上書きすることに抵抗があります。また、JavaScript を使って削除することも避けたいです。現時点では、CSS が適切な解決策です(動作する場合)。

ぜひ、コミュニティであなたの CSS を共有してください :)。

「いいね!」 1

私は単に、topic-details、topic-excerpt、topic-excerpt-more に対して font-size と color を設定しました。これにより、画像の前後で抜粋のフォントスタイルが異なるのを防ぎます :grinning:

.tiles-style .topic-details {
font-size: 14px;
color: var(--primary-high);
}

.tiles-style .topic-excerpt {
font-size: 14px;
}

.tiles-style .topic-excerpt-more {
font-size: 15px;
color: var(--tertiary);
}
「いいね!」 2

今週からサムネイルセレクターに問題が発生していることに気づきました。一部のトピックでは正常に動作しますが、他のトピックでは一貫して失敗し、空の状態で表示されます。しかし、まだパターンは特定できていません。失敗するトピックの例はこちら です。コンソールにはエラーメッセージは表示されず、ネットワークリクエストの問題も見当たりません。

「サムネイルを選択」ボタンをクリックしたときのレスポンスは以下の通りです。

「いいね!」 1

「ギャップ」への簡単な修正は以下の通りです:

.topic-list .topic-excerpt {
    padding-right: 0px;
}

これは、タイル表示ではないビューの名残だと推測されます。これをタイル用の CSS に追加するかもしれません。

「いいね!」 2

はい、100% 完璧ではありません。

現在の基準は以下の通りです。明らかな欠落があれば検討しますが、Discourse のコアロジックで使用されているものとは非常に近いものです。

「いいね!」 2

はあ、もちろん今になってやっと動くなんて :facepalm:

「いいね!」 2