1

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

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

或者是否可以完全在客户端使用 API 来完成此操作？

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

4

1 回答 1

0

如果其他人发现自己陷入困境，我想出了两种可能的解决方案。我在完成它之前放弃了第一个，所以它有点粗糙但一个好的开始。当您向下滚动页面时，它使用 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>

框架.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;
}
于 2013-06-02T21:17:09.277 回答