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

[Lilly]

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

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

概要

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

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

さらに、管理者は、カテゴリページで最新のトピックリストビューが有効になっている場合（例：最新のトピックがあるカテゴリ）、トピック作成者を表示するように選択することもでき、アバターのサイズと形状のオプションもあります。

行の内容を上または中央に垂直方向に揃えるためのトグルもあります。

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

このトピックは、トピックリストの抜粋およびDiscourse AI要約gistと連携して動作します。

設定

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

設定	説明
トピックリスト作成者アバターサイズ	トピックリストページの作成者アバター列のアバターのサイズ - small（小）、medium（中）、またはlarge（大）。
トピックリスト作成者アバターのボーダー半径	トピックリストページのアバターの丸み: 0% = 正方形 → 50% = 円形。 tab_style = 左角が丸い
トピックリストで最後の投稿者のみ表示	トピックの参加者が2人以上いる場合にのみ、投稿者列に最後の投稿者のアバターのみを表示します。
行を上に垂直方向で揃える	行を上または中央に揃えるためのトグル
カテゴリページで作成者を表示	カテゴリページのトピックリストで、最新の投稿者の代わりに作成者のアバターを表示します。
カテゴリページトピックアバターサイズ	カテゴリページのトピックリストの作成者アバター列のアバターのサイズ - small（小）、medium（中）、またはlarge（大）。
カテゴリページのアバターのボーダー半径	カテゴリページのアバターの丸み: 0% = 正方形 → 50% = 円形。 tab_style = 左角が丸い

スクリーンショット

ここでは、さまざまなアバターサイズと形状の設定、および展開されたAI要約gistでのスクリーンショットを示します。

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

デフォルト設定の場合:

要約gistが展開された、tab_styleの大きなアバター形状:

Topic_list_show_last_poster_onlyが有効になっている、15%のボーダー半径形状の小さなアバター:

Topic_list_show_last_poster_onlyが有効になっており、要約gistが展開されている、0%のボーダー半径（正方形）の中サイズのアバター:

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

デフォルトのコンポーネント設定、中サイズの丸いアバター、およびShow_author_on_categories_pageが有効:

Show_author_on_categories_pageが無効になっている、大きなtab_styleアバター:

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

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

---

注意事項

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

---

今後の対応予定

• モバイルの無効化トグルを追加？
• カテゴリとタグの除外？
• 左から右へのサポート？
• 投稿者アバターの形状変更？

いつもながら、アイデア、フィードバック、デバッグにご協力いただいた@Moinさんに感謝します。

[jordanjay29]

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

@Lilly

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

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

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

[Lilly]

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

[jordanjay29]

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

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

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

[Lilly]

[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]

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

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

[jordanjay29]

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

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

[Lilly]

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

どうぞ

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