主题卡片

请告诉我需要更改文件中的哪些内容才能更改标签的位置。
我认为标题应该放在前面。

之前:

之后:

4 个赞

非常感谢您提供的这个出色的 TC。外观确实现代、简洁且显高档。

有一个问题和请求,

搜索结果显示也能拥有同样的外观吗?如果搜索结果显示与 TC 的显示相同,那将是非常好的,考虑到我们的用户经常使用搜索功能。

再次感谢您的这项工作。

2 个赞

那会很酷,但不幸的是,那是应用程序的一个完全不同的区域。所以不可能只是在那里也应用它。这基本上将是一个全新的组件来实现这一点。

3 个赞

@chapoi 如何减小图片大小和主题区域?

主题卡片太大了

1 个赞

这是一个非常棒的主题组件,我可以提出一些改进建议,包括添加一个设置页面来编辑以下内容:

  • 圆角设置值或关闭
  • 阴影设置值或关闭
  • 回复、查看和活动启用/禁用设置
  • 显示海报真或假
3 个赞

只是想分享一下,以防其他人觉得有帮助:

对我来说,当我在 Minima 主题上安装这个组件时,遇到了主题卡片的最大高度不够的问题,如果存在缩略图的话。

这是我用来修复它的相关 CSS:

// 增加带有缩略图的主题卡片的最大高度
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(当我通过检查器查看时,默认高度似乎是 210px)

不过可能需要调整——我还没有在移动设备宽度上进行检查。

之前

之后

4 个赞

我想知道是否可以配置此项以选择使用主题卡的主题。如果将其用于#theme,那将非常棒,因为主题缩略图在移动设备上不太友好。

非常好的组件

3 个赞

是的,这就是我之前说的意思:根据其他参数,210px 可能太小,或者 275px 可能太大。很难有一个放之四海而皆准的解决方案。

我可能会添加更多设置(例如,根据 @Heliosurge 的要求选择类别),包括可能的最大尺寸设置,以便每个论坛都可以进行调整。

5 个赞
  1. 向右滑动照片怎么样?
    放置照片和不放置照片时,布局有所不同且不一致。
  2. 底部文本似乎会被截断,因为部分内容已显示。
3 个赞

我想知道这个主题组件在 Air Theme 上的外观,以及结合有图片和无图片的主题。它看起来很有希望,但还没有完全实现。也许仅 CSS 就能解决问题,或者需要更深入的工作。

在手机上看起来不错!

我现在将卸载它,但我会关注这个话题,因为它看起来非常符合预期。

是的,当主题本身没有图片时,获取分类图片将是一个很好的补充。

3 个赞

Topic Cards 组件需要做些什么才能像官方的 Topic List Thumbnails 在博客模式下那样,不仅显示主题的 :heart:(就像现在一样),还能显示浏览量和评论数?

Topic List Thumbnails

Topic Cards

另外,我认为 Topic List Thumbnails 使用上次活动日期(上面是“1d”)比 Topic Card 的“发布”日期更好。活动日期与 Discourse 的默认设置一致,并且能为用户提供更多信息。此外,设计上将其放在浏览量、点赞数和帖子数旁边非常合适。

如果你关心的话,在测试了 Default 主题、https://meta.discourse.org/t/discourse-air-theme/197703、Topic Cards 和 Topic List Thumbnails 的各种组合,以及大量的 CSS 调整后,这里有一些额外的想法。

我最终选择了Topic Cards + Default 主题,并加入了 Modern Category + Group Boxes,它为分类添加了卡片,并且与主题卡片风格一致。

原因:

  • Topic Cards 能优雅地处理带图片和不带图片的帖子。
  • Air 主题非常酷,但 Topic Cards 加上 Modern Category 已经基本能满足需求。
  • 坚持使用 Default 主题可以确保开箱即用地兼容任何官方主题组件。
3 个赞

好的,也许这个问题更简单一些: :sweat_smile:

目前,任何页面末尾的“推荐主题”也以卡片形式显示主题。虽然我喜欢主页面上的卡片,但我认为它们在所有页面末尾都显得过于庞大,分散了对实际页面内容或讨论的注意力。

有没有办法在不影响主页面主题卡片的情况下,显示一个纯粹的“推荐主题”列表(尽可能接近默认主题)?

2 个赞

目前还没有,但我觉得这是一个很好的请求,所以你可以尝试提出一个功能请求,也许这样它会被采纳。

3 个赞

好的,谢谢。已完成,也为我上面的其他请求完成:

顺便说一下,昨天我尝试了这个,因为我遇到了内容溢出卡片的问题:

这不会弄乱移动视图吗?我刚试过,在我这里确实弄乱了。

3 个赞

我会看看的。至少我会添加一个高度设置,以便更容易进行调整。我会设置一个提醒,以免忘记。

5 个赞

一些可能有助于限制主题卡片高度的观察结果。我没有彻底测试过,但似乎……

  • 虽然描述总是限制在三行,但标题可能会跳到两行或更多行。标题相对容易需要第二行,设计可以考虑到这一点。
  • 当有很多标签并且它们不适合与类别并排时,它们都会跳到下面新的一行。如果标签总是从类别旁边开始渲染,然后在第一行不适合的标签换到第二行,那将更自然、更节省空间。
  • “发布于[日期]”和 :heart: 出现在作者下方的新行中。然而,“发布于”元素可以与 :heart: 在同一行与作者对齐,靠右。这将节省每个条目的垂直空间,并降低内容溢出的风险。

万一关于标签的解释不清楚。在这里,您可以看到它们如何在新的一行开始,而不是像默认情况下那样从类别旁边开始:

3 个赞

这里发生了这种情况

2 个赞

我想知道是否可以在标签上强制限制为1行,就像标题限制为2行和描述限制为3行一样。

大多数 Discourse 实例会使用 0-5 个标签,对它们来说一行绰绰有余。有些(比如我们的)可能会大量使用标签,但我们不需要在主题卡片上看到所有标签。只看到前几个就足以给出一个想法。

为行数添加约束将使主题卡片在不同的图像尺寸和纵横比下更加可靠:

  • 类别和标签各 1 行
  • 标题最多 2 行
  • 描述最多 3 行
  • 作者、发布时间和点赞数各 1 行。
3 个赞

供参考,我们将在 Add icons for Views and Replies, and Last Activity date in Topic Cards 上处理这个问题。

4 个赞

啊,是的,我忘了在这里评论我的更新:我不得不将该代码添加到 desktop.scss 而不是 common.scss 中。

我无法再编辑我的原始评论,但我已在我主题组件中更新了它:Minima Adjustments for Topic Cards

3 个赞