标签图标

:discourse2: 摘要 标签图标 允许在标签旁边显示图标。
:eyeglasses: 预览 在 Discourse 主题创建器中预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/discourse-tag-icons
:open_book: 初次接触 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

功能

以下是当标签样式设置为默认(简单)时的效果示例:

以下是当标签样式设置为 box 时的效果:

设置

名称 描述
标签图标列表 以“标签 slug,图标,图标颜色”的格式输入以逗号分隔的配置。图标颜色为可选。
SVG 图标 此主题组件中使用的 FontAwesome 6 图标列表

:discourse2: 由我们托管? 主题组件可在我们的标准版、商业版和企业版计划中使用。

79 个赞
Is anyone else using tags on a Discourse forum in a big way?
Events Plugin :calendar:
Discourse Coloring Tag
Category Icons
How to test themes or theme components?
Discourse更新后,主页排版混乱
How to make a category-list-like front page for a tag-oriented site?
Request or idea for a component: topic title or topic flair
Admin guide to tags in Discourse
Customizing your site with existing theme components
Category Icons
Setup Continuous Integration using GitHub Actions
Tag change color for element in a Tag group
Add color and subcategory styling to category and chat mentions
Setting tag style to 'box'?
MD Topic List component
Remove Dashes from Tag Names
Links in tag descriptions aren’t escaped when using Tag Icons
Good approach for data sensitivity markings?
We're upgrading our icons to Font Awesome 6!
(Superseded) Add a custom fontawesome icon and color to your tag
How to create a tag "🎥"?
How to create a tag "🎥"?
Does anyone know how to add emojis to tags?
Renaming Tags: Consequences
Workarounds to support alternate tag structures
Difficult contrast of tags and categories when the text colour is white
Tag Banners
Some of my tags have # and some don't
The Horizon theme does not display tags on topic lists
Default tag icon
Tag Icons + Tag Banners + Right Sidebar Blocks
Add backgroundColor option for Tag Icons theme-component
For newly created labels, assign a random style
Trying to use css to insert png icons in tag boxes
Workarounds to support alternate tag structures
Uncaught TypeError: Cannot read property 'apply' of undefined
A picker for font awesome icons
api.onPageChange not working with endless scroll
Volunteer Activities - a simple setup for non-hierarchical collaboration
Looking for a freelancer to implement a custom Discourse theme (based on an existing mockup)
Include an emoji when creating a new topic?
MD Topic List Mobile component
Javascript error + content missing after update 2.6.0.beta3
Emoji in tag - thoughts and experiences
A playful approach to category moderation

Does this also work with custom svg?

2 个赞

Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.

7 个赞

Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

3 个赞

Could the icon be added to the dropdown menu as well?

9 个赞

This allows one to add custom icons to tag, but what if I wanted to change the color of the box of the tag?

3 个赞

You can do that with CSS, for example, the code below will set the “theme-component” text color to red:

.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}

(This is just for illustrative purposes only, you’ll need to figure out your own CSS.)

2 个赞

I see thanks. I just have to list every tag I have in the CSS by name and specify the color. Would be nice though if I could do this from the admin panel like with the theme components using a comma separated list and providing the hex code just like for the icons.

Is there a way I can set a color for all tags in a tag group via CSS?

4 个赞

I ended up getting something like this: image (The default tag icon is still here)

Does anyone see this kind of result?

Look for “tag style” in your site settings, and change it to simple, that will remove the grey bullets.

I see, thanks, but I will need the default grey bullets for all other tags. I achieved this by remove that bullets for specific tag:

a[data-tag-name="test1"]::before {
    display:none!important;
}

image

3 个赞

看起来这是一个很棒的改进。给作者提个建议:我打算给我的平淡标签加些装饰,其中一些标签用于按语言标记帖子(例如我有“castellano”、“deutsch”等标签),配上小国旗图标。按照上述方法上传自定义的 .svg 文件是否可行?或者是否有预配置的图标集,甚至是 Discourse 内置的表情符号集可以使用?

2 个赞

使用表情符号来表示国家旗帜是有意义的,但该组件并不使用表情符号,而是使用像 Font Awesome 这样的图标集中的图标。

你可以尝试直接在标签中添加表情符号。我本地测试过,棘手的地方在于标签中不能包含空格。示例如下:

如果你能接受使用连字符,那就采用这种方式。

4 个赞

哇,这其实相当不错。除了那个破折号 :slight_smile: 不过我也能接受。甚至值得尝试只用一个国旗表情符号作为标签……

是的,只用一个表情符号当然没问题……但在发布时,你将无法通过标签下拉菜单中的搜索轻松找到它。

2 个赞

好的,最后一个有点傻的问题:我该如何像上面处理法语那样让表情符号生效?我尝试创建了一个标签“:sweden:-svenska”,但它并没有转换成瑞典国旗。

您需要使用表情符号(例如在移动设备上,您可以切换到表情符号键盘)。

3 个赞

哦,原来我以为 Discourse 里的表情符号是这样用的。好的,那我得切换到移动设备了。我本以为能直接用这些。没问题了,谢谢!

3 个赞

如果我理解正确的话,在标签渲染器中,似乎没有一种简单的方法来发现某个标签属于哪个分组?

这个功能非常棒。我之前使用过自定义 CSS 方案,但后来为了这个主题组件而放弃了,该组件为所有未设置图标的标签提供了回退图标(至少在支持标签分组之前是这样),而这正是我所怀念的功能。

考虑到 discourse-category-icons 支持此功能,我猜测 replaceCategoryLinkRenderer 所替换的渲染器被分类下拉菜单使用,而 replaceTagRenderer 所替换的渲染器则未被标签下拉菜单使用,对吗?所以这可能需要进行核心代码的修改?编辑器中的标签下拉菜单正在使用被替换的渲染器,并带有图标。

2 个赞