 |
摘要 | Discourse 图标允许您在帖子中使用 SVG 图标子集中的图标。 |
 |
预览 | 在 Discourse 主题创建器中预览 |
 |
仓库链接 | https://github.com/discourse/discourse-icon |
 |
Discourse 主题新手？ | 使用 Discourse 主题的初学者指南 |
安装此主题组件
用法：
[wrap=icon id=square][/wrap]
示例：
这是 图标和 图标。
这是 [wrap=icon id=far-square][/wrap] 图标和 [wrap=icon id=pencil][/wrap] 图标。
注意： 如果图标未显示，是因为它不在您的子集中。如果您是管理员，可以在站点设置中添加它：svg icon subset。
由我们托管？ 主题组件可在我们的标准版、商业版和企业版计划中使用。
太棒了！这真是经典之作！
（meta 拥有非常多的主题，但幸运的是，感谢 @kris.kotlarek，我们有了一个“添加到所有主题”的按钮……不过还需要整理一下进度，因为它生效需要一些时间）
是的，暂时不想全部添加，因为我刚写完代码 
不过现在会去做的
编辑：哦，已经完成了
谢谢，这太有趣了！
我从未接触过 BB 代码标签，也从未手动编写过 FontAwesome 代码，所以使用空标签对的这种做法一直让我觉得奇怪。这是出于普遍约定，还是有什么网页制作方面的原因要使用标签对？另外，标签对中间可以放内容吗？这会影响文本显示吗？
这里有多种原因。
首先，当我编写 wrap BBCode 功能时，@sam 明确要求我支持以下三种格式：
[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap]
这是为了与我们在 Discourse 中现有的 BBCode 用法保持一致。
我本可以采用更好的语法，例如 [icon=times]，但那样的话它就必须是一个插件，而不能是主题组件。
作为一种实验，我认为目前的实现已经足够好了。如果未来大家频繁使用此功能，我们可以考虑开发一个插件，并提供更简洁的语法。
我还有另一个想法：添加一个 API，以便在编辑器中自动补全符号，就像我们为/用户/分类/表情符号所做的那样。但我担心，如果有多个组件各自选择自己的符号，这将会变成一场噩梦。
哦！我需要添加对另一个 bbcode 的支持，我原本以为可以以此为起点，但你说“包裹”相关逻辑是在核心中处理的，这就解释了为什么我在你的主题组件中找不到相关实现。
我目前的解决方案是使用“链接词”组件配合一个难看的正则表达式，但我仍在努力尝试为这些链接添加必要的类名。
是的，阅读此主题以了解更多：
好吧，我已经把它看了一打遍。还打印出你的组件代码，盯着它看了好几个小时，试图弄清楚我不理解的部分究竟是因为 JavaScript 还是 Ember。难道没有插件我就不能添加 [foo] 标签吗？或者我是否可以在你的代码中用 foo 替换 wrap，以支持我新的 BBCode？
不行，因为其中一部分是在服务器端处理的。如果你想使用自定义的 BBCode，就必须编写一个插件，并参考 wrap 的实现方式，例如：
谢谢！现在开始有点明白了。自从1990年学习C++和Objective Pascal以来，我还没遇到过这么难学的语言。
我目前的正则表达式变通方法几乎能用了。我需要决定是走插件路线，还是继续用这个变通方法（并想办法添加类）。
至少现在我知道为什么在主题组件中找不到那个包裹了！
我想到了几种可能的语法布局，可以添加到 wrap 插件中：
[wrap=foo /]
[wrap/=foo]
（模仿 XML 的自闭合标签），但这两种写法都相当难看 
有人有什么绝妙的主意，能让语法看起来更顺眼吗？
嗯，我不太喜欢这些：confused:
我发现了一个大错误……
如果你使用图标包装器，然后突出显示引用，生成的图像会被极大地放大：
这是一个图标 [wrap=icon id=far-check-square][/wrap]这是突出显示引用时的语法外观：
[quote="JammyDodger, post:1, topic:294, full:true"]
这是一个图标 
[/quote]
这是引用时会变得巨大的回复
不过，使用格式栏中的对话气泡引用它就可以正常工作。
您正在使用什么浏览器？
我用鼠标测试了 Chrome 和 Firefox，但都无法选中该图标。 
编辑：
如果将当前子集中不可用的图标包装起来，它将改为创建 SVG 图像。
然后，您可以引用它。
您能举个例子吗？您的截图显示了一个打勾的复选框，并且我在我的测试实例上（以及可能由 Discourse 使用的其他图标，如 x-ray）没有问题选择它。
我明白了。该组件通过检查是否存在带有 d-wrap 类的包装器来搜索；但如果提供的图标不在子集中，则没有包装器。它会创建一个 SVG 图像。
例如：
如果您引用图像，该组件将不执行任何操作，因为没有包装器（并且图像将被转换为 markdown，从而生成一个没有任何类的图像）
这是否意味着我需要在我的主题中有一个 settings.yml 文件，其中包含 svg_icons 字段？或者我可以使用任何已启用主题组件中可用的 svg_icons 字段？如果是这样，将此字段添加到此主题组件是否有意义？
svg_icons:
default: ''
type: 'list'
list_type: 'compact'
因为根据我的经验，SVG 图标会被转换为 <img /> 标签，并且在更改配色方案时它们不会继承 currentColor：
请比较“示例”段落：
