无限滚动脚本不适用于标记页面？ [ 石工 ]答案

【问题标题】：Infinite scroll script not working on tagged pages? [ Masonry ]无限滚动脚本不适用于标记页面？ [ 石工 ]
【发布时间】：2014-03-30 00:55:47
【问题描述】：

所以，基本上，我正在处理我的第一个 Tumblr 主题：teenaqe-vow.tumblr.com，到目前为止，除了无限滚动代码之外，一切都很好。发生的情况是它工作得非常好，直到您转到像这样的标记页面。 http://teenaqe-vow.tumblr.com/tagged/music 发生的情况是，当您向下滚动时，它不是加载标记页面的下一页，而是从索引页面加载一个页面。我正在使用一个脚本，将所有帖子保持在一起并呈现无限滚动，如果没有它，帖子中就会出现间隙，而且效果不太好。

我对这整件事真的很陌生，所以我有点不知道如何解决它。如果我提供的任何信息不充分，我深表歉意，如果您需要我提供更多信息，请告诉我。

这里是整个主题代码：http://pastebin.com/X8DaLKPG

这里是无限卷轴/砖石部分：

{block:IndexPage}{block:IfTwoColumn}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

{block:IfInfiniteScroll}
<div id="pagination"><a href="/page/2"></a></div>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}

<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
});
});
$container.infinitescroll({
itemSelector : "#entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "http://media.tumblr.com/ec1742dbca16ca94b47814f1de4e37e6/tumblr_inline_mj8pf7Te3l1qz4rgp.png",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IfTwoColumn}{/block:IndexPage}

【问题讨论】：

标签： blogs tumblr jquery-masonry infinite-scroll

【解决方案1】：

您的分页链接固定在主页上（它始终指向user.tumblr.com/page/2/）。请改用 Tumblr API 分页工具。

【讨论】：

【解决方案2】：

我在我的 Tumblr 上也遇到过同样的问题，终于解决了，所以我想我会分享我的错误和我的解决方案，希望它能帮助像我这样的初学者:)

这是导致问题的原因：

<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" href="/page/2" id="next"></a></div>

这是我的决心：

<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" {block:NextPage}href={NextPage} id="next" {/block:NextPage}></a></div>

您会注意到对 href 属性所做的唯一更改。当您将其设置为 /page/2 时，它会告诉标签页面显示索引页面中的第 2 页，因为它缺少 URL 中的标签名称。当您为下一页 ({block:NextPage}) 和下一页 URL ({NextPage}) 添加 Tumblr 的分页块标签时，它将能够破译您是从索引页还是标签页开始，然后能够自行填写 URL 中的空白。我希望这会有所帮助！

【讨论】：