MD 话题列表移动组件

可以做到

我不知道是否会将其放入默认设置中,但如果您想尝试,可以在 header 部分添加以下代码

{{d-icon \"eye\"}} {{number topic.views numberKey=\"views_long\"}}

{{#if hasLikes}}{{d-icon \"heart\"}} <a>{{number topic.like_count}}</a>{{/if}}

对于我的屏幕,我使用了这个:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          The `~` syntax strip spaces between the elements, making it produce
          `<a>Some text</a><span>`
          with no space between them.
          This causes the topic-post-badge to be considered the same word as "text"
          at the end of the link, preventing it from line wrapping onto its own line.
        --}}
        {{raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{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}}
          {{#if expandPinned }}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory }}
            <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>
            {{else}}
            {{raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}">
          <a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
        </span>
      </div>
    </div>
</td>
</script>
4 个赞

眼睛没有显示。我已将您发布的脚本添加到了您的主主题的新主题组件扩展插件中。

某些图标需要注册与之对应的 Font Awesome 字符。

检查 svg icon subset 设置并添加 fa-eye

2 个赞

谢谢,问题解决了。我以为我添加了它,但一定是忘了提交更改。:man_facepalming:

在 Stable 中一切正常。但测试通过似乎没有显示视图或喜欢。即使在预览中,也无法确保其他组件不会干扰 Air Theme 等。您的基础组件按预期工作。扩展不显示视图或喜欢。

抱歉,但红色图标是什么意思?它像标签还是别的什么?

我们可以使用 Font Awesome 图标来保持论坛其他部分的和谐吗? :slight_smile:

感谢分享!

当没有标签时,我在 d-icon 标签上遇到了一些麻烦。

我现在尝试了一个新解决方案,我推送了一个更新,使用 font-awesome 图标而不是表情符号,请告诉我它是否有效。

编辑:已撤销,它在桌面端有效,但在移动端无效。

如果您想尝试一下,可以使用以下 CSS:

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}
1 个赞

您好,启用此主题组件后,移动设备上的批量选择选项将无法使用。

1 个赞

谢谢,我已经推送了一个更新

现在主题标题旁边应该有一个复选框

4 个赞

谢谢,问题已为我解决。

我找不到方法来在新主题列表的 Glimmer 中实现它。

我认为这个主题组件将被弃用。目前我们可以将其标记为 #deprecated。

我可能会尝试使用仅插件出口(Plugin Outlets)来实现一些新的东西,但这肯定不会有相同的效果。

3 个赞

这确实是一个非常有用的组件,尤其是它的外观,可以让论坛显示更多内容。可惜它将来无法使用了。

2 个赞

我非常喜欢这个组件,因为我觉得默认的移动视图很糟糕(最后一张帖子的头像在左边是最奇怪的)。可惜我不会编程,ChatGPT 也不会 :sob:,所以无法放弃它。

1 个赞

我会试试!

3 个赞

我提交了一个 PR :+1:

4 个赞

干得好!

我还没来得及试,你有没有成功添加主题徽章(未读帖子)?我做了一些测试,发现主题标题旁边的徽章添加起来并不容易。

不过,我离你的水平还差得很远。

1 个赞

@Steven 我没有测试!通过当前的修改,它不会替换任何东西,所以你可以期望它被显示出来(但可能不在预期的位置)。

编辑:
它看起来是这样的:
image

没有该组件的原始视图看起来是这样的:

chrome_4b5W8Pbd7o

你仍然想替换头像,还是就这样可以?
让我看看我是否能替换头像。

编辑2:

chrome_UEILhfhxua

2 个赞

感谢 @Arskshine 的工作!

我对该组件进行了一些修改,有一个提议想和大家分享。

这是现在的视图:

chrome_UEILhfhxua

我做了一个替代方案,恢复了摘要,并将主题徽章移到了标题旁边(抱歉截图是法语的,但设计是最重要的部分)

你们想要官方版本采用哪种设计?

4 个赞

你好 @Steven @Arkshine
非常感谢你的工作。:+1:

我还有另一件事:下面两张图片分别是新版本和旧版本的截图。正如你所看到的,文章标题的宽度在两个版本之间有所不同,这从换行处可以看出(抱歉,标题是中文,但重要的是换行位置)。



新版本是否有可能增加标题的长度?使用此组件的目的之一是显示更多信息。

我不知道如何编码,所以我的描述可能不太专业。

3 个赞

我尝试添加这段 CSS,它奏效了。

td .main-link {
    width: 100%;
    display: inline-block;
}
1 个赞