ホームページの注目記事

||||
-|-|
:discourse2: | 概要 | Homepage Feature は、コミュニティのホームページに画像付きのトピックを最大 5 件表示します。
| :eyeglasses: | プレビュー | Discourse Theme Creator でプレビュー |
:hammer_and_wrench: | リポジトリリンク | https://github.com/discourse/discourse-homepage-feature-component
:open_book: |Discourse テーマが初めてですか? | Discourse テーマの使用に関する初心者向けガイド

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

機能

デフォルトでは、テーマは featured タグが付いた最新のトピック 3 件を表示し、トピックの最初の画像を取得します。設定では、カスタムタグの選択、タグの非表示、カスタムタイトルの設定、およびコンポーネントの表示場所を構成できます。

:iphone: モバイルおよび小さな画面

デフォルトでは、モバイルでは 1 件だけ残るまでトピックをドロップします。

show all always をオンにすることで、このデフォルト動作を変更できます。これにより、小さな画面(< 1000px)でコンポーネントを水平スクロール可能にします。
最も小さな画面(< 600px)では、mobile style 設定を変更することで、代わりにトピックを積み重ねるオプションがあります。

設定

名前 説明
featured tag
number of topics 最大幅で最大 5 件のトピックを表示
hide featured tag 有効にすると、上記で設定された “featured tag” タグが、通常ユーザーがトピックを表示する際に不可視になります。
show on
show for
make collapsible 全体のコンポーネントを折りたたみ可能にする
show title 以下に設定されたテキストを表示(make_collapsible がオンの場合はタイトルが常に表示されます)
title text sort by created
show all always デフォルトでは、表示されるトピックの数は画面サイズとともに減少し、モバイルでは 1 件だけになります。この設定をチェックすると、すべての画面サイズで全件表示されます。
hide closed topics 閉じられたトピックを機能トピックリストから非表示にする
always link to first post トピックが以前に読まれた場合でも、常にトピックの最初の投稿にリンクします
mobile style show_all_always がチェックされている場合、トピックはデフォルトで水平スクロールで表示されます。小さな画面でのこの動作を変更し、600px 未満の画面で積み重ねるオプションを選択できます。
featured content position 高度なテーマ開発:これにより、コンポーネントのプラグインアウトレットが変更されます
翻訳 デフォルト
featured_topic_title

:discourse2: 当社がホストしていますか? テーマコンポーネントは、Standard、Business、Enterprise プランで使用可能です。

「いいね!」 89

みんな、これって最高!本当にありがとう。コア機能への追加が実現したら素晴らしいね。

「いいね!」 1

モバイル版の「Featured Topics」は複数形にするべきではありません。

「いいね!」 3

これは素敵ですね。すでに「注目のトピック」コンポーネントを使用していますが、これも悪くないアイデアです。

ただ、一つの提案があります:このコンポーネントをタグだけでなくリンクにも対応させてはいかがでしょうか。そうすれば、コンテンツをカテゴリや「トップ」(トレンドを表すもの)から取得させることも可能になるでしょう。個人的な意見ですが、これにより Reddit のように、ホームページにトレンドトピックの機能を搭載できます。@awesomerobot のご意見をお聞かせください。

素晴らしいコンポーネントです、ありがとうございます!少しリクエストがあります:デスクトップとモバイルでのトピックの数を調整できるようにして、画像の下に投稿者の名前を表示していただけると嬉しいです。

「いいね!」 4

船のトピック用にスライドを追加したほうが良いと思います。モバイルでは一つのトピックしか表示できないためです。

船のトピックへのボタンです。

「いいね!」 1

もしかして、あなたのトピックには画像がありませんか?

素晴らしいコンポーネントですね。ホームページの見た目をとても良くしています。モバイル版でも3つのトピックを表示することは可能でしょうか?スライダーを使用するなどして。また、カテゴリごとに特集トピックを表示することも可能でしょうか?

「いいね!」 3

とても素晴らしいコンポーネントです :+1:

