注目のトピック

manuel · 2022 年 7 月 18 日午前 9:22

いいえ、直接ではありません。カテゴリを選択することはできますが、トピックの選択を制限するためだけです。このオプションを有効にするために、さらに多くのロジックを追加したくはありません。

回避策として、ワイルドカードを使用してすべての新しいトピックに自動的にタグを付けることができます。

または、別のコンポーネントを使用します。達成したい外観をもう少し詳しく説明していただければ、推奨できるものがあるかもしれません。

riteshsaini · 2022 年 7 月 18 日午前 9:37

ご返信ありがとうございます。

コンポーネントに特定のタグを追加すると、将来的にこのコンポーネントを削除することにした場合に、長期的に見て不要なコードが増えることになります。

そのため、コンポーネントの最善のロジックは、タグが指定されていない場合に最新の投稿を自動的に選択することです。

将来的にコンポーネントを削除することになった場合、「featured」タグを使用しているすべてのスレッドを探し、それらをすべてタグ付け解除する必要があります。

JammyDodger · 2022 年 7 月 18 日午前 9:50

タグでフィルタリングし、一括操作オプションを使用することで、トピックからタグを非常に迅速に削除できます。

画面に表示されているものしか取得しないと思うので、一括操作を適用する前に、すべて読み込むために下にスクロールすることがよくあります。

manuel · 2022 年 7 月 18 日午前 9:52

タグを削除するだけで消えますよ

manuel · 2022 年 7 月 18 日午前 10:03

一般的な注意点として：このコンポーネントは、公式のFeatured Tiles Componentからフォークされています。私の全体的なアイデアと動機は、そのコンポーネントが提供する機能を持つカードのような見た目を実現することでした。オリジナルのコンポーネント以上の機能的な機能を追加するつもりはありません。その理由は、コードメンテナンスに関して、公式コンポーネントの互換性修正に追従するだけで済むようにしたいからです。

diabolicvincent · 2022 年 12 月 13 日午前 11:44

参考までに：フィーチャーカードコンポーネントを修正し、ユーザーがすべてのフィーチャーされたトピック（使用されたトピックソース：最新）を水平方向にスクロールできるようにしました。

使用されたCSSは次のとおりです。

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    -ms-overflow-style: none; /* MS Edge のスクロールバーを非表示 */
    scrollbar-width: none; /* Mozilla Firefox のスクロールバーを非表示 */
    scroll-snap-type: x mandatory;
    scroll-padding: 8px;
}

.featured-card {
    scroll-snap-align: start;
}

.featured-cards-container::-webkit-scrollbar {
    display: none; /* Webkit ベースのブラウザ（Chrome、Safariなど）のスクロールバーを非表示 */
    -webkit-overflow-scrolling: touch; /* タッチスクリーンでは、スクロールジェスチャー終了後もしばらくコンテンツがスクロールし続けます */
}

Heliosurge · 2023 年 1 月 22 日午前 9:58

機能リクエスト。

特定のカテゴリページにこれを表示するオプションを設けることはできますか？

つまり、ラウンジを表示している場合、ここに注目のカードが表示されます。

表示されている画像はカテゴリ画像です。Airテーマを使用しています。そのサブカテゴリであるFrontierニュースから、そのカテゴリに関連する注目のトピックを表示するアプリケーション。

カード画像の推奨画像サイズは？

xiaokong23357 · 2023 年 3 月 30 日午前 2:39

素晴らしいですが、FKBテーマではサポートされていません。

digitaldominica · 2023 年 12 月 26 日午後 4:33

タイトルの最大文字数を設定するにはどうすればよいですか？カードに抜粋を表示していますが、タイトルと抜粋のテキストがボックスからはみ出しています。

Arkshine · 2023 年 12 月 26 日午後 6:42

タイトルの最大文字数を制御する設定はありません。ただし、cards height 設定を増やしてコンテンツを収めることができます。

毎回調整したくない場合は、テーマまたはコンポーネントに次の CSS を試すことができます。
これにより、カードの高さの制限が解除され、次のオプションが利用可能になります。

カードをストレッチさせるか
画像の最大高さ
タイトルの最大行数
抜粋の最大行数

.featured-cards-container {
    $stretch_card: "true";
    $max-image-height: 10em;
    $max-title-lines: 3;
    $max-excerpt-lines: 4;
    
    height: inherit; 
    max-height: inherit;
    
    .featured-card {
        @if $stretch_card == "true" {
            height: inherit;
        }
        
        a.card-content .card-details {
            .topic-title {
                -webkit-line-clamp: $max-title-lines;
            }
            
            .topic-excerpt {
                -webkit-line-clamp: $max-excerpt-lines;
            }
        }

        a.card-content .card-image {
            height: #{$max-image-height};
            min-height: #{$max-image-height};
        }
    }
}

