# MD Topic List component

**URL:** https://meta.discourse.org/t/md-topic-list-component/117694
**Category:** Theme component
**Created:** [5월 14, 2019, 1:59오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694 "2019-05-14T13:59:35Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [1월 22, 2021, 12:28오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/43 "2021-01-22T12:28:28Z")

</div>

모바일용 별도의 컴포넌트를 만들었습니다:

> [@MD 토픽 목록 모바일 컴포넌트](https://meta.discourse.org/t/md-topic-list-mobile-component/146341):
>
> [데스크톱의 토픽 목록 페이지](https://meta.discourse.org/t/md-topic-list-component/117694)에 대한 소규모 리디자인 작업을 마친 후, 토픽 제목에 더 많은 공간을 제공하고, 두 번째 줄에 추가 정보를 표시하며, 마지막 게시글 전용 컬럼을 포함하는 등 유사한 아이디어를 적용한 모바일 버전을 조금 더 작업했습니다. 호환성 이 테마 컴포넌트는 태그, 추천 링크 기능 및 [원본 토픽 목록 버전](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs)에서 사용 가능한 모든 기능과 호환됩니다. 모든 카테고리 스타일 표시 방식(점, 막대, 상자)이 이 컴포넌…

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [1월 26, 2021, 11:00오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/44 "2021-01-26T11:00:04Z")

</div>

@Steven 카테고리만 표시되도록 설정된 인덱스나 홈페이지의 카테고리 박스 안에 “마지막 게시글” 정보도 추가할 수 있을까요?

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/b/7b4cb87bbd37c8c95a5d3181c2d6e97a9203c87f.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [1월 26, 2021, 3:43오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/45 "2021-01-26T15:43:08Z")

</div>

템플릿을 다시 작성해야 합니다. 제 컴포넌트에 추가할 옵션이 너무 많아서 직접 넣기는 어렵지만, 사용자 지정(customize) 섹션에서는 구현할 수 있습니다.

제가 추측하건대, 주제(topics)를 포함하는 카테고리 박스(categories boxes)를 사용하고 이 템플릿을 다시 작성해야 할 것 같습니다: [https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs)

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [1월 28, 2021, 10:13오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/46 "2021-01-28T10:13:02Z")

</div>

@Steven 다시 한번 감사드립니다. 그리고 마지막 질문 하나만 더 드리겠습니다. 최신 글이나 인기 글 카테고리를 선택하면 인덱스 페이지에서 "마지막 글 작성자"를 볼 수 없는데, 카테고리 섹션 안에서는 정상적으로 표시됩니다.

![image](https://global.discourse-cdn.com/meta/original/3X/d/a/da2a736484af942581b639a050f4d875f38d6c70.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [1월 28, 2021, 3:48오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/47 "2021-01-28T15:48:28Z")

</div>

이 시나리오에서 어떤 템플릿이 사용되는지 확실하지 않습니다. 아마도 이 목록에 있을 것입니다: [https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components](https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components)

하지만 정확히 어느 것인지 모르겠으며, 제 추측으로는 이 템플릿일 것입니다: [https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs)

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [2월 2, 2021, 5:18오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/48 "2021-02-02T05:18:02Z")

</div>

“카테고리별 주제”라고 생각하는데, 작동하지 않아요. @Steven, 주제 아래에 “마지막 게시글 작성자”만 표시하려면 무엇을 추가해야 하는지 알려주실 수 있나요?

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [1월 26, 2022, 3:35오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/49 "2022-01-26T15:35:19Z")

</div>

@Steven 이 컴포넌트를 수정하기 위한 PR을 [새로운 ‘ember cli’ 환경](https://meta.discourse.org/t/new-installs-will-default-to-ember-cli-builds-in-production/208282)에서 방금 생성했습니다:

> <https://github.com/MonDiscourse/md-topic-list/pull/3>

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [1월 26, 2022, 4:48오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/50 "2022-01-26T16:48:27Z")

</div>

감사합니다. 최대한 빨리 병합했으니, 이제 안전하게 업데이트할 수 있습니다.

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2월 19, 2022, 10:30오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/51 "2022-02-19T10:30:55Z")

</div>

컴포넌트를 만든 것을 축하드립니다! 정말 마음에 들었습니다! 이 컴포넌트를 사용하면서 토픽 제목 앞에 토픽을 생성한 사람의 아바타를 표시할 수 있을까요? 가능하다면 어떻게 해야 하나요? 제가 말하는 것의 예시입니다.

 ![565](https://global.discourse-cdn.com/meta/original/3X/4/0/40fe87c9e29d2ab125500c9528b42a3d1b4ce804.png)

토픽 앞의 아바타 사진은 생성자를, 토픽 끝의 아바타는 마지막으로 게시한 사람을 나타내도록 하려면 어떻게 해야 하나요?

[image]

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [2월 19, 2022, 12:32오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/52 "2022-02-19T12:32:09Z")

</div>

@dax 테마의 컴포넌트 일부를 사용하여 저자 아바타를 표시했습니다: [Topic Author](https://meta.discourse.org/t/discourse-topic-author/111021)

`Header` 섹션에 추가해야 하는 부분들은 다음과 같습니다.

```plaintext
<td class='author topic-list-data'>
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
    {{#if (theme-setting 'show_author_username')}}
      {{topic.creator.username}}
      {{else}}
      {{avatar topic.creator imageSize="45"}}
    {{/if}} 
  </a>
</td>

```

위 코드는 `<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'> (...)</script>` 안에 배치해야 합니다.

그리고

`{{raw "topic-list-header-column" number='true'}}`

은 `<script type='text/x-handlebars' data-template-name='topic-list-header.raw'> (...)</script>` 안에 배치해야 합니다.

아래는 사용할 수 있는 전체 코드입니다.

```plaintext
<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='author topic-list-data'>
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
    {{#if (theme-setting 'show_author_username')}}
      {{topic.creator.username}}
      {{else}}
      {{avatar topic.creator imageSize="45"}}
    {{/if}} 
  </a>
</td>

<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
  {{~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}}

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

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

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser 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'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#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 type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{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'}}
{{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>

<script type="script/discourse-plugin">
(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>

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/b/2bdb00cb198f1188c27fdcafd78e9083c51d0b18.png)

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [2월 20, 2022, 5:15오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/54 "2022-02-20T05:15:49Z")

</div>

답변해 주셔서 정말 감사합니다. 제 포럼의 UI가 올려 주신 이미지와 어떤 이유로인지 같지 않은데, 오른쪽 구석의 아바타는 위에 있고, 게시한 사람의 @는 아래에 있어서 UI가 완전히 깨져 보입니다. (일부 주제 사이에는 여백이 많고, 그렇지 않은 곳도 있어서 혼란스럽습니다) 측면에 있는 정보를 어떻게 우회할 수 있을까요? (사진처럼요?) 그리고 왼쪽의 아바타는 마지막으로 게시한 사람의 것이므로, 주제를 만든 사람의 것으로 변경하는 방법이 있을까요? (오른쪽 구석의 아바타는 마지막으로 게시한 사람의 것이 되도록요?) 오른쪽 구석의 아바타를 주제 생성자를 위해 남겨 두려 하므로, 카테고리 이름 옆에 있는 주제 생성자의 이름을 제거하는 방법이 있을까요?

 ![a7d6deae3ff4180ca8c0f153db5fb1a3f011dff3_2_1380x592](https://global.discourse-cdn.com/meta/original/3X/e/6/e6106ae11a0d8889f503de2a1d530b46e17ead9e.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [2월 20, 2022, 11:40오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/55 "2022-02-20T11:40:29Z")

</div>

모든 내용을 제대로 이해한 것은 아닌 것 같고, 레이아웃 문제는 아마도 사용자 측에서 적용한 커스텀 CSS 때문인 것 같습니다.

수정된 버전을 첨부합니다:

```plaintext
<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='author topic-list-data'>
  <a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
    {{#if (theme-setting 'show_author_username')}}
      {{topic.creator.username}}
      {{else}}
      {{avatar topic.creator imageSize="45"}}
    {{/if}} 
  </a>
</td>

<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
  {{~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}}
	{{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 topic-list-data">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

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

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#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 type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{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-plugin-outlet name="topic-list-header-after"~}}
</script>

<script type="script/discourse-plugin">
(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>

```

첫 번째 열의 위치를 수정하려면 다음을 추가하세요.

```css
.topic-list .author {
    width: 50px;
}

```

원하시는 결과에 더 가까워질 것입니다.

---

<div class="post-metadata">

### Author: ![profcaju](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/profcaju/32/301565_2.png) [@profcaju](https://meta.discourse.org/u/profcaju)
#### Post date: [2월 26, 2023, 5:29오전 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/56 "2023-02-26T05:29:19Z")

</div>

스티븐, 감사합니다. 저는 정확히 이걸 해보려 하고 있었거든요!

이 모드를 테마 컴포넌트에 병합할 계획이 있나요? 제게는 정말 큰 도움이 될 것 같습니다.

감사합니다,

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [2월 26, 2023, 7:40오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/57 "2023-02-26T19:40:37Z")

</div>

이 작업을 수행할 계획은 없습니다. 이 두 구성 요소를 서로 다른 개념으로 보고 있기 때문입니다. 하지만 이전에서 드린 예시를 사용하려면 사용자 정의(Customize) 섹션에서 직접 병합을 쉽게 만들 수 있습니다.

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [12월 30, 2023, 1:29오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/58 "2023-12-30T13:29:54Z")

</div>

안녕하세요. 이 컴포넌트를 사용할 때 제 테마의 카테고리 토픽 목록에 태그 아이콘이 표시되지 않습니다.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12월 30, 2023, 2:32오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/59 "2023-12-30T14:32:50Z")

</div>

[Tag Icons](https://meta.discourse.org/t/tag-icons/109757) 구성 요소를 사용 중이신가요? 제 쪽에서는 표시가 됩니다. 사용 중인 테마가 무엇인가요?

---

<div class="post-metadata">

### Author: ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [12월 30, 2023, 2:34오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/60 "2023-12-30T14:34:47Z")

</div>

아니요, 그렇지 않아요. md 토픽 목록의 모바일 컴포넌트에서는 태그 아이콘이 표시되는데, 여기서는 안 보여요. 방금 비활성화했는데, 이제 태그 아이콘을 시도해 볼 거예요.

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [1월 2, 2024, 12:56오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/61 "2024-01-02T12:56:22Z")

</div>

포럼 설정의 `svg icon subset`에서 어떤 아이콘을 설정하셨나요?

fa-tag가 있다면 이 설정에서 삭제해야 합니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/d/3/3d35e0f7db85a2ebf44a5cb8843cc81ee247f641.png)

---

<div class="post-metadata">

### Author: ![Ahmed26](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ahmed26/32/347069_2.png) [@Ahmed26](https://meta.discourse.org/u/Ahmed26)
#### Post date: [3월 21, 2024, 3:00오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/62 "2024-03-21T15:00:11Z")

</div>

이 컴포넌트를 적용하면  
프레임의 조정 버튼이 표시되지 않습니다

 ![trrr](https://global.discourse-cdn.com/meta/original/4X/4/d/2/4d2d3c3fc3951f4d1ac7a7a61a62ca16f5734059.png)

---

<div class="post-metadata">

### Author: ![Steven](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/steven/32/187890_2.png) [@Steven](https://meta.discourse.org/u/Steven)
#### Post date: [3월 21, 2024, 5:26오후 UTC](https://meta.discourse.org/t/md-topic-list-component/117694/63 "2024-03-21T17:26:14Z")

</div>

다른 테마 컴포넌트를 사용하시거나 테마에 무거운 CSS 편집을 하고 계신가요? 그렇게 동작하면 안 됩니다.

아래와 같은 모습입니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/a/c/0ac2c0a50b3b473f4ea116d1bdeffc78015b2c66.png)

[이전 페이지](https://meta.discourse.org/t/md-topic-list-component/117694.md?page=2)

[다음 페이지](https://meta.discourse.org/t/md-topic-list-component/117694.md?page=4)