MD 主题列表组件

Steven · 2020 年3 月 27 日 13: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 · 2020 年3 月 27 日 17:05

谢谢你

Steven · 2020 年3 月 27 日 17:31

我为那些不想编辑组件且暂时无法升级 Discourse 论坛的用户创建了一个特定分支。

您可以安装新组件，并使用高级设置。

包含主题的仓库：https://github.com/iunctis/md-topic-list
分支名称：bf-20200323

您将获得与 2020 年 3 月 23 日之前版本的 Discourse 兼容的组件。该版本在此提交之前。

Steven · 2020 年3 月 30 日 19:59

我在移动端稍微尝试了一下主题列表的展示方式，虽然还需要进一步完善，但你们会对类似这样的设计感兴趣吗（这将是一个独立的组件）：

当前的移动端主题列表展示：

头像仍然会打开用户卡片，日期则链接到最新回复。

ScammerRevolts · 2020 年3 月 31 日 06:55

我肯定会，这将会是一个很好的补充，尤其是因为移动端和桌面的布局会相似，而不是看起来完全不同：slight_smile:

jrgong · 2020 年3 月 31 日 20:45

预览链接无法工作。当我尝试访问时，收到以下错误消息：

访问被拒绝

在尝试加载 /theme/Steven/md-topic-list.json 时

出错了。

Steven · 2020 年3 月 31 日 20:48

抱歉，我之前清理了 Discourse 主题页面，但清理得有点过头了：扫帚

现在应该已经修复了，感谢反馈！

jrgong · 2020 年4 月 4 日 10:14

嘿 @Steven

我已经是 2.4.1 版本了，但我的头像仍然不见了。请看我的主题预览截图：

Steven · 2020 年4 月 4 日 11:21

你试过这个分支吗？

如果你的 Discourse 版本早于 3 月 23 日，在升级论坛之前，你需要使用这个分支：

[quote=“Steven, post:25, topic:117694, full:true”]
我为那些不想修改组件且暂时无法升级 Discourse 论坛的用户创建了一个专用分支。

你可以安装一个新的组件，并使用高级设置。

包含主题的仓库：https://github.com/iunctis/md-topic-list
分支名称：bf-20200323

你将获得与 2020 年 3 月 23 日之前的 Discourse 版本兼容的组件。在此之前此提交之前。[/quote]

jrgong · 2020 年4 月 25 日 13:03

有人在使用这个主题组件的同时搭配“话题列表预览”插件吗？还是说它终究会导致问题？

我目前使用的是 Sam 的极简主题，但它与当前版本的“话题列表预览”插件不兼容。因此，我正在考虑更换主题，以便能够同时实现极简风格的话题列表和话题图片预览功能。

Steven · 2020 年4 月 25 日 13: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 · 2020 年5 月 19 日 19:51

我刚刚进行了一次小幅升级。虽然没有新功能，但我增加了对新缩略图函数的兼容性。

该主题组件与以下组件兼容：

nory · 2020 年7 月 7 日 19:09

你好，它也兼容这个插件吗？Topic List Previews (legacy)
谢谢，
Deb

Steven · 2020 年7 月 7 日 20:15

很遗憾不行，因为我们编辑的是同一个文件。

如果你修改头部代码，并将瓦片样式与我的修改整合起来，可以让两者都生效，但这需要你对工作原理有一定的了解。

你可以从我旧版自定义的主题列表预览中获取一些灵感（那是在官方缩略图主题组件发布之前，所以目前可能无法使用）：https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
不过，它对某些元素使用了不同的 CSS 类和排列方式，这可能不适用于你的论坛。

pinder99 · 2021 年1 月 20 日 10:20

嗨 @Steven，我一直在使用你的插件。我移除了话题中的“活动”标签和“查看”标签，想把它们移到话题下方，就像你的插件那样，但一直没成功。你能帮帮我吗？我只想添加一个日期（活动），就像下面的图片一样：

Steven · 2021 年1 月 20 日 12:57

首先，您需要更改表格结构，并删除“视图”和“活动”列：

<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>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> 类，或调整日期格式（例如将 format="tiny" 改为 format="medium"），但整体结构应该基本没问题。

pinder99 · 2021 年1 月 20 日 13:02

真的非常感谢你 @Steven，这确实是我需要的，非常感激你的快速回复。还有一件事，“admin”和“最后发帖”之间没有间距，如何给它们添加一些空格？

Steven · 2021 年1 月 20 日 13:29

我添加了一个 <br>，奇怪的是它没生效。如果你不习惯在 span 标签中添加 class 元素，可以把它放在 span 标签里，或者使用   来强制增加一些间距。

pinder99 · 2021 年1 月 20 日 14:39

nbsp 运行得完美无缺

pinder99 · 2021 年1 月 22 日 08:37

@Steven 它在桌面端运行正常（还添加了一些数据），但在移动版本上不显示，你能帮忙看看吗？

话题		回复	浏览量
MD Topic List Mobile component Theme component	61	6770	2026 年4 月 7 日
Topic Author Theme component topic-author , end-of-life	63	12615	2024 年10 月 4 日
Sam's Simple Theme Theme official , sams-simple-theme	368	82811	2025 年2 月 17 日
Discourse Topic List Author & Posters Theme component	8	219	2026 年2 月 5 日
Display Topic Author on Topic List UX	7	2568	2021 年2 月 8 日

MD 主题列表组件

相关话题