# 为标签添加一个 data-tag-group 属性

**URL:** https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410
**Category:** Feature
**Tags:** tag-groups
**Created:** [2022年七月29日 14:58 UTC](https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410 "2022-07-29T14:58:25Z")
**Posts on this page:** 5
**Page:** 1

<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: [2022年七月29日 14:58 UTC](https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410/1 "2022-07-29T14:58:25Z")

</div>

现在标签的名称存储在 `data-tag-name` 数据属性中：

![Screenshot from 2022-07-29 15-50-16](https://global.discourse-cdn.com/meta/original/4X/6/d/c/6dcde359ea8a0650718773cbdbea675d38f66de7.png)

是否也可以添加一个 `data-tag-group` 属性？这将有助于在用户体验中对不同组的标签进行样式设置和区分。我发现这个用例特别有帮助，例如在仅使用标签的设置中。然后你可能会有一些顶级标签，当该组的标签具有独特的外观时，导航会更加直观。

我看到多年前曾有人请求 [添加一个 CSS 类](https://meta.discourse.org/t/request-add-css-class-containing-tag-group/68492)。再次提出这个问题，因为情况可能已经发生变化，而且使用数据属性来实现可能更直接？

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年六月23日 16:15 UTC](https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410/2 "2024-06-23T16:15:06Z")

</div>

这也可以用来根据标签组分配标签图标吗？我的标签图标设置现在非常糟糕，有什么方法可以简化它们就好了 :chefs_kiss:

---

<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: [2024年六月23日 16:19 UTC](https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410/3 "2024-06-23T16:19:40Z")

</div>

我也会这么认为。以及其他改变标签样式的组件，例如 [Discourse Coloring Tag](https://meta.discourse.org/t/discourse-coloring-tag/203614) 或 [https://meta.discourse.org/t/colored-tag-styles/214871。](https://meta.discourse.org/t/colored-tag-styles/214871%E3%80%82)

需要调整组件来实现它。不过，就标签样式而言，这会相当直接。

---

<div class="post-metadata">

### Author: ![ncaming215](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ncaming215/32/205701_2.png) [@ncaming215](https://meta.discourse.org/u/ncaming215)
#### Post date: [2024年六月23日 17:53 UTC](https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410/4 "2024-06-23T17:53:53Z")

</div>

> [@JammyDodger](#):
>
> 这能用来根据标签组分配标签图标吗？我目前的标签图标设置非常糟糕，如果能简化一下就好了 :chefs_kiss:

我也是。我将近一千行可以变成 8 行。 😅

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [2025年十月20日 19:47 UTC](https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410/12 "2025-10-20T19:47:08Z")

</div>

只是想分享一下，这个功能已经有人着手开发了，但后来发现这是一个很大的改动，所以关闭了。这是一个很棒的想法，但不幸的是，团队近期不太可能采纳它。

> <https://github.com/discourse/discourse/pull/27949>
>
> \## Overview
> 
> This commit adds the \`data-tag-groups\` attribute to tags, making …it easier to use CSS selectors to batch select tags belonging to certain tag groups.
> 
> An example:
> 
> \`\`\`html
> \<a href="/tag/hidden" data-tag-name="hidden" data-tag-groups="Hidden Tag Group, non-hidden tags" class="discourse-tag box"\>hidden\</a\>
> \`\`\`
> 
> Related meta topic: https://meta.discourse.org/t/add-a-data-tag-group-attribute-for-tags/234410
> 
> \## Detailed changes
> 
> Add data-groups to these...
> \- \[\] Tags for topics
> - \[x\] The effect has been shown
> - \[\] Tests already written
> - \[\] Confirms that there are no performance issues
> \- \[\] TagChooser at the top of TopicList
> - \[x\] The effect has been shown
> - \[x\] Tests already written
> - \[\] Confirms that there are no performance issues
> \- \[\] Tags on the sidebar
> - \[x\] The effect has been shown
> - \[\] Tests already written
> - \[\] Confirms that there are no performance issues
> \- \[\] Tags on the \`/tags\` page
> - \[x\] The effect has been shown
> - \[\] Tests already written
> - \[\] Confirms that there are no performance issues
> \- \[\] Search bar tags
> - \[x\] The effect has been shown
> - \[\] Tests already written
> - \[\] Confirms that there are no performance issues
> \- \[\] Composer tags chooser
> - \[x\] The effect has been shown
> - \[\] Tests already written
> - \[\] Confirms that there are no performance issues
> \- \[\] ~~Tags in the post body~~ Maybe next PR
> 
> 
> \## DEV Improvements
> 
> Partially rewrote \`defaultRenderTag\` for better scalability and clarity:
> 
> The new \`defaultRenderTag\` reserves an interface for theme components to avoid the need for components to completely rewrite \`defaultRenderTag\` to provide custom tag renderer.
> 
> For example, you can now replace the tagRenderer like this:
> 
> \`\`\`javascript
> api.replaceTagRenderer((tag, params) =\> {
> return defaultRenderTag(tag, params, {
> extraClass: "custom-tag-class",
> contentFn(old) {
> return \`${iconHTML("tag")}${old}\`;
> },
> });
> });
> \`\`\`
> 
> This has a significant benefit for discourse tag icons. Since the \[old way of code\](https://github.com/discourse/discourse-tag-icons/blob/main/javascripts/discourse/initializers/tag-icons.js#L9-L84) the changes made by this PR will be completely overwritten by discourse tag icons, and the theme component must be updated accordingly.
> After applying the new interface, it can automatically synchronize changes with the \`defaultRendererTag\` in core.