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

我已经尝试使用“标准布局”和“自定义布局”创建页面，但都不允许使用{block:Posts}变量。我需要重新创建本质上的存档页面，但有一些自定义的CSS。有什么办法可以做到这一点？是否有可能在Tumblr中创建“查看全部”页面？

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

或者是否有可能完全使用API来完成客户端？

任何想法，将不胜感激。

2013-06-02 aperture

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

来源

2013-06-02 21:17:09 aperture

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

回答

相关问题