MD Topic List component

Steven · 22.Январь.2021 12:28:28

Я создал отдельный компонент для мобильных устройств:

pinder99 · 26.Январь.2021 11:00:04

@Steven, можем ли мы также добавить «последний пост от» внутрь блока категории на главной странице, которая настроена только на категории?

Steven · 26.Январь.2021 15:43:08

Вам потребуется переписать шаблон: вариантов слишком много, чтобы добавить это в мой компонент, но это можно сделать в разделе «Настройка».

Скорее всего, вам стоит использовать блоки категорий с темами и переписать этот шаблон: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs

pinder99 · 28.Январь.2021 10:13:02

@Steven, ещё раз спасибо и последний вопрос: если я выбираю категории с последними или популярными темами, то на главной странице не отображается «Последний пост от», но он виден внутри разделов категорий.

Steven · 28.Январь.2021 15:48:28

Не уверен, какой шаблон используется в данном случае, скорее всего, он есть в этом списке: 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

pinder99 · 02.Февраль.2021 05:18:02

Я думаю, это «категории с темой», но это не работает. @Steven, не могли бы вы подсказать, что именно нужно добавить, чтобы отображалось «последний пост от» под темами?

david · 26.Январь.2022 15:35:19

@Steven Я только что создал PR для исправления этого компонента в новой среде ‘ember cli’ (New installs will default to Ember CLI builds in Production):

Steven · 26.Январь.2022 16:48:27

Спасибо, я объединил это как можно скорее, все могут обновиться безопасно

danielabc · 19.Февраль.2022 10:30:55

Поздравляю с компонентом, он мне очень понравился! Можно ли использовать этот компонент и разместить аватар человека, создавшего тему, перед темой? Если да, как это сделать? Пример того, о чём я говорю:

Аватар перед темой должен принадлежать создателю, а аватар в конце темы — последнему участнику обсуждения. Как это реализовать?

[image]

Steven · 19.Февраль.2022 12:32:09

Я использовал часть компонента темы @dax для отображения аватара автора: Topic Author

Вот части, которые нужно добавить в секцию Header:

<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>

Вот полный код, который вы можете использовать:

<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>

danielabc · 20.Февраль.2022 05:15:49

Спасибо большое за ваш ответ. По какой-то причине интерфейс моего форума не совпадает с изображением, которое вы опубликовали: аватар в правом верхнем углу находится вверху, а имя пользователя с символом @ расположено внизу, что полностью нарушает целостность интерфейса. (Между некоторыми темами есть значительные промежутки, а между другими — нет, возникает путаница.) Как мне разместить информацию сбоку? (Как на вашем скриншоте?) Кроме того, аватар слева соответствует последнему участнику, который опубликовал сообщение. Можно ли изменить это так, чтобы там отображался создатель темы? (Тогда как аватар в правом верхнем углу принадлежал бы последнему участнику, который опубликовал сообщение?) Поскольку я планирую оставить аватар в правом верхнем углу для создателя темы, можно ли убрать имя создателя темы рядом с названием категории?

Steven · 20.Февраль.2022 11:40:29

Не уверен, что понял всё до конца, но полагаю, что проблемы с макетом вызваны вашим пользовательским CSS.

Вот исправленная версия для вас:

<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>

Добавьте это, чтобы исправить отображение первой колонки:

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

Это должно быть ближе к тому, что вы ищете.

profcaju · 26.Февраль.2023 05:29:19

Спасибо, Стивен. Я как раз пытался добиться именно этого!

Планируете ли вы объединить этот мод с вашим компонентом темы? Для меня это было бы очень важно.

С уважением,

Steven · 26.Февраль.2023 19:40:37

Я не планирую этого делать, я вижу эти два компонента как разные концепции. Но вы легко можете создать собственное слияние в разделе «Настройка», чтобы использовать пример, который я привел ранее.

digitaldominica · 30.Декабрь.2023 13:29:54

Привет! Иконка тега не отображается в списках тем категории в моей теме при использовании этого компонента.

Arkshine · 30.Декабрь.2023 14:32:50

Вы используете компонент Tag Icons? У меня он отображается. Какая у вас тема?

digitaldominica · 30.Декабрь.2023 14:34:47

Нет, я не. В списке тем MD для мобильного компонента отображается иконка тега, а здесь — нет. Я только что отключил её и собираюсь попробовать иконки тегов.

Steven · 02.Январь.2024 12:56:22

В настройках форума svg icon subset вы настраивали какие-либо иконки?

Если у вас есть fa-tag, удалите его в этих настройках.

Ahmed26 · 21.Март.2024 15:00:11

При применении этого компонента
Кнопка регулировки на раме не отображается

Steven · 21.Март.2024 17:26:14

Вы используете другой компонент темы или проводите значительное редактирование CSS в своей теме? Этого не должно происходить.

Скорее всего, это выглядит так:

Тема		Ответов	Просм.
MD Topic List Mobile component Theme component	61	6868	07.04.2026
Topic Author Theme component topic-author , end-of-life	63	12650	04.10.2024
Sam's Simple Theme Theme official , sams-simple-theme	368	83334	17.02.2025
Discourse Topic List Author & Posters Theme component	8	252	05.02.2026
Display Topic Author on Topic List UX	7	2576	08.02.2021

MD Topic List component

Связанные темы