Question

我尝试使用“标准布局”和“自定义布局”创建页面，但都不允许使用{block:Posts}变量。我需要重新创建存档页面，但需要一些自定义css。有没有办法实现这个目标？

如果我尝试$("#someDiv").load("/archive", "#content");，整个页面格式化就搞砸了。有没有办法只将<a>标记加载到自定义页面上的div中？

或者是否可以完全使用API完成客户端？

对此的任何想法都将不胜感激。

Answer 1

如果有其他人发现自己陷入困境，我想出了两个可能的解决方案。在最终确定之前我放弃了第一个，所以它有点粗糙但是一个好的开始。当你向下滚动页面时，它使用API来加载照片（这就是我所需要的）。

<script>
  function getPhotos(offset){
    $.ajax({
      url: "http://api.tumblr.com/v2/blog/[tumblr].tumblr.com/posts?api_key=[key]&offset="+offset,
      dataType: 'jsonp',
      success: function(results){
        loaded += 20;
        total = results.response.blog.posts;
        if(total > loaded){
          results.response.posts.forEach(function(post){
            post.photos.forEach(function(photo){
                $("#photos ul").append("<li class='"+post.tags.join(" ")+"'><img src='"+photo.alt_sizes[0].url+"'></li>");
                $("#photos").imagesLoaded(function(){
                    $("#photos").masonry({
                        itemSelector: 'li'
                    });
                });
            });
          });
          if($("#photos ul").height() < $(window).height()){
            getPhotos(loaded);
          } 
        }
      }
    });
  }

  loaded = 0;

  getPhotos(loaded);

  $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
         getPhotos(loaded);
     }
  });
</script>

我最终做的就是使用iframe并在头部附加自定义样式表。

HTML：

<head>
  <script src="http://[remote location]/frame.js"></script> 
</head>
<body>
  <div id="photos">
    <iframe name="frame1" id="frame1" src="http://[tumblr]/archive" frameBorder="0"></iframe>
  </div>
</body>

frame.js：

$(function(){
  function insertCSS(){
    var frm = frames['frame1'].document;
    var otherhead = frm.getElementsByTagName("head")[0];
    if(otherhead.length != 0){
        var link = frm.createElement("link");
      link.setAttribute("rel", "stylesheet");
      link.setAttribute("type", "text/css");
      link.setAttribute("href", "http://[remote location]/frame.css");
      otherhead.appendChild(link);
      setTimeout(function(){$("#frame1").show();}, 200);
      clearInterval(cssInsertion);
    }
  }

  cssInsertion = setInterval(insertCSS, 500);
  //setTimeout(insertCSS, 1000);

  $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && $("#frame1").height() < 50000) {
         $("#frame1").css("height", "+=1000px");
     }
  });
});

frame.css（样式表附加到iframe中）

body{
    overflow: hidden;
}
#nav_archive{
    display: none;
}
.heading{
    display: block !important;
}
.old_archive #content{
    margin: 0 auto 0;
}

style.css（页面上的iframe所在的样式表）

#frame1{
    border: none;
    width: 100%;
    height: 3000px;
    overflow: hidden;
    display: none;
}

是否可以在Tumblr中创建“查看全部”页面？

1 个答案: