主题卡片

主题组件
,
62

The image shows a screenshot of a real estate listing from nhasi.com.vn for apartments located at 9/11 Nguyễn Văn Đà Kao, Quận 1, Tầng 1, featuring photographs of the building and local street scenery. (Captioned by AI)
The image shows a screenshot of a real estate listing from nhasi.com.vn for apartments located at 9/11 Nguyễn Văn Đà Kao, Quận 1, Tầng 1, featuring photographs of the building and local street scenery. (Captioned by AI)1080×2316 142 KB

目前，主页在三星 S23 Ultra 上显示不正确。一个帖子导致文本溢出并破坏了整个布局。

是帖子本身还是主题组件错误导致了此问题？

谢谢！

1 个赞
63

我已检查并发现问题是由帖子中的 Google Maps 链接引起的。

如果链接的格式是 maps.google.com，则可以正常工作。

2 个赞
65

主题卡片组件是否已为 Upcoming topic-list changes - how to prepare themes and plugins 做好准备？我刚升级了 discourse，并收到管理员通知说此组件需要更新。

66

它已经更新了，所以您不应该再看到任何警告。您能否仔细检查一下您运行的是否是此组件的最新官方版本，而不是分支版本？

1 个赞
67

哎呀，没错！我的错。我忘了我们正在运行 https://github.com/communiteq/discourse-topic-cards。

@RGJ 抱歉打扰您，您知道您的分支和主仓库之间目前有什么区别吗？

2 个赞
69

是的，主存储库得到了妥善维护……我将在下周初处理此事。

2 个赞
70

移动版本出于某种原因在启用或未启用“话题摘要”组件时都出现了问题（我有两个主题，有和没有这个组件的，两个都坏了）¯\_(ツ)_/¯，因此这段CSS已经足够

附注：将这段代码粘贴到后台管理中的移动端scss文件中

.topic-card__excerpt-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    white-space: normal !important; 
}

.topic-card__excerpt {
    max-width: 100% !important;
    overflow: hidden !important;
}

.topic-list-item {
    overflow: hidden !important;
    max-width: 100% !important;
    white-space: normal !important;
}

td {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: normal !important;
}
2 个赞
71

这如何应用于单个类别或类别列表，例如主题缩略图？

1 个赞
72

你需要在组件中添加逻辑。如果这不在官方路线图上，那么只能通过分支它来实现。

73

是的，这确实是我们需要的，@jordan-violet 你做了@manuel 建议的…

我没有这方面的技术知识。:disappointed_face:

1 个赞
74

我们选择了另一个我们更喜欢的方向。我们正在使用 Topic List Thumbnails，然后添加了一些我们自己的 CSS 来使其外观/行为符合我们的要求。您可以在此处查看实际效果：

5 个赞
75

看起来不错

1 个赞
76

嘿，你这么说我真的很感动！谢谢！

1 个赞
77

有什么办法能解释为什么有些标题是黑色的，而另一些是蓝色的？我已阅读了所有 3 个主题。

Title madness
Title madness1126×1542 210 KB

哈！发帖后不久就自己回答了。黑色表示未读回复。但由于旁边就有 # 气泡，所以可能不需要额外的颜色提示。

1 个赞
78

如果我想让主题卡片本身的颜色与背景的其余部分不同，我需要修改哪个 CSS？

另外，我没有看到相关说明，但主题卡片隐藏了批量操作图标，我们可以取消隐藏吗？
每次我需要对主题应用批量更新时，我都必须关闭它。

1 个赞
79

右键单击您希望更改的元素，然后选择“检查”。浏览器开发者工具将打开，您应该会看到 CSS 选择器。

1 个赞
80

谢谢，我添加了：

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

它与默认的“蓝色阴影”调色板完美配合。

好的，第二部分。我该如何编辑它以使其适用于 2 种颜色调色板？在浏览器切换到黑暗模式之前看起来还不错。

再次回答我自己的问题…

我昨晚了解了@media (prefers-color-scheme: light/dark)，所以一切都很好。

1 个赞
81

非常感谢 @eisammy!!!
我一直为此问题困扰，都快抓狂了！
由于某些原因，我无法将任何外部链接嵌入到单框 (onebox) 中，因此摘要中的长链接有效地将文本拉伸出框外，破坏了我网站的 UI。在你的帮助下，问题解决了！

1 个赞
82

此组件似乎存在问题：当我点击主题标题时，它会重新加载页面，即使在按预期使用 Discourse 导航到页面后也是如此。它第一次加载，然后页面又会无故重新加载。我最近更新到了当前版本并多次测试了所有可能性，直到禁用此组件后，这种异常行为才停止。

Discourse 3.5.0.beta7-dev - https://github.com/discourse/discourse version 773ae006b7d4315c01a37170b1ebad27332d515e

1 个赞
83

这个功能有希望在近期推出吗？