# 用户卡：显示排行榜排名

**URL:** <https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735>\
**Category:** Theme component\
**Tags:** gamification, user-card\
**Created:** [2025年八月15日 13:26 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735 "2025-08-15T13:26:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2025年八月15日 13:26 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735/1 "2025-08-15T13:26:55Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **摘要** | 添加用户卡片排名的微小组件 |
| 🛠 | **代码库** | [repo](https://github.com/chapoi/usercard-leaderboard-rank) |
| ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Discourse 主题新手？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

用户卡片已显示欢呼次数，因此此组件添加了显示排名：

 ![CleanShot 2025-08-15 at 15.15.05@2x](https://global.discourse-cdn.com/meta/original/4X/3/9/1/3919891c4473eb30561e7771e24d7907e55399ed.jpeg)

“Rank”一词取自排行榜本身，因此如果您全局更改它，这里也会反映出来。

### 设置

只有三个设置：

 ![CleanShot 2025-08-15 at 15.16.47@2x](https://global.discourse-cdn.com/meta/original/4X/0/e/8/0e83d70f8626e5fdf3c6809eecb8b44f2e8b9cff.png)

如果未选择 ID，则默认为 1。

希望这能赢得“影响最小的主题组件”奖 🏆

---

<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年八月15日 13:29 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735/2 "2025-08-15T13:29:19Z")

</div>

那很快 😃

你觉得把它显示在“Cheers”分数旁边的同一个 div 中，而不是单独的 div 中，怎么样？

这样它看起来就像：

> Cheers: 1234 (🎖 #3)

（作为图标，也许是 FA5 中与排行榜更相关的图标 + () 内的内容也链接到排行榜）

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2025年八月15日 13:32 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735/3 "2025-08-15T13:32:25Z")

</div>

很棒的想法，但我觉得这是完全不同的情况。现在，我通过一个连接器将其放入，而欢呼声来自核心中的另一个连接器。据我所知，除非我们在同一个连接器中通过核心来做，否则这是不可能的。

---

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2025年八月15日 13:34 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735/4 "2025-08-15T13:34:14Z")

</div>

今天我还学到了新东西——可以通过向 URL 添加参数来更改句点。

很棒的 TC！

---

<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年八月15日 14:36 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735/5 "2025-08-15T14:36:09Z")

</div>

谢谢你的解释！

那么我猜我又要进行一轮 CSS 变通了 😃

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2025年八月15日 17:17 UTC](https://meta.discourse.org/t/usercard-show-leaderboard-rank/378735/6 "2025-08-15T17:17:50Z")

</div>

> [@jrgong](#):
>
> 那我想我得再做一轮 CSS 变通了 😃

如果你需要帮助，请告诉我，我很确定这是可行的。