著者名とアバター

P2W · 2022 年 4 月 26 日午後 4:14

皆さん、こんにちは。コミュニティでは、アバターに加えて投稿者の名前も表示したいという要望があります。Sam’s Simple Themeで見られるような表示をエミュレートするヒントはありますか？

Don · 2022 年 8 月 16 日午後 4:10

こんにちは、マイクさん

Sam’s Simple Theme はトピックリストのテンプレートを上書きしており、作成者ではなく最新の投稿者のみを表示しています。テンプレートを上書きする方法についての非常に優れたガイドはこちらです。override。

これには、コアの2つのテンプレートを上書きする必要があります。

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
ヘッダーセクションを変更するための topic-list-header
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
アバターを変更し、ユーザー名を追加するための topic-list-item

すべてのテンプレートはここで見つけることができます: https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

始めましょう

実際、提示を容易にするためにテーマコンポーネントを作成しました。必要であれば使用できます。

設定から2つの列を選択できます。
デフォルトでは最後の投稿が表示されますが、作成者が表示されるように変更できます。

トピックリストヘッダー
まず、列ヘッダーを変更する必要があります。

これらの行を追加し、投稿者と表示数、アクティビティの列ヘッダーを削除しました。

github.com/VaperinaDEV/discourse-custom-user-column

javascripts/discourse/templates/topic-list-header.hbr

438529e70


      
          {{#if (theme-setting 'author_column')}}
            {{raw "topic-list-header-column" sortable=sortable order='created' forceName=(theme-i18n 'author_header')}}
            {{else}}
            {{raw "topic-list-header-column" sortable=sortable order='activity' forceName=(theme-i18n 'last_header')}}
          {{/if}}
          {{~raw-plugin-outlet name="topic-list-header-after"~}}

これはヘッダー 最終投稿 または 作成者 を追加します。
最終投稿

作成者

これらの翻訳のためのロケールファイルも追加しました…
ここで翻訳できます

トピックリストアイテム

投稿者の列を削除し、最終投稿または作成者の列を追加しました。

最終投稿列

作成者列（トピック作成）時間付き。

github.com/VaperinaDEV/discourse-custom-user-column

javascripts/discourse/templates/list/topic-list-item.hbr

215b70d13


      
          <td class="custom-user-column topic-list-data">
            <div class="custom-user-column-avatar">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.createdAt}}" data-user-card="{{topic.creator.username}}">{{avatar topic.creator imageSize="medium"}}</a>
                {{else}}
                <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
              {{/if}}
            </div>
            <div class="custom-user-column-info">
              {{#if (theme-setting 'author_column')}}
                <a href="{{topic.firstPostUrl}}">
                  {{format-date topic.createdAt format="tiny"}}
                </a>
                <span class="editor"><a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
                {{else}}
                <a href="{{topic.lastPostUrl}}">
                  {{format-date topic.bumpedAt format="tiny"}}
                </a>
                <span class="editor"><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
              {{/if}}

This file has been truncated. show original

最後にCSSを追加します。

github.com/VaperinaDEV/discourse-custom-user-column

desktop/desktop.scss

main

.custom-user-column {
  &.topic-list-data {
    display: flex;
    gap: 0.5em;
    align-items: center;
    font-size: var(--font-0);
    .custom-user-column-info {
      display: flex;
      flex-direction: column;
      a {
        color: var(--primary-high);
        span.relative-date {
          font-weight: 600;
        }
      }
      .editor a {
        font-size: var(--font-down-1);
      }
    }
  }

This file has been truncated. show original

お役に立てば幸いです！コアテンプレートと比較したり、カスタムテンプレートを使用している場合は変更したり、コンポーネントがニーズに合っていれば使用したりできます。

system · 2023 年 2 月 19 日午後 3:52

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

トピック		返信	表示
Add column to home page topic list Support	8	1245	2020 年 4 月 27 日
Topic List Author Theme component official , topic-list-author	11	2985	2025 年 8 月 29 日
Add author to recent Support	2	58	2025 年 2 月 7 日
Username of user below topics Support	4	1097	2020 年 10 月 31 日
Display Topic Author on Topic List UX	7	2488	2021 年 2 月 8 日

著者名とアバター

関連トピック