トピックリストの作成者と投稿者

[Lilly (Lillian)]

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

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

概要

この Discourse テーマコンポーネントは、すべてのトピックリストのルート（ページ）の1番目のカラムにトピック作成者のアバターを挿入し、管理者がアバターの形状とサイズを指定できる設定を提供します。また、作成者のアバターは投稿者リストの先頭には表示されません。

さらに、トピックの参加者が1人以上いる場合に限り、投稿者アバターカラムに最新の（最近の）投稿者のみを表示する設定もあります。したがって、作成者のアバターはトピックに他の投稿者がいる場合にのみ表示されます。

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

また、行の内容を上揃えまたは中央揃えにするための垂直方向の整列切り替えスイッチもあります。

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

このコンポーネントは Topic List Excerpts や Discourse AI summary gists とよく連携します。

設定

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

設定	説明
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サマリーgistを表示したいくつかのスクリーンショットです。

様々なコンポーネント設定を有効にしたトピックリストページのスクリーンショット。コンパクトモードと展開モードのgist、および展開/折りたたみされたサイドバーを示しています

デフォルト設定:

サマリーgistを展開した、大サイズの tab_style アバター形状:

15% の角丸形状と Topic_list_show_last_poster_only を有効にした小サイズのアバター:

Topic_list_show_last_poster_only を有効にし、サマリーgistを展開した、0% の角丸（四角）の中等サイズアバター:

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

中等サイズの円形アバターと Show_author_on_categories_page を有効にした、デフォルトのコンポーネント設定:

大サイズの tab_style アバターと Show_author_on_categories_page を無効にした場合:

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

tab_style の作成者アバターを使用:

---

備考

• プロフィールページのタブで期待される箇所に作成者のアバターを挿入し、投稿者カラムを変更します。
• モバイルでの動作は、トピックフッターリスト（推奨/関連トピック）およびプロフィールと受信トレイのタブページでのデフォルトと同じです。
• Horizonテーマとは互換性があまりありません。

---

将来のタスク候補

• モバイル無効化の切り替えスイッチを追加？
• カテゴリやタグの除外設定？
• 左から右への言語（LTR）サポート？
• 投稿者アバターの形状設定？

常々ながら、アイデア、フィードバック、デバッグのサポートをいただいた @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 があります。これでうまくいくか教えてください。