如何在indexPage上加载tumblr的nextPage的内容 [英] How can I load the content of tumblr nextPage on indexPage
问题描述
我为我的个人作品集开发一个tumblr主题，但我遇到一个严重的问题，在我的工作部分，我想创建一个水平滑块效果，当我点击旁边看到较旧的帖子，
像这样：
http： //tympanus.net/Tutorials/WebsiteScrolling/
我有这个定义我的nextPage，＃section4是我的工作的帖子： / p>
<！ - 下一页 - >
{block：NextPage}
< div>
< a id =next-buttonhref ={NextPage}＃section4class =next panelstyle =position：relative; top：630px; left：1550px;> next& a>
< / div>
{/ block：NextPage}
<！ - /下一页 - >
这是定义为打开其他页面：
indexPage.tumblr.com＃section4
当我点击下一步它去：
indexPage.tumblr.com / page / 2＃section4 $ b $有没有办法我可以在我的索引页上做这个幻灯片效果，或者至少给出错觉，我' 解决方案如果我正确理解你的问题，就像serakfalcon提到的，将添加tumblr特定点。你需要做三件事情。
- 动态加载数据
- 动态创建新版面/页面
- 使用导航功能处理新版面
加载数据
这实际上是一个简单的比特。对于tumblr，正如你所说，我们可以通过点击下一页链接手动转到下一页。在tumblr中，这将类似于
{block：NextPage}
< li>< / li> ; a href ={NextPage}class =next-page static> {lang：下一页}< / a>< / li>
{/ block：NextPage}
由于页面位于同一个网域，覆盖链接以使用AJAX获取页面。我们将获得此页面的原始HTML。其中将包括页面的所有其他部分，如三个其他部分。可能有一些tumblr模板魔术，我们可以做到限制这一点，但我会考虑超出范围。那么我们如何具体地获得内容？我们可以将原始HTML提供给jquery来构建文档对象，然后我们可以从那里选择具有帖子的内容。所以类似的东西。
$（document.body）.on（'click'，。static {//委托
var xhr = $。get（$（this）.attr（href），function（a）{// a是下一页的HTML
$ loaded = $（a） ; //现在已经有一个临时对象与下一页的对象
var postsHTML = $ loaded.find（＃posts）。html（）//包含我们可以嵌入的帖子
//取决于你的模板我使用默认的id =posts
}）
}）
创建新部分/页
一旦我们获得了数据，我们现在需要将数据放入新页面。有很多方法这样做，但这里是我怎么做。首先，我有一个新的部分的模板。我把它放在一个脚本标签这样。
< script type =text / x-templateid = 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>返回< / a>< / li>
< li>< a href =＃class =next-page static>下一页< / a>< / li&
< / ul>
< / div>
< / script>
完成后，无论何时加载数据，我们都可以从中获取原始HTML，新元素通过喂给它再次jQuery。然后，我们用 posts 将帖子附加到 div 。我们还从数据中获取下一页链接以附加到下一页链接，以便早期的ajax调用可以工作。如果我们找不到下一页链接，这意味着没有更多的帖子。所以我们可以隐藏下一页的链接。我们还将停止现有的链接通过ajax加载数据，并做正常的幻灯片事情。最后，我们将新节添加到节的父div，修正它的宽度，然后过渡到新节。
$（document.body）.on（'click'，。static，function（e）{// deferred
e.preventDefault（）;
var that = this // $ .get callback
var xhr = $。get（$（this）.attr（href），function（a）{
$（that）.removeClass这个链接从加载
var $ loaded = $（a）
var next_section = $（$（＃section-template）。html（））; // make the new section
var num_sections = $（。section）。length + 1 //节的数量
next_section.addClass（num_sections％2？white：black）//一致性
$ b b //在新部分中找到.posts并将tumblr数据放入其中
next_section.find（。posts）。html（$ loaded.find（＃posts）。html $ b // tumblr下一页链接根据模板更改
var next_link = $ loaded.find（。static）
if（next_link.length）{//如果下一个链接存在
//在新节中将href附加到下一页链接
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
}，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）不是静态的
e.preventDefault（）
$（'html，body'）。stop（）。animate（{
scrollLeft：$（this）.closest nextAll（。section）。offset（）。left
}，1000）;
}）
。 {// last page
e.preventDefault（）
$（'html，body'）。stop（）。animate（{
scrollLeft：$（this）.closest ）.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 =
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）; //追加到body
$（＃horizontal-scroller）。width（4000 * num_sections）; // resize body
$（'html，body'）。stop （{
scrollLeft：$（next_section）.offset（）。left
}，1000）;
}）//$.get
}）//点击
现场演示 。没有真正麻烦使幻灯片看起来不错，但希望你觉得这有帮助。
I'm developing a tumblr theme for my personal portfolio, but I'm encountering a serious problem in my work section, I want to create an horizontal slider effect, when I click next to see older posts,
like this:
http://tympanus.net/Tutorials/WebsiteScrolling/
I have this to define my nextPage, #section4 is where I have the posts of my work:
<!-- 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 -->
Well, this is defined to open an other page:
"indexPage".tumblr.com#section4
when I click next it goes to:
"indexPage".tumblr.com/page/2#section4
Is there a way I can do this slide effect on my index page or at least give the illusion, that I'm making slide effect, when moving to other page?
解决方案 If I understand your question correctly, it is as serakfalcon mentioned but I'll add in tumblr specific points. You need to do three things specifically. I won't go into too much tumblr template codes and styling it and stick to these
- Loading the data dynamically
- Dynamically creating a new section/page
- Getting the navigation to work with new sections
Loading the data
This is actually the easy bit. For tumblr, as you mentioned, we can manually go to the next page by clicking the "next page" link. In tumblr this will look something like
{block:NextPage}
<li></li><a href="{NextPage}" class="next-page static">{lang:Next page}</a></li>
{/block:NextPage}
Since the pages are on the same domain, we can override the link to get the page using AJAX. We will be getting the raw HTML for this page. Which will include all the other parts of the page like the three other sections. There may be some tumblr template magic that we can do to limit this, but I'll consider that outside the scope. So how do we get the content specifically? We can feed the raw HTML into jquery for it to build document objects, and we can then select the content that has the post from there. So something like.
$(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"
})
})
Creating a new section/page
Once we have the data, we now need to put the data into a new page. There's many ways on doing this but here's how I did it. First of all, I had a template for the new section. I put it in a script tag like so. I kind of like the semantics of doing it like this.
<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>
With that done, whenever the data is loaded we can get the raw HTML from this, and create a the new elements by feeding it to jQuery again. We then append the posts to the div with class posts. We also get the next page link from the data to attach to the next-page link so that the earlier ajax call will work. If we can't find the next-page link, that means there's no more posts. So we can hide the next-page link. We'll also stop the existing link to load data through ajax and do the normal slidey thing. Finally we'll append the new section to the parent div of the sections, fix it's width and then transition to the new section.
$(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
Getting the navigation to work
I probably should append new links to the nav, but I guess to make it easier (and imagine how it look like with 40 pages) I decided to just use a "next page" and "last page" for the loaded content. The code is simple. For next page, if it's not .static, move to the next section and ditto last page. we'll delegate (technically, I'm using .on() but the docs on .delegate seemed easier to understand) it to the document body so that it works for all the new links.
So as a whole javascript/jquery will look something like
$(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
Here's a live demo of it working. Didn't really bother with making the slides look nice but hopefully you found this helpful.
这篇关于如何在indexPage上加载tumblr的nextPage的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
