如果我正确理解了你的问题，它就像serakfalcon提到的那样，但我会添加一些tumblr特定的要点。你需要具体做三件事情。我不会深入讲解tumblr模板代码和样式，而是专注于以下这些方面：
- 动态加载数据
- 动态创建新的部分/页面
- 使导航栏与新部分/页面协同工作
加载数据
这实际上很简单。对于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){
var xhr=$.get($(this).attr("href"),function(a){
$loaded=$(a);
var postsHTML=$loaded.find("#posts").html()
})
})
创建新的部分/页面
一旦我们有了数据，现在我们需要把数据放到一个新页面中。有很多方法可以做到这一点，但这是我是如何做的。首先，我为新部分准备了一个模板。我将它放在一个脚本标签中，就像这样。我喜欢这样做的语义。
<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来创建新的元素。然后将帖子附加到具有class为“posts”的
div中。 我们还从数据中获取下一页链接，将其附加到下一页链接上，以便之前的Ajax调用将起作用。 如果找不到下一页链接，则表示没有更多帖子。因此，我们可以隐藏下一页链接。 我们还将停止现有链接通过ajax加载数据并执行正常的滑动操作。最后，我们将新节的部分附加到节的父级div中，修复其宽度，然后转换到新节。
$(document.body).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);
$("#horizontal-scroller").width(4000*num_sections);
$('html, body').stop().animate({
scrollLeft: $(next_section).offset().left
}, 1000);
})
})
让导航栏正常工作
我可能应该将新链接添加到导航栏中，但考虑到这会使其变得更加复杂（想象一下有40个页面时的情况），我决定只为加载的内容使用“下一页”和“上一页”。代码很简单。对于下一页，如果它不是.static，则移动到下一个部分，同样的道理适用于上一页。我们将委托（实际上，我使用的是.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){
e.preventDefault()
$('html, body').stop().animate({
scrollLeft: $(this).closest(".section").nextAll(".section").offset().left
}, 1000);
})
.on('click',".last-page",function(e){
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);
$("#horizontal-scroller").width(4000*num_sections);
$('html, body').stop().animate({
scrollLeft: $(next_section).offset().left
}, 1000);
})
})
以下是它正在运行的
实时演示。我并没有花太多功夫让幻灯片看起来好看，但希望这对您有所帮助。
site.tumblr.com/work）还是你的tumblr帖子就是你的作品（例如：site.tumblr.com/page/2包含你的旧作品，但你的主题有一个首页，而#section4是你发布帖子的地方），或者它是你主题的一部分（例如：主题的#section4）？ - mfirdaus