お役に立てば幸いです！

digitaldominica · 2023 年 12 月 26 日午後 8:05

ありがとうございます。投稿前は定義された高さ350pxにしていましたが、コードを試したところ、抜粋付きのタイトルに対してカードサイズが適切に調整されるようです。

jrgong · 2024 年 4 月 24 日午前 10:18

これを掘り起こすのは天才的ですね！スマートフォン表示でも有効にする方法はありますか？

jrgong · 2024 年 11 月 28 日午後 3:06

なぜか横スクロールが機能しなくなりました。デスクトップとモバイルで動作させることができた方はいらっしゃいますか？

Arkshine · 2024 年 11 月 29 日午前 3:18

こんな感じでどうでしょう：

.featured-cards-container {
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content:left;
    scroll-snap-type: x mandatory;
    scroll-padding: 1.25rem;

    /* スクロールバーを触れるようにするが、見えなくする */
    scrollbar-width: auto;
    scrollbar-color: transparent transparent;

    /* または、細く表示する */
    // scrollbar-width: thin;
    // scrollbar-color: #91919185 transparent;

    /* スクロールバーがコンテナの真下ではなく、最大高さの下に表示されるようにします。 */
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

デスクトップでスクロールバーを非表示にするのは良い考えではないと思います。アクセスしにくくなる可能性があります。

細くて表示される（背景も透明にする）のは、私には問題ないように見えます。どう思いますか？

jrgong · 2024 年 11 月 29 日午前 11:15

デスクトップでは機能するようになりました！しかし、モバイルでは機能しません。モバイルの水平スクロールのために、すでにCSSをハックしてきましたが、あまり洗練されていません

タイトルのフォントサイズが小さい画面サイズには大きすぎたため、フォント調整も追加しました。

.featured-cards-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
    align-content: flex-start;
    overflow-x: auto;
    max-height: 350px;
}
.featured-cards-container .featured-card {
    min-width: 90%;

}


.featured-card a.card-content .card-details .topic-title {
    font-size: var(--font-up-1);
}

jrgong · 2024 年 11 月 29 日午後 1:42

Homepage Feature のコンポーネントと同様の動作を再現し、要素全体を折りたたみ可能にする方法はありますか？

copymonopoly · 2025 年 2 月 11 日午後 3:01

「抜粋を表示しない」は私だけに発生していますか？

manuel · 2025 年 2 月 19 日午後 1:25

このコンポーネントを更新し、リポジトリをGitLabに移行しました: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.

新しいバージョンでは、テーマ設定からスタイルオプションを選択して削除するという、わずかに異なるデザインアプローチを採用しています。代わりに、2つの基本的なレイアウト構成（カードとリスト）と、CSSを介してカスタムスタイル宣言を追加するためのよりクリーンなテンプレートを提供します。

以前のコンポーネントを引き続き使用したい場合は、GitHub - nolosb/discourse-featured-cards で利用できます。

Arkshine · 2025 年 2 月 19 日午後 1:36

少しトピックから外れますが、素晴らしいアプローチだと思います。ユーザーフレンドリーにするために物事をシンプルにしながらも、高度な使用法やユーザーのためにカスタマイズする方法を提供したい場合、コンポーネントに数百万の設定を提供しないようにするのは難しいです。

manuel · 2025 年 2 月 19 日午後 1:48

このコンポーネントではまだ行っていませんが、別の良いアプローチは、スタイルをカスタマイズするための標準的な方法としてカスタムプロパティを提供することです。例えば、Manuel Kostka / Discourse / Components / Extra Banners · GitLab :

コンポーネントでは、カスタムプロパティのプレースホルダーとデフォルトの代替値を使用してスタイルを宣言できます。

background: var(--extra-banners-background, var(--secondary));

トピック		返信	表示
Homepage Feature Theme component official , homepage-feature	122	22248	2025 年 12 月 4 日
Topic Cards Theme component official , topic-cards	101	5935	2025 年 10 月 19 日
Featured Tiles Theme component official , featured-tiles	44	12983	2025 年 3 月 29 日
Topic List Thumbnails Theme component official , topic-list-thumbnails	159	32161	2025 年 11 月 26 日
Topic List Previews (TLP) Theme component	684	26497	2025 年 11 月 28 日

注目のトピック

関連トピック