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

さらに、トピックに参加者が 2 人以上いる場合のみ、投稿者アバター列に最新の(最も最近の)投稿者のみを表示する設定も用意されています。つまり、トピックに他の投稿者がいる場合のみ、作成者のアバターが表示されます。

さらに、管理者はカテゴリページで最新のトピック一覧表示が有効な場合(例:最新のトピックを含むカテゴリ)にトピック作成者を表示することも選択でき、アバターのサイズや形状のオプションも利用可能です。

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

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

このコンポーネントは、トピック一覧の抜粋Discourse AI 要約 Gist とよく連携します。

:gear: 設定

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

設定 説明
Topic list author avatar size トピック一覧ページルートの作成者アバター列のアバターサイズ - smallmedium、または large
Topic list author avatar border radius トピック一覧ページルートのアバター角丸設定:0% = 四角形 → 50% = 円形。tab_style = 左側の角が丸くなる
Topic list show last poster only 投稿者列には最後の投稿者のアバターのみを表示しますが、トピックに参加者が 2 人以上いる場合に限ります。
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 要約 Gist を表示した際のスクリーンショットです。

[details="さまざまなトピック一覧ページのスクリーンショット(異なるコンポーネント設定が有効な場合)。コンパクトモードと展開された Gist モード、および展開/折りたたまれたサイドバーを表示]
デフォルト設定の場合:

要約 Gist を展開した状態の tab_style 形状の大きなアバター:

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

0% の border-radius(四角形)で Topic_list_show_last_poster_only が有効かつ要約 Gist が展開された状態の中型アバター:

[/details]

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

デフォルトのコンポーネント設定で、中型の丸いアバターと Show_author_on_categories_page が有効な場合:

tab_style 形状の大きなアバターと Show_author_on_categories_page が無効な場合:

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

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


:backhand_index_pointing_right:t3: 注意事項

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

:bulb: 今後のタスクの候補

  • モバイル無効化トグルの追加は?
  • カテゴリやタグの除外は?
  • 左から右への言語対応は?
  • 投稿者アバターの形状変更は?

:hugs: 引き続き、アイデア、フィードバック、デバッグのお手伝いをしてくださった @Moin に感謝いたします。

「いいね!」 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