dynamic - 在 tumblr 中使用标签链接的动态过滤栏

Question

我有 10 个指向 10 个 TagPages 的链接，当单击它们时，它们会将您带到一个包含所有带有该标签的帖子的页面。

这很容易。

我想知道是否可以在一个页面中堆叠多个标记的帖子。例如，当所有带有“红色”标签的帖子都显示出来时，您可以点击并加载带有“蓝色”标签的帖子，而无需离开页面。

这 10 个链接的行为就像一个过滤系统。然后，您可以在一页中显示任何已标记帖子的组合……单击一次并加载它们，再次单击以隐藏帖子。

我希望一切都说得通。

任何帮助都会很棒。谢谢。

Answer 1

您可以使用 Tumblr 的 API 按标签加载帖子：http ://www.tumblr.com/docs/en/api/v2#posts

每个标签的调用看起来像这样（方括号标记您需要更改的区域）：

URL = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=?

$.ajax(URL, {
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // do something with your data
  }
});

更新了一个更具体的例子：

您需要为每次点击标签导航创建一个函数。因此，假设您用简单的 HTML 构建了导航，您希望为每次点击创建一个函数。

HMTL：

<nav class="tag-nav>
    <ul>
        <li><a href="/tagged/portrait" class="portrait">Portrait</a></li>
        <li><a href="/tagged/landscape" class="landscape">Landscape</a></li>
    </ul>
</nav>

JS：

$('.tag-nav a').on('click', function (e) {
    e.preventDefault();

    // grab classname from the link that was just clicked
    var tagName = $(this).attr('class');

    // go get our tagged posts
    getTaggedPosts(tagName);
});

var getTaggedPosts = function (tag) {
    // this is where your AJAX call will go

    // bonus points if you check to see if you've already made the AJAX call
    // and stored the posts somewhere else on the page
};