MD Topic List component

Steven · 3월 27, 2020, 1:46오후

컴포넌트를 직접 편집하여 헤더 부분을 수정하고 아래 내용을 붙여넣으세요. 이전 버전이 사용됩니다.

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span> &nbsp;
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<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>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
</script>

WorldIsMine · 3월 27, 2020, 5:05오후

그렇게 말씀해 주셔서 감사합니다

Steven · 3월 27, 2020, 5:31오후

컴포넌트를 수정하고 싶지 않거나, 현재 Discourse 포럼을 업그레이드할 수 없는 사람들을 위해 특정 브랜치를 만들었습니다

새로운 컴포넌트를 설치하고 고급 설정을 사용할 수 있습니다

테마가 포함된 저장소: https://github.com/iunctis/md-topic-list
브랜치 이름: bf-20200323

2020년 3월 23일 이전 버전의 Discourse와 호환되는 컴포넌트를 사용할 수 있습니다. 이 커밋 이전 버전까지 지원됩니다

Steven · 3월 30, 2020, 7:59오후

모바일에서 토픽 목록 표시 방식에 대해 조금 실험해 봤습니다. 아직 다듬어야 할 부분이 있지만, 이런 방식(독립된 컴포넌트)에 관심이 있으신가요:

현재 모바일 토픽 목록 표시 방식:

아바타를 누르면 여전히 사용자 카드가 열리며, 날짜는 마지막 게시글로 링크됩니다.

ScammerRevolts · 3월 31, 2020, 6:55오전

저라면 분명 그렇게 할 거예요. 모바일과 데스크톱 레이아웃이 완전히 다르게 보이는 대신 비슷하게 보일 테니 특히 좋은 추가 기능일 것 같아요

jrgong · 3월 31, 2020, 8:45오후

미리보기 링크가 작동하지 않습니다. 접속을 시도하면 다음과 같은 오류 메시지가 표시됩니다:

Access Denied

/theme/Steven/md-topic-list.json을 로드하는 동안

문제가 발생했습니다.

Steven · 3월 31, 2020, 8:48오후

죄송합니다. 방금 디스커스 테마 페이지를 정리하다가 조금 과하게 지워버렸네요

이제 수정되었으니, 알려주셔서 감사합니다!

jrgong · 4월 4, 2020, 10:14오전

Hey @Steven

저는 이미 2.4.1 버전을 사용 중인데도 아바타가 여전히 사라져 있어요. 제 토픽 미리보기 스크린샷을 확인해 주세요.

Steven · 4월 4, 2020, 11:21오전

이 브랜치를 사용해 보셨나요?

2023년 3월 23일 이전 버전의 Discourse를 사용 중이라면, 포럼을 업그레이드할 때까지 이 브랜치를 사용해야 합니다:

jrgong · 4월 25, 2020, 1:03오후

이 테마 구성 요소를 Topic List Previews 플러그인과 함께 사용 중인 분이 계신가요? 아니면 결국 문제가 있는 건가요?

현재 Sam의 미니멀 테마를 사용 중인데, 현재 상태에서는 Topic List Previews와 호환되지 않습니다. 그래서 미니멀한 주제 목록과 주제 이미지 미리보기 두 가지를 모두 사용할 수 있도록 테마를 전환하는 것을 고려하고 있습니다.

Steven · 4월 25, 2020, 1:10오후

이것은 예상되는 동작입니다. 토픽 목록 미리보기 플러그인이 토픽 목록 항목 템플릿을 오버라이드하기 때문에, 이 테마 컴포넌트도 마찬가지입니다. 플러그인이 테마 컴포넌트보다 우선순위가 높다고 생각하므로, 둘을 함께 사용하는 가장 좋은 방법은 토픽 목록 미리보기 플러그인을 포크하여 템플릿을 커스터마이징하는 것입니다.

원하시는 경우 참고용으로 제가 직접 만든 커스터마이징된 포크를 공유합니다: https://github.com/iunctis/discourse-topic-previews
구체적인 변경 사항은 여기 있습니다 - https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (이 버전은 함께 제공되는 커스터마이징 테마가 있고 타일에서 대부분의 사용자가 좋아하지 않을 만한 몇 가지 변경 사항이 있으므로 포럼에 권장하지 않습니다)

원본 플러그인의 데스크톱 템플릿은 여기에 있으며, 시작하기에 가장 좋은 방법입니다: https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

전혀 불가능하지 않지만, 플러그인 업데이트를 추적하고 템플릿을 커스터마이징하려면 GitHub에 대해 어느 정도 익숙해야 합니다.

Steven · 5월 19, 2020, 7:51오후

방금 작은 업그레이드를 적용했습니다. 새로운 기능은 없지만, 새로운 썸네일 함수와의 호환성을 추가했습니다.

이 테마 컴포넌트는 다음 컴포넌트와 호환됩니다.

토픽 목록 썸네일 Theme component

요약 Topic List Thumbnails를 사용하면 주제 목록 보기에서 주제 썸네일을 표시할 수 있습니다. 미리보기 Discourse Theme Creator에서 미리보기 (블로그 스타일) Discourse Theme Creator에서 미리보기 (그리드) Discourse Theme Creator에서 미리보기 (목록) Discourse Theme Creator에서 미리보기 (메이슨리) Discourse Theme Creator에서 미리보기 (미니멀 그리드) 저장소 링크 https://github.com/discourse/discourse-topic-thumbnails Discourse 테마를 처음 사용하시나요? Discourse 테마 사용 입문가 가이드 이 테마 컴포넌트 설치 기능 목록을 위한 최적화된 이미지가 생성되며, 고해상도 디스…

nory · 7월 7, 2020, 7:09오후

안녕하세요, 이 플러그인 Topic List Previews (legacy) 과도 호환되나요?
감사합니다.
Deb

Steven · 7월 7, 2020, 8:15오후

아쉽게도 같은 파일을 편집하고 있기 때문에 불가능합니다.

헤더 코드를 변경하고 타일 스타일을 제 수정 사항과 통합하면 둘 다 작동하도록 만들 수 있지만, 이 시스템이 어떻게 동작하는지에 대한 이해가 필요합니다.

구버전의 사용자 지정 토픽 목록 미리보기에서 영감을 얻을 수 있습니다(공식 섬네일 테마 컴포넌트 이전의 것이므로 현재는 작동하지 않을 수 있음): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
하지만 일부 항목에 다른 CSS 클래스와 정렬 방식을 사용했기 때문에, 이 코드가 여러분의 포럼에서는 작동하지 않을 수 있습니다.

pinder99 · 1월 20, 2021, 10:20오전

안녕하세요 @Steven. 저는 이 플러그인을 이미 한동안 사용 중입니다. 토픽에서 활동 탭과 보기 탭을 제거하고, 플러그인처럼 이 둘을 토픽 아래로 이동하려고 했는데 성공하지 못했습니다. 도와주실 수 있을까요? 아래 이미지처럼 날짜(활동)만 추가하고 싶습니다.

Steven · 1월 20, 2021, 12:57오후

먼저 테이블 구조를 변경하고 view 및 activity 탭 컬럼을 삭제해야 합니다

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
</script>

replies 컬럼도 삭제하려면 마지막 줄을 삭제할 수 있습니다

이제 콘텐츠라는 큰 부분을 다뤄보겠습니다. 먼저 두 컬럼을 삭제했습니다

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

그 다음 원하는 콘텐츠를 추가합니다. 필요한 모든 세부 사항을 추가하지는 않겠습니다. 약간의 작업이 필요하기 때문이죠. 하지만 다음과 같이 보일 것입니다

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span>Started <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> by <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span><br>
    <span><a href="{{topic.lastPostUrl}}">Last post {{format-date topic.bumpedAt format="tiny"}}</a> by <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

하지만 이것은 단지 첫 번째 초안일 뿐이며, 저는 테스트하지 않았습니다. 일부 span 클래스를 추가하거나 날짜 형식을 변경해야 할 수도 있습니다(tiny 대신 format=“medium” 사용?). 하지만 구조는 꽤 괜찮을 것입니다

pinder99 · 1월 20, 2021, 1:02오후

정말 감사합니다 @Steven. 제가 정말 필요했던 내용이었어요. 빠른 답변에 진심으로 감사드립니다. 한 가지 더 여쭤볼 게 있는데, "admin"과 “Last post” 사이에 간격이 없는데, 여기에 여백을 추가하는 방법은 무엇인가요?

Steven · 1월 20, 2021, 1:29오후

제가 <br>를 추가했는데, 왜인지 반영이 안 됐어요. 스패인 태그 안에 넣거나, 스패인 태그에 클래스 요소를 추가하는 것이 편하지 않다면  를 사용해 간격을 강제할 수 있습니다.

pinder99 · 1월 20, 2021, 2:39오후

nbsp가 아주 잘 작동했어요

pinder99 · 1월 22, 2021, 8:37오전

@Steven 데스크톱에서는 정상적으로 작동합니다 (추가 데이터도 넣었는데요). 하지만 모바일 버전에서는 표시가 안 돼요. 도와주실 수 있을까요?

글		댓글	조회수
MD Topic List Mobile component Theme component	67	8118	7월 21, 2026
Topic Author Theme component end-of-life , topic-author	63	13771	10월 4, 2024
Sam's Simple Theme Theme official , sams-simple-theme	368	87417	2월 17, 2025
Display Topic Author on Topic List UX	7	2746	2월 8, 2021
Topic List Author & Posters Theme component	8	652	2월 5, 2026

MD Topic List component

Related topics