在使用runtime时，我在这里遇到了在使用shields.io图标出现了不显示的问题

我的图标

shields.io徽标库网址

问题

这里直接使用它的链接，可是在使用的时候出现图标不显示的情况（如下图显示）。

后面我进行了排查，发现链接出现了转义的情况（如下图）

1
2
3
4
5

<!-- 原链接 -->
https://img.shields.io/badge/冰梦-下班休息中-6adea8?style=social&logo=neutralinojs

<!-- 转义后，为&amp; -->
https://img.shields.io/badge/冰梦-下班休息中-6adea8?style=social&amp;logo=neutralinojs

总结

进行了一番查询，总结了问题，这是使用了pug文件时出现的转义问题，出现&的问题通常是因为在处理或传递URL参数时，没有正确进行 URL 编码。

URL 编码是将特殊字符转换为特定格式的过程，以确保它们能够安全地在URL中传递。在URL中，&是用来分隔参数的特殊字符。如果没有进行URL编码&将被解释为HTML实体&，从而导致链接中的&被错误地转义成&。

如下URL链接：

1

https://example.com?name=John&age=25

在这个URL中，&用于分隔两个参数name和age。如果没有对参数值进行正确的URL 编码，像John&age这样的部分会被认为是一个参数，导致&被转义成&。

为了解决这个问题，应该对URL 参数进行正确的编码，以确保其中的特殊字符不被错误解释。在JavaScript中，可以使用encodeURIComponent()函数来对参数值进行编码。在你的示例中，使用decodeURIComponent()函数对URL进行解码，可能是因为之前进行了URL编码，而现在需要将编码后的URL解码回来。

确保在生成URL时对参数值进行URL编码，并在使用这些参数时进行解码，这样就能避免出现&的问题。这样，链接中的特殊字符将被正确地传递和解释，避免了出现不必要的转义。

shields.io徽标不显示解决方法

解决shields.io图标不显示的方式很简单，只需要把#{}改为!{}就可以了。

找到[Blogroot]\themes\butterfly\layout\includes\third-party\runtime\目录下的runtime-js.pug文件。

1
2
3

- img.src = "#{offduty_img}";
# 改为
+ img.src = "!{offduty_img}";

这样你的图标就能正常显示了。