# 主题卡片

**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:** 10
**Page:** 6

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2025年十月8日 18:14 UTC](https://meta.discourse.org/t/topic-cards/296048/104 "2025-10-08T18:14:46Z")

</div>

您可以创建一个新组件并将其添加到您的主题中

> [@Customizing themes without an Edit code button](https://meta.discourse.org/t/customizing-themes-without-an-edit-code-button/329601):
>
> Sometimes, you may want to customize a Discourse theme but find that there’s no “Custom code” section with an “Edit code” button available. This often happens with remote themes (themes installed from an external source). Here’s how you can still add your customizations: Understanding the limitation For remote themes, you’ll typically see a message like: If you want to edit this theme, you must submit a change on its repositorydiscourse2 Hos…

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2025年十月19日 12:47 UTC](https://meta.discourse.org/t/topic-cards/296048/105 "2025-10-19T12:47:15Z")

</div>

大家好

我分叉了 TC 并进行了一些修改，添加了一些新功能：

- 没有缩略图时的占位符
- 为桌面/移动设备选择网格和列表样式
- 更精细化的尺寸控制
- 更精细化的边框半径控制

您可以在仓库中找到详细信息：[GitHub - jrgong420/discourse-topic-cards: This changed the topic list into cards with a modified layout, and a thumbnail if available.](https://github.com/jrgong420/discourse-topic-cards/)

> ⚠ 披露：此分叉是在 AI 编码工具的帮助下计划、实施和测试的。请自行承担风险。

---

<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年十二月15日 00:21 UTC](https://meta.discourse.org/t/topic-cards/296048/106 "2025-12-15T00:21:23Z")

</div>

您能提供几个屏幕截图（SS）来演示列表和网格视图，以及您可能添加的其他功能吗？

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2025年十二月18日 15:49 UTC](https://meta.discourse.org/t/topic-cards/296048/107 "2025-12-18T15:49:06Z")

</div>

嘿，各位，还有 @Heliosurge

与此同时，我们对主题组件进行了大量的重新设计和扩展，增加了大量新功能，对所有组件进行了全面重构，并进行了广泛的结构调整。

此外，我们还添加了一些新功能。请在这里查看：

> [@fire Roast my Theme Component: Advanced Topic Cards](https://meta.discourse.org/t/roast-my-theme-component-advanced-topic-cards/391984):
>
> Hey guys Disclaimer: No AI was hurt in building this theme component smiley Yes guys, I am guilty of shamelessly vibe-coding a rip off of the [Topic Cards](https://meta.discourse.org/t/topic-cards/296048) theme component. Hence a huge shoutout to the original authors and contributors for the great work! While at first this was a fork, over 80% of the code and structure was completely rewritten. We added a ton of new features and on first glance all the various settings can be quite overwhelming. Advanced Topic Cards - Preliminary Release …

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2026年一月27日 16:48 UTC](https://meta.discourse.org/t/topic-cards/296048/108 "2026-01-27T16:48:09Z")

</div>

当启用“显示建议主题”时，在使用相关主题时，它似乎与标题不能很好地协同工作。

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/2/1/421ec4e87956b8da2044c56fe7b7761a94832ddc.png)

---

<div class="post-metadata">

### Author: ![TheWalkingDead110](https://avatars.discourse-cdn.com/v4/letter/t/a88e57/32.png) [@TheWalkingDead110](https://meta.discourse.org/u/TheWalkingDead110)
#### Post date: [2026年二月16日 17:47 UTC](https://meta.discourse.org/t/topic-cards/296048/109 "2026-02-16T17:47:17Z")

</div>

请创建一个用于设置移动端卡片最大高度的选项。

---

<div class="post-metadata">

### Author: ![Luna\_Mora](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/luna_mora/32/527917_2.png) [@Luna\_Mora](https://meta.discourse.org/u/Luna_Mora)
#### Post date: [2026年二月22日 04:33 UTC](https://meta.discourse.org/t/topic-cards/296048/110 "2026-02-22T04:33:04Z")

</div>

在使用主题卡片组件时，是否可以重新添加批量操作功能？我用一些 CSS 调整隐藏了它，但它的用户体验不太好 😅 最好是默认包含在组件中。

哦，我输入这段话的时候向上滚动了一下，发现这个请求已经被提过了。有没有关于是否可以实现它的想法？

这是我用来使其至少可用（尽管不美观）的 CSS：

```plaintext
.topic-cards-list .topic-list-header {
  display: block;

  .topic-list-data.posters,
  .topic-list-data.posts,
  .topic-list-data.views,
  .topic-list-data.activity {
    display: none;
  }

  .topic-list-data.default > span:not([class]) {
    display: none; // 移除没有 span 类的“Topic”多余文本
  }
}

.topic-list-body {
  tr.bulk-selecting.topic-card {
    gap: 0; // 移除复选框和主题卡片其余部分之间的大间距
  }
}

```

---

<div class="post-metadata">

### Author: ![IrisBetty](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@IrisBetty](https://meta.discourse.org/u/IrisBetty)
#### Post date: [2026年七月21日 18:52 UTC](https://meta.discourse.org/t/topic-cards/296048/111 "2026-07-21T18:52:12Z")

</div>

感谢提供这个组件。它在我们的网站上承担了大量工作，我们非常感激。

有一个请求。我们运营的是一个成员使用真实姓名的社区，因此我们将 UX 中的“优先显示用户名”设置为关闭，并将帖子中的“显示名称”设置为开启。现在，帖子、用户卡片和个人资料中都能正确显示全名。唯一仍然显示 @用户名 的地方是主题卡片上的作者。

是否可以添加一个设置，让卡片作者遵循站点的名称显示设置，显示成员的全名，并在未设置名称时回退到用户名？

很乐意在我们的实例上测试任何更改并反馈结果。再次感谢您构建和维护它。

 ![Screenshot 2026-07-21 at 19.40.58](https://global.discourse-cdn.com/meta/original/4X/9/6/2/96268ec9aae862e15b0a6a28061d0d22850095f5.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2026年七月21日 20:37 UTC](https://meta.discourse.org/t/topic-cards/296048/112 "2026-07-21T20:37:55Z")

</div>

当然可以！理想情况下，我们应在大多数显示用户名的地方支持此功能。我刚刚在此处添加了该功能：[FEATURE: support prioritizing real names - Pull Request #84 - discourse/discourse-topic-cards - GitHub](https://github.com/discourse/discourse-topic-cards/pull/84) — 因此，在您更新组件后，应该就能看到真实姓名了。

---

<div class="post-metadata">

### Author: ![IrisBetty](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@IrisBetty](https://meta.discourse.org/u/IrisBetty)
#### Post date: [2026年七月21日 21:30 UTC](https://meta.discourse.org/t/topic-cards/296048/113 "2026-07-21T21:30:45Z")

</div>

太棒了，Kris，谢谢。Bronwyn

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