MD Topic List component

Steven · 27.Март.2020 13:46: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 · 27.Март.2020 17:05:19

Спасибо за это

Steven · 27.Март.2020 17:31:43

Я создал отдельную ветку для тех, кто не хочет редактировать компонент и не может прямо сейчас обновить свой форум Discourse.

Вы можете установить новый компонент, используя расширенные настройки.

Репозиторий с темой: https://github.com/iunctis/md-topic-list
Название ветки: bf-20200323

В этом случае вы получите компонент, совместимый с версиями Discourse, выпущенными до 23 марта 2020 года. До этого коммита.

Steven · 30.Март.2020 19:59:48

Я немного поэкспериментировал с отображением списка тем на мобильных устройствах. Над этим ещё нужно поработать, но вам было бы интересно что-то вроде этого (это будет отдельный компонент):

Текущее отображение списка тем на мобильных устройствах:

Аватар по-прежнему открывает карточку пользователя, дата ведёт к последнему сообщению.

ScammerRevolts · 31.Март.2020 06:55:38

Я бы точно поддержал, это было бы отличным дополнением, особенно учитывая, что макет для мобильных устройств и настольных компьютеров будет похожим, а не полностью разным

jrgong · 31.Март.2020 20:45:49

Ссылка предварительного просмотра не работает. При попытке доступа я получаю следующее сообщение об ошибке:

Доступ запрещён

при загрузке /theme/Steven/md-topic-list.json

Что-то пошло не так.

Steven · 31.Март.2020 20:48:33

Извините за это. Ранее я очистил страницы темы Discourse, но, возможно, переусердствовал

Теперь всё должно работать, спасибо, что сообщили!

jrgong · 04.Апрель.2020 10:14:57

Привет, @Steven

У меня уже версия 2.4.1, но мои аватары всё ещё исчезли. Посмотрите скриншот предварительного просмотра моей темы здесь

Steven · 04.Апрель.2020 11:21:38

Вы пробовали эту ветку?

Если у вас версия Discourse старше 23 марта, вам нужно использовать эту ветку, пока вы не обновите свой форум:

jrgong · 25.Апрель.2020 13:03:53

Кто-нибудь использует этот компонент темы в сочетании с плагином Topic List Previews? Или он всё же вызывает проблемы?

Сейчас я использую минималистичную тему Сэма, но она не работает с Topic List Previews в текущем состоянии. Поэтому я рассматриваю возможность переключения, чтобы иметь возможность использовать и минималистичный список тем, и превью изображений тем.

Steven · 25.Апрель.2020 13:10:00

Это ожидаемо: плагин превью списков тем переопределяет шаблоны элементов списка тем, как и этот компонент темы. Я считаю, что у плагина есть преимущество перед компонентом темы, поэтому лучший способ использовать оба решения — сделать форк плагина превью списков тем и настроить шаблоны под себя.

Я сам сделал кастомизированный форк, если хотите посмотреть, как это можно реализовать: 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 · 19.Май.2020 19:51:22

Я только что выпустил небольшое обновление. Новых функций нет, но я добавил совместимость с новыми функциями миниатюр.

Компонент темы совместим со следующими компонентами:

nory · 07.Июль.2020 19:09:59

Здравствуйте, этот плагин также совместим с этим? Topic List Previews (legacy)
Спасибо,
Деб

Steven · 07.Июль.2020 20:15:31

К сожалению, нет, так как мы редактируем один и тот же файл.

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

Вы можете почерпнуть вдохновение в моей старой кастомной версии предпросмотра списка тем (это было до официального компонента темы с миниатюрами, поэтому сейчас это может не работать): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
Однако там использовались другие CSS-классы и выравнивание для некоторых элементов, так что это может не подойти для вашего форума.

pinder99 · 20.Январь.2021 10:20:33

Привет, @Steven! Я использую ваш плагин уже какое-то время. Я удалил вкладки «Активность» и «Просмотр» из темы, чтобы переместить их под темы, как в вашем плагине, но у меня не получается. Не могли бы вы помочь? Мне просто нужно добавить дату (активность), как на изображении ниже:

Steven · 20.Январь.2021 12:57:00

Сначала вам нужно изменить структуру таблицы и удалить столбцы вкладок «Просмотр» и «Активность»

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

Вы также можете удалить последнюю строку, если хотите убрать столбец «Ответы».

Теперь перейдём к основной части с контентом. Сначала я удалил два столбца.

<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>Начато <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> пользователем <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}}">Последний пост {{format-date topic.bumpedAt format="tiny"}}</a> пользователем <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, изменить формат даты (например, использовать format="medium" вместо tiny), но структура в целом должна быть подходящей.

pinder99 · 20.Январь.2021 13:02:19

Спасибо большое, @Steven! Это именно то, что мне нужно. Очень ценю быстрый ответ. И ещё один момент: между «admin» и «Last post» нет зазора. Как можно добавить немного пространства между ними?

Steven · 20.Январь.2021 13:29:23

Я добавил <br>, странно, что это не сработало. Либо вставьте его в тег span, либо используйте  , чтобы добавить немного отступов, если вам неудобно добавлять элемент класса в тег span.

pinder99 · 20.Январь.2021 14:39:31

nbsp сработало как по маслу

pinder99 · 22.Январь.2021 08:37:36

@Steven на рабочем столе всё работает отлично (я также добавил ещё немного данных), но на мобильной версии ничего не отображается. Не могли бы вы помочь?

Тема		Ответов	Просм.
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	83336	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

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