Discourse トピック一覧:投稿者とスレ主

:information_source: 概要 トピック一覧ページの左列にトピック作成者のアバターを追加します。また、デフォルトの投稿者列には「直近の投稿者のみ」を表示するオプションも追加されます。作成者のアバターはサイズや形状を変更可能です。
:eyeglasses: プレビュー https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: リポジトリ https://github.com/Lillinator/discourse-topic-list-author-posters
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourse テーマ初心者の方へ Discourse テーマの利用に関する初心者向けガイド

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

:woman_technologist:t2: 概要

この Discourse テーマコンポーネントは、すべてのトピック一覧ルートにトピック作成者のアバターを最初の列に挿入し、管理者がアバターの形状とサイズを指定できる設定を提供します。また、投稿者リストでは作成者のアバターが最初のアバターとして表示されないようにもなります。

さらに、「トピックに複数の参加者がいる場合のみ、投稿者アバター列に直近(最新)の投稿者のアバターのみを表示する」という設定もあります。つまり、トピック内に他の投稿者がいる場合のみ、作成者のアバターが表示されます。

加えて、管理者は「最新トピック一覧ビュー」が有効なカテゴリページ(例:「最新トピック付きのカテゴリ」)でトピック作成者を表示するかどうかを選択でき、アバターのサイズや形状のオプションも用意されています。

行の内容を上部または中央に垂直配置する切り替え機能も追加されています。

画面サイズが小さい場合(モバイルサイズ)には、作成者のアバターは「直近の投稿者アバター」が表示される場所に現れます。

このコンポーネントは、トピック一覧の抜粋Discourse AI サマリーギスト とよく連携します。

:gear: 設定

コンポーネント管理ページでのデフォルト設定を含む設定のスクリーンショット

設定 説明
Topic list author avatar size トピック一覧ページルートにおける作成者アバター列のアバターサイズ - smallmedium、または large
Topic list author avatar border radius トピック一覧ページルートにおけるアバターの角丸設定:0% = 四角形 → 50% = 円形。tab_style = 左側の角が丸い形状
Topic list show last poster only 投稿者列に直近の投稿者のアバターのみを表示(トピックに複数の参加者がいる場合のみ有効)。
Vertically align row top 行の垂直配置を「上部」または「中央」に切り替える
Show author on categories page カテゴリページのトピック一覧で、直近の投稿者ではなく作成者のアバターを表示する。
Category page topic avatar size カテゴリページトピック一覧における作成者アバター列のアバターサイズ - smallmedium、または large
Category page avatar border radius カテゴリページにおけるアバターの角丸設定:0% = 四角形 → 50% = 円形。tab_style = 左側の角が丸い形状

:camera_flash: スクリーンショット

以下は、異なるアバターサイズや形状の設定、および拡張された AI サマリーギストを表示した際のスクリーンショットです。

各種トピック一覧ページのスクリーンショット。異なるコンポーネント設定が有効な状態(コンパクトモードと拡張ギストモード、サイドバーの展開/折りたたみ)を示しています

デフォルト設定の場合:

tab_style 形状の大きなアバターでサマリーギストを拡張した場合:

15% の border-radius 形状の小さなアバターで Topic_list_show_last_poster_only を有効にした場合:

0% の border-radius(四角形)の中型アバターで Topic_list_show_last_poster_only を有効にし、サマリーギストを拡張した場合:

カテゴリページのスクリーンショット。作成者または直近の投稿者のアバターを異なる 2 つのサイズと形状で表示している。

コンポーネントのデフォルト設定で、中型の丸いアバターを表示し Show_author_on_categories_page を有効にした場合:

大型の tab_style アバターで Show_author_on_categories_page を無効にした場合:

モバイル表示のスクリーンショット

tab_style 形状の作成者アバターを表示した場合:


:backhand_index_pointing_right:t3: 注意事項

  • プロフィールページのタブにおいて、期待される位置に作成者のアバターを挿入し、投稿者列を変更します。
  • モバイルでの動作は、トピックフッター一覧(推奨/関連トピック)やプロフィール・受信トレイのタブページでのデフォルト動作と同じです。
  • horizon テーマとはあまり互換性がありません。:slight_smile:

:bulb: 今後の可能性のあるタスク

  • モバイルでの無効化切り替え機能の追加?
  • カテゴリやタグの除外設定?
  • 左から右(LTR)言語への対応?
  • 投稿者アバターの形状変更?

:hugs: いつもアイデア、フィードバック、デバッグサポートをありがとうございます @Moin さん。


他の Discourse 関連の投稿もチェック
「いいね!」 13

これを作成していただきありがとうございます。これにより、私にとって潜在的な問題が即座に解決しました!

これはすでに計画されているかもしれませんが、左側のポスターアバター列のパディングと配置に奇妙なインデントがあることに気づいたことを言及しておきたかったのです(比較のために、コンポーネントが無効になっているモバイルではこれがありません)。これは、td.posters の text-align 属性が画像にも影響を与えているように見えます。
有効にすると、ポスターのアバターリストの配置も変更され、これは td.topic-list-data の配置がデフォルトを上書きしているように見えます。そうでなければ、自分でスタイルシートを変更するのは簡単です。

素晴らしいコンポーネントです、改めて感謝します。

「いいね!」 1

レポートありがとうございます。修正をプッシュしました。コンポーネントを更新して、それが役立つかどうか教えてください。

「いいね!」 1

アバターの左揃えはデスクトップの方が優れています。中央のポスターの列を好みに合わせて調整するために、このCSSを追加しました。

td.posters.topic-list-data {
    vertical-align: middle !important;
}

将来のモバイル無効化も役立つと思います。なぜなら、スタイリングが少し余分なスペースを使用しているからです。

[quote=“jordanjay29, post:4, topic:394364”]アバターの左揃えはデスクトップではの方が良いです。中央の投稿者の列を私の好みに合わせるために、次のCSSを追加しました。

[/quote]

上部の垂直方向の配置は、トピックカードの他の部分との一貫性を保つための意図的なものであり、変更されることはありません。
モバイルについては何も変更していませんが、確認します。

垂直方向の配置がCSSで広範囲に適用されすぎている可能性があり、td.topic-list-dataを使用しているcustom-author-columnのみを対象とする必要があると思われます。ターゲットをtd.custom-author-column.topic-list-dataに変更することで解決し、私側で修正するためのカスタムスタイリングが不要になると思われます。

いいえ、ポスターの列が他のすべての行要素と上揃えになるように意図していました。中央揃えだと場違いに見えます(特に抜粋やAI-gistを有効にした場合)。しかし、これは好みの問題だと思いますので、お好きなように調整してください。

モバイル用に小さな変更をプッシュしました。

「いいね!」 3

私のフォーラムでは抜粋やgist、AIの要約を使用していないため、デフォルトのDiscourseの外観が好ましいです。その変更は専用のテーマコンポーネントで行う方が理にかなっていると思いますが、意見が異なり、私は自分の側で修正したので、気にしていません。

モバイルの見栄えは少し良くなりました、ありがとう!

@jordanjay29 これについてもっと考えた後、アライメントの切り替えを追加することにしました(簡単です)。

どうぞ :slight_smile:

無効にすると中央のデフォルトになる新しい設定 Vertically align row top があります。これでうまくいくか教えてください。


「いいね!」 4