Discourse トピック一覧：作成者と投稿者

[Lilly (Lillian)]

	概要	トピック一覧ページの左列にトピック作成者を追加し、デフォルトの投稿者列には最も最近の投稿者のみを表示するオプションを追加します。また、作成者のアバターサイズや形状も調整可能です。
	プレビュー	https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
	リポジトリ	https://github.com/Lillinator/discourse-topic-list-author-posters
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法

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

概要

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

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

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

行の内容を上部または中央に垂直配置する切り替え機能もあります。

小さなビューポート（モバイルサイズ）では、作成者が最新の投稿者アバターが表示される場所に現れます。

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

設定

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

設定	説明
Topic list author avatar size	トピック一覧ページルートの作成者アバター列のアバターサイズ - small、medium、または 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	カテゴリページトピック一覧の作成者アバター列のアバターサイズ - small、medium、または large。
Category page avatar border radius	カテゴリページの角丸設定：0% = 四角形 → 50% = 円形。tab_style = 左側の角が丸い形状

スクリーンショット

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

各種トピック一覧ページのスクリーンショット（異なるコンポーネント設定を有効にしたもの。コンパクトモードと展開モード、サイドバーの展開/折りたたみ状態を含む）

デフォルト設定の場合：

サマリーギストを展開した状態の大きな tab_style アバター形状：

15% の角丸形状で Topic_list_show_last_poster_only を有効にした小さなアバター：

0% の角丸（四角形）で Topic_list_show_last_poster_only を有効にし、サマリーギストを展開した状態の中型アバター：

カテゴリページのスクリーンショット（作成者または最後の投稿者を表示する 2 種類のサイズと形状のアバターを示す）

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

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

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

tab_style 作成者アバターの場合：

---

注意事項

• プロフィールページタブで想定される場所に作成者のアバターを挿入し、投稿者列を変更します。
• モバイルでの動作は、トピックフッター一覧（提案されたトピック/関連トピック）やプロフィール・受信トレイタブページでのデフォルト動作と同じです。
• 「horizon」テーマとはあまり互換性がありません。

---

今後の課題

• モバイルでの無効化切り替え機能の追加は？
• カテゴリやタグの除外は？
• 左から右への言語サポートは？
• 投稿者アバターを形状化することは？

いつも、アイデアやフィードバック、デバッグのサポートをいただいた @Moin に感謝します。

---

私の他の Discourse 関連コンテンツもご覧ください

[jordanjay29]

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

@Lilly

さらなるスタイリングの改善

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

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

[Lilly (Lillian)]

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

[jordanjay29]

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

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

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

[Lilly (Lillian)]

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

[/quote]

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

[jordanjay29]

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

[Lilly (Lillian)]

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

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

[jordanjay29]

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

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

[Lilly (Lillian)]

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

どうぞ

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