トピックカード

[Discourse]

	概要	Topic Cards は、トピックリストをサムネイル付きのカードとして表示するように再スタイル設定します
	プレビュー	Discourse Theme Creator でプレビュー
: hammer_and_wrench:	リポジトリ	https://github.com/discourse/discourse-topic-cards
: open_book:	Discourse テーマ初心者ですか？	Discourse テーマの使用に関する初心者ガイド

このテーマコンポーネントをインストール

これは Discourse チームによって保守されている official テーマコンポーネントであるため、#support、#bug、#ux、および Feature リクエストは、Meta のそれぞれのカテゴリで、適切なテーマコンポーネントタグを付けて行うことができます。以下のリンクのいずれかをクリックして開始してください。

サポート バグ UX 機能

このテーマコンポーネントは、トピックリストの他のカスタマイズと競合する可能性があります

機能

このコンポーネントは Topic Thumbnails からインスピレーションを得ており、使用を簡素化し、抜粋と全カードクリックを追加し、さらに CSS マジックを加えています。

• 全カードをクリック可能にする（元の投稿者のアバターを除く）
• 抜粋を表示する
• 利用可能な場合はトピックサムネイルを表示する
• 公開日を表示する
• 一部のメタデータを削除し、いいねをより目立たせる

デスクトップ

モバイル

設定

翻訳	デフォルト
published	Published

当社でホストしていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用できます。

[Moin]

縦の青い線がテキストの一部を覆っています

(ブラウザ/デバイスに依存しないようです。Edge/Windows、Chrome/Android、Firefox/Androidで試しました)

[frold]

Windows上のChromeとiPhone 8上のChromeで、すぐに動作しました。

[chapoi]

@Moin

縦の青い線がテキストの一部を覆っています

はい、これを忘れていました。修正します – ありがとう

[jayme]

「+新しいトピック」ボタンの下にある「返信」と「アクティビティ」タブを削除するにはどうすればよいですか？
トピックが非常に短くなり、見栄えが悪くなります（笑）

[Lilly (Lillian Louis)]

こんにちは@jaymeさん、それらのタブはこのコンポーネントの一部ではないようで、おそらく別のテーマコンポーネントまたはプラグインによって追加されたものと思われます。このコンポーネントでテストフォーラムを読み込んでも、それらのタブは存在しませんし、OPのスクリーンショットにも表示されていません。どちらのコンポーネントかを見つけるために他のコンポーネントを無効にする必要があるかもしれません。そして、それらのタブの設定がない場合は、無効にする必要があるかもしれません。

[chapoi]

カードではボーダー/box-shadow がうまく機能しないため、代替の表示方法を工夫する必要がありました。

UX: replace border with text colour on select with keyboard

[Moin]

@chapoi

なので、代替のインジケーターを取得するために少し工夫する必要がありました。

どういうわけか、インジケーターが全く見えなくなりました

[chapoi]

ナビゲーションにj/kコマンドを使用していますか？

[Moin]

いいえ、タブを使っただけです。実際にはタブレットを使いました。戻るボタンを使った後、通常は投稿がハイライトされます。今回はそうなりませんでした。録画のためにコンピューターで試しただけです。

[derak (Cristian Deraco)]

素晴らしいテーマコンポーネントです！

[Gonerdot]

このコンポーネントを多くのテーマにインストールしてみましたが、どこでも少し曲がって見えます。何が間違っていますか？

[chapoi]

うーん…断言するのは難しいですね。カードの高さが何らかの理由で制限され、コンテンツが通常より大きくなっているようです。

他のコンポーネントやテーマとの競合が原因ではないか、まず確認していただけますか？右側のサイドバーも有効になっているようですが、それがサイズ計算に影響している可能性もあります。

ですので、まずそれを確認して、結果を教えていただけますか？

[Gonerdot]

他のすべてのコンポーネントを無効にしましたが、問題は解決しませんでした。

[chapoi]

変ですね。 インストールしたフォーラムを見せてもらえますか？

[Gonerdot]

bearblog.ru

しかし、プロフィール設定でテーマをdraculaに変更する必要があります。

[chapoi]

ありがとうございます。確認します！

[Gonerdot]

プレビューの文字数を制限することで問題が解決するように思えますが、その方法がわかりません

[chapoi]

トピックカードには最大高が必要ですが、そうしないと以下のような問題が発生します。

テーマクリエーターの例では複数行のタイトルも使用でき、問題なく収まるため、あなたのものがうまく収まらない理由を説明することはできません。

フォントサイズ、フォントファミリー、または行の高さに関連している可能性があります。残念ながら、これには個別の調整が必要であり、万能の修正を適用することはできません。

考えられる解決策は、あなたが言ったように、タイトルを1行に制限することです。これは、次のCSSを追加することで実現できます。

.topic-card {
  .link-top-line {
      max-width: 100%;
      overflow: hidden;

     .title {
        display: block;
        white-space: no-wrap;
      }
   }
}