# Discourse类别标题主题组件

**URL:** https://meta.discourse.org/t/discourse-category-headers-theme-component/148682
**Category:** Theme component
**Created:** [2020年四月21日 01:02 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682 "2020-04-21T01:02:59Z")
**Posts on this page:** 20
**Page:** 9

<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年十月23日 01:06 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/168 "2025-10-23T01:06:36Z")

</div>

此 PR 支持深色模式分类徽标：

> <https://github.com/naidihr/discourse-category-headers/pull/21>
>
> This PR adds 2 new settings, \`show\_dark\_mode\_category\_logo\` and \`show\_dark\_mode\_…parent\_category\_logo\` to support dark mode category logos. If a category has dark mode logos uploaded, it will use that instead of the normal category logo. If the latter setting is ticked, it will use the parent's dark mode category logo if the category has no logo uploaded.

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月23日 23:04 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/169 "2025-10-23T23:04:38Z")

</div>

> [@tknospdr](#):
>
> 一个小请求，能否将“阅读更多”链接的颜色与文本的其他部分设为相同？  
> …  
> 文本的其余部分似乎会根据背景颜色自动选择白色或黑色。能否也为链接做同样的处理？

这个小问题也困扰了我一下。一点自定义 CSS 就能解决：

```plaintext
// 让“关于分类”标题的“阅读更多”链接使用与摘要文本相同的颜色

.category-about-url a {
  color: inherit;

}

```

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月23日 23:26 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/170 "2025-10-23T23:26:37Z")

</div>

我的“阅读更多”链接的剩余愿望：仅当确实存在更多内容时才显示它。我有一些很长的“关于”分类页面，也有一些很短的页面，我宁愿不提供一个指向没有额外内容的链接。

（我不知道这是否可行。对 TC 来说可能要求太多了。）

---

<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年十月24日 03:27 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/171 "2025-10-24T03:27:42Z")

</div>

当显示 **完整的类别描述** 时，我在主题创建器和我的开发实例上也遇到了这个问题。我正在调查。我怀疑是因为路由发生了变化，但跟踪的变量没有。

更新：我在这里为类别描述添加了展开/折叠功能。@nathank 还修复了以下错误：

> <https://github.com/naidihr/discourse-category-headers/pull/22>
>
> This PR introduces 2 new settings, \`expand\_and\_collapse\_category\_description\` (d…efault off) and \`read\_less\_link\_text\` (default 'Read less...') to allow the category description to be expanded/collapsed when the 'Read more' link is clicked.
> 
> For this to work, you need \`show\_category\_description\` to be enabled. If \`show\_full\_category\_description\` is enabled, the expand/collapse functionality will not be enabled, and the 'Read more' link will redirect to the About category topic as normal.
> 
> This PR also fixes the issue mentioned in \[this post\](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/165?u=natedhaliwal), where the full category descriptions were not updating when navigating between categories.

在 Ask Discourse 的一点提示下，使用了 `willDestroy` 和路由器服务。

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月24日 05:27 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/172 "2025-10-24T05:27:12Z")

</div>

哇，Nate！😮 55 个提交和 1 个 PR 在一个晚上……太棒了。  
我会关注合并，并期待尝试一下！

---

<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年十月24日 05:34 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/173 "2025-10-24T05:34:09Z")

</div>

对我来说，其实是上午晚些时候 😉。我会研究一下你关于检查描述是否还有更多文本的建议是否可行。我在测试时也觉得需要这个。

---

<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年十月24日 09:51 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/174 "2025-10-24T09:51:21Z")

</div>

> [@NateDhaliwal](#):
>
> 更新：我已在此处为类别描述添加了展开/折叠功能

这是一个很棒的补充！ ❤

只是一个小小的反馈：也许可以在类别标题的右上角或右边缘添加一个箭头图标，以向用户指示展开/折叠功能。但这是一个很好的开始，目前在链接文本中使用表情符号

 ![CleanShot 2025-10-24 at 11.50.33@2x](https://global.discourse-cdn.com/meta/original/4X/6/c/a/6cae3e71690e12eb5e67648d736c0b5a765a3f99.png)  
作为指示器也能胜任工作：

---

<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年十月24日 10:05 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/175 "2025-10-24T10:05:07Z")

</div>

PR 已合并 :git_merged:！

> [@jrgong](#):
>
> 在分类标题的右上角或右边缘添加一个箭头图标，以向用户指示展开/折叠功能

明白了 👍 。我来看看。

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月25日 00:41 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/176 "2025-10-25T00:41:53Z")

</div>

Nate，_展开/收起_功能非常棒，谢谢！

如果能根据是否存在更多文本来有条件地显示该链接，那就更好了——不过我也可以写更长的描述 😆

我确实看到了一些您可能还没来得及发现的问题：

- 分类和标签链接没有渲染它们的 SVG 图标
- 分类图片没有显示出来，所以我看到的是默认的网站图标

> **(截图)**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/1/f/1/1f16a3f60c713c35127768f60ed12fe8c72abcd3.png)

我设法解决了一个小问题：关于文本中的链接没有继承文本颜色，就像之前提到的_展开_链接一样 [earlier](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/169)。这段 CSS 对文本链接进行了样式设置，但没有影响分类和标签链接：

```css
// text link styling, to exclude category and tag links
.category-title-header .category-title-description 
a:not([data-type="tag"], [data-type="category"]) {
  color: inherit;
  text-decoration: underline;
}

