javascript - 我如何使用他们的 API 在我的网页上显示来自 Tumblr 博客的所有图像？

Question

问题

在页面上显示图像的代码示例有哪些？寻找 HTML 和 javascript

背景

我一直在学习教程并能够复制他们的示例，但现在坚持为我自己的网站实现

代码

Codepen 上的演示:http://codepen.io/JGallardo/pen/jVRKGP

Javascript

这就是我遇到的问题

$.ajax({
    url: "http://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
    dataType: 'jsonp',
    success: function(posts){
      var postings = posts.response.posts;
      console.log(postings);
      var text = '';
      for (var i in postings) {
        var p = postings[i];
        text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>';
      }
      $('ul').append(text);
    }
});

我从教程中复制了它，所以如果我理解了一些东西，我可以复制或改进我的使用，即

什么是var p = postings[i];

我只想要图片，我希望它们在新窗口中打开，但是这个教程有

<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>

所以我可以把它清理成类似的东西

<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+' target="_blank"></a></li>

同样在该 url 中，当我将其与我的换出时，它只是不起作用(显示任何图像)。请参阅:http://api.tumblr.com/v2/blog/lolsnack.tumblr.com/posts?api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY

我随机尝试了一些其他博客，效果很好。包括 fashion.tumblr.com 和 kanye.tumblr.com

我还应该注意，我只想要单张图片，我认为他们的方法是针对照片集的？

Answer 1

您需要定义帖子类型。正如您在示例中提到的，它们针对的是照片集。

此代码应该适用于照片帖子(您需要稍微修改一下):

// already in the for loop
var postings = posts.response.posts;
var type = postings[i].type;
        if(type == 'photo'){
             text += '<li><img src=' + p.photos[0].original_size.url /// etc.
        }else if(type == 'text'){
            // do something different with a text post
        }else{
           console.log('Different post type');
        }

编辑

好的，我会尝试解决您的一些问题。

我做了一个jsfiddle并评论了我的代码，但我会尽力解释。

首先，将您的 api 调用从 http:// 更改为至 https://

其次，您调用的博客仅返回照片帖子，因此您目前的代码运行良好。默认帖子数是20，但我设置了上限50，而且所有帖子实际上仍然是照片帖子。所以我们不能用它来测试我们的代码。参见示例:http://typophile.tumblr.com/archive/filter-by/text

所以我尝试使用自己的博客并设置 50 个帖子的上限。

第三，您想将图像包裹在 anchor 中并让它们在新窗口中打开吗？目前，您正在输出带有 anchor 的图像，并且没有链接文本。

所以改变这个:

text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+p.post_url+'>'+p.source_title+'</a></li>';

对此:

text += '<li><a href='+p.post_url+' target="_blank"><img src=' + p.photos[0].original_size.url +'></a></li>';

这是我的代码:

$.ajax({
//url: "https://api.tumblr.com/v2/blog/typophile.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY", // this blog only returns photo posts, so we cannot test it, even with a limit of 50. But toggle this to see the contents of a different blog. 
url: "https://api.tumblr.com/v2/blog/slack-wise.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",
dataType: 'jsonp',
success: function(posts){
  var postings = posts.response.posts;
  var text = '';
  for (var i in postings) {
    var p = postings[i]; // assign all the iterations in the loop to a single variable, which is easier to access
    var type = p.type; // iterate through the diffirent post types
    if(type == 'photo'){ // if the post type is a photo output this html. 
        text += '<li><a href='+p.post_url+' target="_blank"><img src=' + p.photos[0].original_size.url +'></a></li>';
    }else if(type == 'text'){ // if the post type is text, output this html 
            text += '<li>' +p.body+ '</li>';
    }else{ // else if the post type is something else output this html
        text += '<li>Some other post type<li>'; 
    }
    console.log(type); // lets log all the different post types so we can see them. 
  }
  $('ul').append(text); // append everything to the ul container. 
}
});

如果您从 jsfiddle 运行它并检查控制台，您当前将看到附加的图像。

如果您查看 html 输出，您会发现大部分是照片帖子，我们的代码已经说明了这一点，现在我已经编写了一些语句以允许文本帖子和其他帖子类型(实际上是后备) .如果您想为更多帖子类型指定不同的输出，您必须将它们添加到 if/else 中如果声明。

为了进一步测试这一点，我将尝试交换 ajax 调用中的 url 参数，以尝试和测试将返回许多不同帖子类型的其他博客。

我试过这个 url: "https://api.tumblr.com/v2/blog/andthentheycalledmetania.tumblr.com/posts?limit=50&api_key=sNCvOfqUTzUJzBOViCbYfkaGeQaFAS4Q4XNtHMu8YPo6No3OiY",

并查看返回的帖子类型。

更适合测试。

我希望这能更好地解释这个过程。如果您有更多问题，请随时提出。