Tumblr 主题在 JavaScript 中获取 post 的标签

Question

我想在 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>

Answer 1

如果您需要获取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。这样您就不必担心 escaping/un-escaping 个特殊字符。

Tumblr 主题在 JavaScript 中获取 post 的标签

Tumblr theme getting tags of a post in JavaScript

html

escaping

tumblr