작성자 이름과 아바타

Don · 8월 16, 2022, 4:10오후

Mike님, 안녕하세요.

Sam’s Simple Theme는 토픽 목록 템플릿을 오버라이드하여 게시자 대신 최신 게시자만 표시하고 있습니다. 템플릿을 오버라이드하는 방법에 대한 정말 멋진 가이드가 있습니다.

이를 위해 오버라이드해야 하는 코어 템플릿이 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

시작해 보겠습니다

사실 더 쉽게 보여주기 위해 테마 컴포넌트를 만들었습니다. 원하신다면 사용하실 수 있습니다.

설정을 통해 두 개의 컬럼 중 하나를 선택할 수 있습니다.
기본값은 마지막 게시물을 표시하지만, 저자로 변경할 수도 있습니다.

토픽 목록 헤더
우선 컬럼 헤더를 수정해야 합니다.

다음 줄들을 추가하고 posters, views, activity 컬럼 헤더를 제거했습니다.

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"~}}

이것은 마지막 게시물 또는 저자 헤더를 추가합니다.
마지막 게시물

저자

이 외에도 번역을 위해 로케일 파일도 추가했습니다…
여기서 번역할 수 있습니다

토픽 목록 아이템

posters 컬럼을 제거하고 마지막 게시물 또는 저자 컬럼을 추가했습니다.

마지막 게시물 컬럼

(토픽 생성) 시간을 포함한 저자 컬럼.

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

도움이 되시길 바랍니다! 코어 템플릿과 비교하거나, 커스텀 템플릿을 사용 중이시라면 변경하거나 필요에 따라 컴포넌트를 사용하실 수 있습니다.

글		댓글	조회수
Add column to home page topic list Product Support	7	1392	3월 28, 2020
Topic List Author Theme component official , topic-list-author	12	3835	1월 3, 2026
Original Poster / Latest Reply avatar on mobile Product Support	8	406	2월 17, 2026
Topic List Author & Posters Theme component	8	650	2월 5, 2026
Add author to recent Product Support	2	148	2월 7, 2025

작성자 이름과 아바타

Related topics