html - Tumblr主题获取JavaScript中帖子的标签

我想在JavaScript中使用post的标记。为了得到这些标签，我最初使用的是如下内容：

<article class="post" data-tags="{TagsAsClasses}">

直到我需要使用特殊字符，比如|，它变成了带有这个属性的_，并且给了我一个错误的标记。
所以现在我需要做一些类似的事情（使用{block:Tags}）：

<article class="post" data-tags="{block:HasTags}{block:Tags}{Tag}{/block:Tags}{/block:HasTags}">

但如果{Tag}中有双引号，我就预见到了问题。
是否有任何方法可以保留data tags属性并仍然使用{block:Tags}获取真正的标记？
我已经提出了一个解决方案，包括添加和阅读一堆标记，但我只是不太喜欢它。

<div class="postHiddenTags" style="display:none;">
    {block:HasTags}
        {block:Tags}<div data-tag={JSTag} data-tagURL={JSTagURL}></div>{/block:Tags}
    {/block:HasTags}
</div>

最佳答案

如果需要用JavaScript获取标记，可以从一开始就在<script>标记中定义它们。在主题HTML中：

<script>
    var tags = {};

    {block:Posts}
    {block:HasTags}
    tags[{JSPostID}] = [
        {block:Tags}
        {
            "tag": {JSTag},
            "tagURL": {JSTagURL},
        },
        {/block:Tags}
    ];
    {/block:HasTags}
    {/block:Posts}
</script>

您有一个全局JavaScript字典，从post的ID到它的标记列表（和标记url）。“JS”前缀用于输出字符串wrapped in quotes。
在每个post元素中，为post ID添加一个属性：

{block:Posts}
<article data-id="{PostID}" class="post"></article>
{/block:Posts}

您可以在模板中多次使用{block:Posts}，尽管the theme documentation没有提到这一点。
每当需要post的标记时，从其DOM元素中获取post ID，然后在标记字典中查找该ID。这样就不必担心特殊字符的转义/不转义。

关于html - Tumblr主题获取JavaScript中帖子的标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32301259/