1

「標準レイアウト」と「カスタム レイアウト」を使用してページを作成しようとしましたが、どちらも{block:Posts}変数を使用できません。基本的にアーカイブ ページを再作成する必要がありますが、いくつかのカスタム CSS を使用します。これを達成する方法はありますか？

私が試し$("#someDiv").load("/archive", "#content");てみると、ページ全体の書式設定が台無しになります。<a>タグだけをカスタム ページの div にロードする方法はありますか?

それとも、これを達成するために完全にクライアント側で API を使用することは可能でしょうか?

これに関する任意のアイデアをいただければ幸いです。

4

1 に答える 1

0

他の誰かがこれで行き詰まっている場合、私は2つの可能な解決策を思いつきました. この最初のものは最終決定する前に放棄したので、少し荒いですが、良いスタートです. ページを下にスクロールすると、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 に答える