```

> **(截图)**
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/0/0/0/000a94fb1c3692e4eb57a92052ffd286eedea386.png)  
> ![image](https://global.discourse-cdn.com/meta/original/4X/d/e/d/ded47ff7e39f5d7f2917ce0e68a57f6fdf68ce15.png)

我对这些更新印象深刻，希望我的 SVG 和图标问题只是一个小修复。

---

<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年十月25日 02:55 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/177 "2025-10-25T02:55:54Z")

</div>

> [@ToddZ](#):
>
> 分类和标签链接未呈现其 SVG 图标

有意思。您知道这之前就存在吗？

> [@ToddZ](#):
>
> 分类图片未显示，因此我看到了默认的网站图标

我来看看。我也遇到了这个问题。暂时尝试禁用“显示网站徽标”设置，这似乎可以解决问题。

> [@ToddZ](#):
>
> “关于”文本中的链接没有继承文本颜色，例如之前提到的“阅读更多”链接[earlier](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/169)。

谢谢。这是之前的情况，然后发生了一些变化吗？

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月25日 03:23 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/178 "2025-10-25T03:23:27Z")

</div>

“\> 暂时尝试禁用 `显示网站徽标` 设置，这似乎可以解决问题。

这招奏效了——谢谢！我本应该多尝试一些设置的。

至于 SVG 链接图标和文本链接颜色，我无法确定它们之前可能做了什么——我从未在“关于”文本的简短摘要部分设置过链接，但现在在展开的“阅读更多”部分有一些。

（我分享了那个链接颜色 CSS，以防它对您或其他人有帮助，但我知道这种样式调整不一定是组件的责任。）”

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月30日 07:32 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/179 "2025-10-30T07:32:36Z")

</div>

Nate，关于占位符类别/链接 SVG 图标的问题有什么想法吗？

![image](https://global.discourse-cdn.com/meta/original/4X/4/7/6/476301bbb9122e5f64319090c2c4068eb72d62cc.png) ![image](https://global.discourse-cdn.com/meta/original/4X/6/b/5/6b53bd908076828530768714ba38e2989d1f2a5d.png)  
我不知道在标题和主题中编码它们的方式是否有差异，但输出的结果却大相径庭：

> **类别链接对比**
>
> 标题中的类别链接：  
> ![image](https://global.discourse-cdn.com/meta/original/4X/4/7/6/476301bbb9122e5f64319090c2c4068eb72d62cc.png)
> 
> ```html
> <a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square">
> <span class="hashtag-icon-placeholder">
> <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
> <use href="#square-full"></use>
> </svg>
> </span>
> <span>Wild Speculations</span>
> </a>
> 
> ```
> 
> 主题中的类别链接：  
> ![image](https://global.discourse-cdn.com/meta/original/4X/6/b/5/6b53bd908076828530768714ba38e2989d1f2a5d.png)
> 
> ```html
> <a class="hashtag-cooked" href="/c/wild-speculations/5" data-type="category" data-slug="wild-speculations" data-id="5" data-style-type="square" aria-label="Wild Speculations">
> <span class="hashtag-category-square hashtag-color--category-5"></span>
> <span>Wild Speculations</span>
> </a>
> 
> ```

以及

> **标签链接对比**
>
> 标题中的标签链接：  
> ![image](https://global.discourse-cdn.com/meta/original/4X/f/9/e/f9ec9e11dcefa60f23ed997bee0d48c64a78645c.png)
> 
> ```html
> <a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag">
> <span class="hashtag-icon-placeholder">
> <svg class="fa d-icon d-icon-square-full svg-icon svg-node">
> <use href="#square-full"></use>
> </svg>
> </span>
> <span>ai</span>
> </a>
> 
> ```
> 
> 主题中的标签链接：  
> ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/2/6126aecaa536337e5658185b47c5a3c56a145dcd.png)
> 
> ```html
> <a class="hashtag-cooked" href="/tag/ai" data-type="tag" data-slug="ai" data-id="5" data-style-type="icon" data-icon="tag" aria-label="ai">
> <svg class="fa d-icon d-icon-tag svg-icon hashtag-color--tag-5 svg-string" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
> <use href="#tag"></use>
> </svg>
> <span>ai</span>
> </a>
> 
> ```

---

<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年十月30日 08:43 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/180 "2025-10-30T08:43:29Z")

</div>

这几天我一直很忙（明天会处理）。我怀疑这包含在类别描述中。如果您使用完整描述，它仍然会发生吗？

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月30日 09:26 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/181 "2025-10-30T09:26:29Z")

</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年十月30日 09:34 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/182 "2025-10-30T09:34:18Z")

</div>

我会尝试看看我能做什么。最后的手段是使用一些逻辑（可能很复杂）来根据颜色调整它们（可能无法考虑图标）。如果有人有更好的方法，我愿意听取建议。

@ToddZ 如果你看看官方 [这个例子](https://meta.discourse.org/c/bug/1) 的 [Category Banners](https://meta.discourse.org/t/category-banners/86241) 组件（我认为 Meta 使用了它），它也有这个问题。

---

<div class="post-metadata">

### Author: ![ToddZ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/toddz/32/328350_2.png) [@ToddZ](https://meta.discourse.org/u/ToddZ)
#### Post date: [2025年十月30日 10:39 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/183 "2025-10-30T10:39:53Z")

</div>

> [@NateDhaliwal](#):
>
> 官方的 [Category Banners](https://meta.discourse.org/t/category-banners/86241) 组件……也有这个问题。

我明白了……！有人提到了这个问题：

> [@Category Banners](https://meta.discourse.org/t/category-banners/86241/234?u=toddz):
>
> This component works well with the category tag component but unfortunately is not compatible with the tag icon component. While tag icons function elsewhere on the site, they do not work in the description section. Is there a way to fix this?

我安装了 Category Banners 来验证分类图标是否有效——但它们没有。分类图标和标签图标都显示占位符，就像 Category Headers 一样。无论在设置中选择哪个输出，结果都一样。

如果有一种方法可以让他们正常处理，那就太好了，但我不想让你采取复杂的变通方法。

---

<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年十月31日 11:34 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/184 "2025-10-31T11:34:38Z")

</div>

我刚刚测试了与 Horizon 主题的兼容性。总的来说，它基本上是可行的，但唯一的问题是，目前由 category headers 主题组件使用的插件出口在 Horizon 主题中位于 `list-controls` 容器内。因此，整个类别标题会一直固定。

建议的解决方案是更改插件出口或添加一个选项来选择 `list-controls` 容器外部的另一个插件出口，例如 `discovery-list-controls-above` 出口。

如果您愿意，我可以创建一个拉取请求 @NateDhaliwal

---

<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年十一月1日 01:11 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/185 "2025-11-01T01:11:49Z")

</div>

很有意思。感谢你提出这个问题！我会去调查一下。

---

<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: [2026年一月23日 11:17 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/186 "2026-01-23T11:17:13Z")

</div>

我为此主题组件提交了一个拉取请求（PR）。我有点笨拙，所以一个 PR 里包含了两个不同的内容：😭

- 功能：在分类标题描述后添加一个插件出口（plugin outlet）
- 修复：该主题组件没有为背景图片使用 S3 CDN

您能看一下并合并吗？

---

<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: [2026年一月23日 11:24 UTC](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682/187 "2026-01-23T11:24:29Z")

</div>

看起来不错！我已经着手合并了。（另外，很抱歉这么晚才看到）

[上一頁](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682.md?page=8)

[下一頁](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682.md?page=10)
