# 主题卡片

**URL:** https://meta.discourse.org/t/topic-cards/296048
**Category:** Theme component
**Tags:** official, topic-cards
**Created:** [2024年二月20日 12:04 UTC](https://meta.discourse.org/t/topic-cards/296048 "2024-02-20T12:04:45Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [2025年一月31日 14:36 UTC](https://meta.discourse.org/t/topic-cards/296048/62 "2025-01-31T14:36:27Z")

</div>

![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)](https://global.discourse-cdn.com/meta/original/4X/6/2/1/62196bc152185b44fc2c6c65adff8d4fbd8c86c0.jpeg)  
目前，主页在三星 S23 Ultra 上显示不正确。一个帖子导致文本溢出并破坏了整个布局。

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

谢谢！

---

<div class="post-metadata">

### Author: ![thaidb](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thaidb/32/68488_2.png) [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [2025年一月31日 14:55 UTC](https://meta.discourse.org/t/topic-cards/296048/63 "2025-01-31T14:55:09Z")

</div>

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

如果链接的格式是 [maps.google.com](http://maps.google.com)，则可以正常工作。

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2025年二月13日 12:59 UTC](https://meta.discourse.org/t/topic-cards/296048/65 "2025-02-13T12:59:10Z")

</div>

主题卡片组件是否已为 [Upcoming topic-list changes - how to prepare themes and plugins](https://meta.discourse.org/t/upcoming-topic-list-changes-how-to-prepare-themes-and-plugins/343404) 做好准备？我刚升级了 discourse，并收到管理员通知说此组件需要更新。

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2025年二月13日 13:12 UTC](https://meta.discourse.org/t/topic-cards/296048/66 "2025-02-13T13:12:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2025年二月13日 13:24 UTC](https://meta.discourse.org/t/topic-cards/296048/67 "2025-02-13T13:24:53Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [2025年二月13日 15:44 UTC](https://meta.discourse.org/t/topic-cards/296048/69 "2025-02-13T15:44:15Z")

</div>

> [@icaria36](#):
>
> 抱歉打扰您，您知道您的分支和主存储库之间目前有什么区别吗？

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

---

<div class="post-metadata">

### Author: ![eisammy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eisammy/32/528804_2.png) [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [2025年二月20日 08:37 UTC](https://meta.discourse.org/t/topic-cards/296048/70 "2025-02-20T08:37:34Z")

</div>

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

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

```plaintext
.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;
}

```

---

<div class="post-metadata">

### Author: ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2025年三月17日 15:33 UTC](https://meta.discourse.org/t/topic-cards/296048/71 "2025-03-17T15:33:30Z")

</div>

这如何应用于单个类别或类别列表，例如[主题缩略图](https://meta.discourse.org/t/topic-list-thumbnails/150602)？

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2025年三月17日 16:21 UTC](https://meta.discourse.org/t/topic-cards/296048/72 "2025-03-17T16:21:58Z")

</div>

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

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [2025年四月14日 18:20 UTC](https://meta.discourse.org/t/topic-cards/296048/73 "2025-04-14T18:20:48Z")

</div>

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

> [@manuel](#):
>
> 你需要将逻辑添加到组件中。如果这不在官方路线图中，那么只能通过分支来实现。

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

---

<div class="post-metadata">

### Author: ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2025年四月14日 19:25 UTC](https://meta.discourse.org/t/topic-cards/296048/74 "2025-04-14T19:25:18Z")

</div>

我们选择了另一个我们更喜欢的方向。我们正在使用 [Topic List Thumbnails](https://meta.discourse.org/t/topic-list-thumbnails/150602)，然后添加了一些我们自己的 CSS 来使其外观/行为符合我们的要求。您可以在此处查看实际效果：

> **[Netwrix Product Announcements](https://community.netwrix.com/tag/announcement)**
>
> Stay up to date with the latest Netwrix product releases, feature updates, and enhancements from Netwrix — all in one place.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2025年四月14日 19:31 UTC](https://meta.discourse.org/t/topic-cards/296048/75 "2025-04-14T19:31:52Z")

</div>

看起来不错

---

<div class="post-metadata">

### Author: ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [2025年四月14日 20:59 UTC](https://meta.discourse.org/t/topic-cards/296048/76 "2025-04-14T20:59:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年五月24日 23:14 UTC](https://meta.discourse.org/t/topic-cards/296048/77 "2025-05-24T23:14:53Z")

</div>

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

 ![Title madness](https://global.discourse-cdn.com/meta/original/4X/0/b/7/0b7dde8388178c3878fede8e6ed3812b1bf5964c.jpeg)

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

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年五月27日 15:31 UTC](https://meta.discourse.org/t/topic-cards/296048/78 "2025-05-27T15:31:09Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [2025年五月27日 22:11 UTC](https://meta.discourse.org/t/topic-cards/296048/79 "2025-05-27T22:11:05Z")

</div>

> [@tknospdr](#):
>
> CSS 我会如何修改

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

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年五月28日 00:57 UTC](https://meta.discourse.org/t/topic-cards/296048/80 "2025-05-28T00:57:52Z")

</div>

谢谢，我添加了：

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

```

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

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

再次回答我自己的问题…

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

---

<div class="post-metadata">

### Author: ![KBExit](https://avatars.discourse-cdn.com/v4/letter/k/71e660/32.png) [@KBExit](https://meta.discourse.org/u/KBExit)
#### Post date: [2025年五月31日 17:06 UTC](https://meta.discourse.org/t/topic-cards/296048/81 "2025-05-31T17:06:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![eisammy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eisammy/32/528804_2.png) [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [2025年六月9日 21:46 UTC](https://meta.discourse.org/t/topic-cards/296048/82 "2025-06-09T21:46:17Z")

</div>

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

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

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年七月8日 16:13 UTC](https://meta.discourse.org/t/topic-cards/296048/83 "2025-07-08T16:13:19Z")

</div>

> [@tknospdr](#):
>
> 另外，我没有看到提到，但主题卡片隐藏了批量操作图标，我们可以取消隐藏它吗？  
> 每次需要对主题应用批量更新时，我都必须将其关闭。

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

[上一頁](https://meta.discourse.org/t/topic-cards/296048.md?page=3)

[下一頁](https://meta.discourse.org/t/topic-cards/296048.md?page=5)