Question

我想在JavaScript中使用帖子的标签。为了获得标签，我最初使用的内容如下：

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

这个工作正常，直到我需要使用|这样的特殊字符，这个字符变为_并使用此属性并给我错误的标记。

所以现在我需要做一些事情（使用{block:Tags}）：

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

然而，如果{Tag}中有双引号，我预见到了问题。

有什么方法可以保留数据标签属性并仍然使用{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词典，从帖子的ID到其标签列表（以及标签网址）。＆＃34; JS＆＃34; prefix是输出字符串wrapped in quotes。

在每个帖子元素中，添加帖子ID的属性：

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

您可以在模板中多次{block:Posts}，但the theme documentation没有提到这一点。

每当您需要帖子的标签时，从其DOM元素中获取帖子ID，然后在标签词典中查找ID。这样您就不必担心转义/取消转义特殊字符。

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

1 个答案: