javascript - 如何在 indexPage 上加载 tumblr nextPage 的内容

Question

我正在为我的个人作品集开发一个 tumblr 主题，但我在我的工作部分遇到了一个严重的问题，我想创建一个水平 slider 效果，当我点击下一步查看旧帖子时，

像这样:

http://tympanus.net/Tutorials/WebsiteScrolling/

我用这个来定义我的下一页，#section4 是我的工作帖子所在的地方:

<!-- Next Page -->
{block:NextPage}
<div>
    <a id="next-button" href="{NextPage}#section4" class="next panel" style="position:relative; top:630px; left:1550px;">next</a>
</div>
{/block:NextPage}
<!-- / Next Page -->

嗯，这是定义为打开另一个页面:

"indexPage".tumblr.com#section4

当我点击下一步时，它会转到:

"indexPage".tumblr.com/page/2#section4

有没有一种方法可以在我的索引页面上制作这种幻灯片效果，或者至少在移动到其他页面时给人一种我正在制作幻灯片效果的错觉？

Answer 1

如果我正确理解你的问题，就像 serakfalcon 提到的那样，但我会在 tumblr 中添加具体要点。你需要具体做三件事。我不会过多讨论 tumblr 模板代码和样式，并坚持这些

1. 动态加载数据
2. 动态创建新的部分/页面
3. 让导航与新部分一起工作

加载数据

这实际上很简单。对于 tumblr，正如您提到的，我们可以通过单击“下一页”链接手动转到下一页。在 tumblr 中，这看起来像

{block:NextPage}
  <li></li><a href="{NextPage}" class="next-page static">{lang:Next page}</a></li>   
{/block:NextPage}

由于页面位于同一域中，我们可以覆盖链接以使用 AJAX 获取页面。我们将获得此页面的原始 HTML。它将包括页面的所有其他部分，如其他三个部分。我们可以使用一些 tumblr 模板魔术来限制这种情况，但我认为这超出了范围。那么我们具体如何获取内容呢？我们可以将原始 HTML 提供给 jquery 以构建文档对象，然后我们可以从那里选择包含帖子的内容。所以像这样。

$(document.body).on('click',".static",function(e){ //delegated
    var xhr=$.get($(this).attr("href"),function(a){ //a is next page's HTML
        $loaded=$(a); //loaded now has a temporary object with next page's objects
        var postsHTML=$loaded.find("#posts").html() //contains posts we can embed
        //what to find depends on your template. I used the default id="posts"
    })
})

创建一个新的部分/页面

一旦我们有了数据，我们现在需要将数据放入一个新页面。有很多方法可以做到这一点，但我是这样做的。首先，我有一个新部分的模板。我把它放在这样的脚本标签中。我有点喜欢这样做的语义。

<script type="text/x-template" id="section-template">
    <div class="section">
        <div class="posts"></div>
        <ul class="nav">
            <li><a href="#section1">1</a></li>
            <li><a href="#section2">2</a></li>
            <li><a href="#section2">3</a></li>
            <li><a href="#section4">4</a></li>
            <li><a href="#" class="last-page">Back</a></li>
            <li><a href="#" class="next-page static">Next</a></li>
        </ul>
    </div>
</script>

完成后，无论何时加载数据，我们都可以从中获取原始 HTML，并通过再次将其提供给 jQuery 来创建新元素。然后，我们使用类 posts 将帖子附加到 div。我们还从数据中获取下一页链接以附加到下一页链接，以便前面的 ajax 调用可以工作。如果我们找不到下一页链接，则意味着没有更多帖子。所以我们可以隐藏下一页链接。我们还将停止现有链接以通过 ajax 加载数据并执行正常的 slidey 操作。最后，我们将把新部分附加到部分的父 div，固定它的宽度，然后过渡到新部分。

$(document.body).on('click',".static",function(e){ //deferred
    e.preventDefault();
    var that=this //to refer inside $.get callback
    var xhr=$.get($(this).attr("href"),function(a){
        $(that).removeClass('static') //stop this link from loading again
        var $loaded=$(a)
        var next_section=$($("#section-template").html()); //make the new section
        var num_sections=$(".section").length + 1 //number of sections
        next_section.addClass(num_sections%2 ? "white" : "black") //consistency

        //find .posts in the new section and put the tumblr data in it
        next_section.find(".posts").html($loaded.find("#posts").html())
        //tumblr next page link. change according to template
        var next_link=$loaded.find(".static")
        if(next_link.length){ //if next link exists
            //attach href to next page link in new section
            next_section.find(".static").attr("href",next_link.attr("href"))
        } else { //no next
            //hide the next page link in new section
            next_section.find(".static").hide()
        }
        $("#horizontal-scroller").append(next_section); //append to body
        $("#horizontal-scroller").width(4000*num_sections); //resize body

        $('html, body').stop().animate({ //to the new section
            scrollLeft: $(next_section).offset().left
        }, 1000);

    }) //$.get

}) //click

让导航正常工作

我可能应该将新链接附加到导航栏，但我想为了让它更容易(想象一下 40 页的样子)我决定只使用“下一页”和“最后一页”来加载内容.代码很简单。对于下一页，如果它不是 .static，则移至下一部分并同上一页。我们会delegate (从技术上讲，我正在使用 .on() 但 .delegate 上的文档似乎更容易理解)它到文档正文以便它适用于所有新链接.

所以作为一个整体 javascript/jquery 看起来像

$(document.body)
.on('click','ul.nav a:not(.next-page):not(.last-page)',function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
    }, 1000);
    e.preventDefault();
})
.on('click',".next-page:not(.static)",function(e){ //next page not static
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").nextAll(".section").offset().left
    }, 1000);
})
.on('click',".last-page",function(e){ //last page
    e.preventDefault()
    $('html, body').stop().animate({
        scrollLeft: $(this).closest(".section").prevAll(".section").offset().left
    }, 1000);
})
.on('click',".static",function(e){
    e.preventDefault();
    var that=this
    var xhr=$.get($(this).attr("href"),function(a){
        $(that).removeClass('static')
        var $loaded=$(a)
        var next_section=$($("#section-template").html());
        var num_sections=$(".section").length + 1
        next_section.addClass(num_sections%2 ? "white" : "black")
        next_section.find(".posts").html($loaded.find("#posts").html())
        var next_link=$loaded.find(".static")
        if(next_link.length){
            next_section.find(".static").attr("href",next_link.attr("href"))
        } else {
            next_section.find(".static").hide()
        }
        $("#horizontal-scroller").append(next_section); //append to body
        $("#horizontal-scroller").width(4000*num_sections); //resize body

        $('html, body').stop().animate({
            scrollLeft: $(next_section).offset().left
        }, 1000);
    }) //$.get
}) //click

这是一个 live demo 它的工作。没有真正费心让幻灯片看起来漂亮，但希望你发现这很有帮助。