著者を表示するという提案に賛成です。また、以下のような機能もあればさらに良いと思います:

  • 画像のリンクが常に最新の投稿(タイトルにあるものと同様)に飛ぶようにする
  • 上記の投稿のバリエーションのように、代替レイアウトを選択できるようにする(左側に最新作成のトピック、右側に小さなトピックを配置)
  • タイトルを空に選択した場合、コンポーネントのタイトルを非表示にできるようにする
  • モバイル端末で横スクロールできるようにする(下部に小さなアイコンを表示するか、サイドに矢印を表示して、3〜4件のトピックを表示可能にする)
「いいね!」 3

このコンポーネントとユーザーカードの相互作用にバグを見つけました。

なぜか、ユーザーカードはコンポーネントがページの高さを追加していることに気づいていないようです。

以下は、テーマプレビューアからのスクリーンショットです。ユーザープロフィールをクリックするとカードが表示されます。ご覧の通り、ユーザーカードは注目トピックの存在を認識していないようです:

この問題を解決するためにいくつか試してみましたが、コンポーネントの高さがユーザーカードの位置計算に反映されていない理由がわかりません。

ありがとうございます!

「いいね!」 2

修正を含むアップデートを適用しました。

以前の実装では、マージンの結合(margin collapse)が干渉していました。これにより、ユーザーカードのトップ位置の計算がずれていました。詳細は以下のページで簡潔に説明されています:Mastering margin collapsing - CSS | MDN
これは「親要素と子要素の間にコンテンツがない場合」に関連する問題でした。

「いいね!」 9

すばらしいテーマアドオン!

回転をランダム化することは可能でしょうか?表示数を2に設定しましたが、最新のアクティビティがある2つのスレッドが表示されています。

@awesomerobot さん、こんにちは。このテーマコンポーネントは素晴らしいですね。ただ、モバイル版でもメインページで見られるように、3 つの注目のテーマがスライダーとして表示されるようにすることは可能でしょうか。メインページの見た目をより良くしてくれると思います。また、各カテゴリページにも注目のテーマを追加できると嬉しいです。ご返信をお待ちしております。また、このような素晴らしいテーマを共有してくださり、本当にありがとうございます!

「いいね!」 3

CSSのトリックをいくつか試して、モバイル端末でスクロールできるようになりました!でも縦方向だけです。横方向にする方法がわかりません :smiley:

「いいね!」 1

素晴らしいコンポーネントですね!
ただ一点、私のフォーラムでモバイル表示の場合、注目コンテンツの下に余白が多すぎるようです。

この問題を修正することは可能でしょうか?あるいは、少なくともモバイル表示では無効にすることはできますか?
よろしくお願いいたします!

「いいね!」 2

ありがとうございます、とても素晴らしいです。
モバイル版で3つをスライダーモードで表示することは可能でしょうか?

もう一つ素晴らしい機能として、カテゴリやタグの中に入ると、「おすすめ」タグをフィルタリングし、そのタグやカテゴリに特化して表示できるとさらに良いかもしれません。

いずれにせよ、これは本当に素晴らしいです。ありがとうございます。

「いいね!」 1

それは奇妙ですね、私の側ではそんなにスペースがないように見えるのですが…もしかして、他のテーマがインストールされていてそれが原因になっている可能性はありますか?(余談ですが、これはモバイルビューではなく、モバイルでデスクトップビューが表示されているように見えます)

他のテーマを無効にした状態での私のテスト結果は以下の通りです:

「いいね!」 1

こんにちは、
昨日、3 つの投稿からサムネイルが非常にうまく表示されました(2 つの投稿には画像ではなく YouTube 動画が含まれていましたが、システムがサムネイルを抽出してくれて、すべて問題なく動作していました)。

ところが今日、YouTube 動画が含まれていた 2 つの投稿のサムネイルが表示されなくなりました。既知の問題でしょうか?

https://www.tournamust.com/

問題の報告は受けていませんが、埋め込み動画との互換性はテストしていませんでした。確認して、明らかな原因がないか調べてみます。