标签图标

是的,这正是标签分组存在的问题。

是的,我刚刚查看了一下,这似乎是一个相当简单的修复方案。核心代码需要在筛选下拉菜单中使用标签渲染器(这样就能与编辑器中的标签选择器保持一致)。我稍后会着手处理。

3 个赞

我刚刚注意到,当在编辑器中使用 #提及 时,下拉菜单中显示的类别渲染器也被替换了,它显示了主题组件中的类别图标。但标签渲染器在所有其他位置使用的渲染器不同,它在标签名称旁边显示一个标签图标:

@pmusaraj 您认为是否可以让这个渲染器也使用被主题组件替换的那个渲染器呢?

谢谢。

2 个赞

我认为对此进行标准化是有意义的,是的。@renato,你有兴趣为此提交一个 PR 吗?

(顺便一提,针对筛选下拉菜单的 PR 已提交,预计下周某个时间合并。)

4 个赞

我已开始使用此组件,在应用会触发聊天集成的标签时向用户发出视觉提醒

是否有可能直接通过该组件可选地为标签文本着色?我在论坛这里看到了一个手动选项。感谢提供这么棒的组件!

编辑:此外,为标签添加多个图标也会很有用。感谢考虑!

1 个赞

这可以通过您主题中的 SCSS 实现,我们暂无计划将此功能添加到该组件中。

同样,我们也没有计划允许每个标签使用多个图标。

2 个赞

@pmusaraj,目前有没有针对每个标签组设置备用图标的变通方法?

是否可以为所有标签更改图标?能否将项目符号替换为其他内容?如果我没理解错的话,这个组件仅适用于列表中的标签。

已找到答案:

.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

SVG 图标图像可以从 https://thenounproject.com/ 等网站自由下载。

1 个赞

项目符号标签 + 标签颜色

如果您使用的是项目符号样式的标签,并且:

  • 希望 标签图标标签文本 的颜色保持一致
  • 希望仅在未设置 标签图标 时显示项目符号

以下是我为 booksscience-fiction 标签实现此效果的方法:

最终效果:

  1. Tag icons 组件(本组件)的设置

  1. 设置一个必须与 Tag Icons 保持同步的辅助组件
    在此组件中,我们执行两项操作:
    1. 隐藏特定标签的项目符号
    2. 将标签文本颜色设置为与图标相同的颜色

为此,我们创建一个新的主题组件:Tag Icons extra
Common/CSS 部分:

  1. 添加以下混入(只需添加一次):
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. 对于每个需要编辑的标签,粘贴以下代码,并将 REPLACEMETAG 替换为标签名称,将 REPLACEMECOLOR 替换为与图标相同的颜色:
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

7 个赞

错误报告:在帖子的标签选择器中,图标没有颜色:

在此处,图标的颜色应与文本颜色一致(文本颜色是我自定义的 CSS):

我的配置:

2 个赞

@pmusaraj 我大约两周前为 50 个左右的标签添加了图标。现在查看标签列表,发现其中五个标签的图标不见了……即使我删除它们并重新添加,问题依旧。我或许可以尝试删除全部 50 个标签再重新逐一添加,看看是否有效,但真不希望非得这么做,毕竟太麻烦了……

能否截一张你的设置界面,并标出那些图标无法显示的标签?

2 个赞

嗯,奇怪的是最后五个条目无法正常工作。你能尝试将最后五个中的一个与上面的另一个交换,看看会发生什么吗?看起来设置值在某个地方被截断了……

3 个赞

说明一下,最初并非最后五个条目无法显示,而是五个看似随机的条目。随后我删除了它们并重新输入,以检查它们是否能显示(结果仍然不能)。因此,它们看起来像是最后几个条目才无法显示。

话虽如此,我已删除了“proof-verification”标签并重新输入,使其排在队列最前端。该标签原本为橙色,现在仍为橙色且显示正常。目前看来,问题似乎仍只涉及那五个条目……

是否可以使用这些颜色变量来设置标签图标的颜色?

您可以为标签图标使用任意颜色。
tagicons
或者您的意思是什么?

好问题,是的,看起来你可以使用 CSS 自定义属性,这个对我有效:

2 个赞

啊,我的错。刚发现错误,现在运行正常了。太棒了,竟然可以这样!

1 个赞

有没有办法使用 PNG 作为图标?我所有的图片都想要以 PNG 格式使用,将它们转换为 SVG 只会破坏它们的质量,而且即使转换了,图标也无法加载。

我有 400 多张图片需要转换,既然连一次转换都无法成功,如果能直接使用现有的 PNG 文件就好了。

此组件并非用于处理 PNG 图像。在您的情况下,可能只需使用 CSS 即可。

2 个赞