回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/03/12

为Blogger增加翻页功能

字体大小:| |
此方法是物以类聚提供的方法,而Ta参考了Blogger Accessories的方法。

一直觉得Blogger没有翻页功能很是麻烦,有些模板(尤其是官方提供的中文模板)更是用“帖子”来代表“下一页”,让人莫名其妙加无比无奈,现在好了,即使官方不提供,我们也能自己让Blogger拥有简单明了的翻页功能。

演示:本BLOG下方。

方法很简单:

在“控制台”-“布局”处添加“HTML/JavaScript”小工具,然后在其中添加如下代码(代码很长请确保复制到所有代码):

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = '首页';
var endPageWord = '末页';
var upPageWord ='上一页';
var downPageWord ='下一页';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">第'+thisNum+'页,共'+(postNum-1)+'页: </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'">'+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>


保存该工具(推荐:)并按下图方式将该工具拖到相应位置。



注:
1.如果你的Blogger绑定了自己的域名而不是使用默认分配的“yourname.blogspot.com”请讲上述代码中红色部分替换为以下代码:

var isFirstPage = "http://www.yourname.com/";

将其中的http://www.yourname.com/改为你绑定的网址。

2.蓝色部分的代码定义了每个页面中文章的数量。这并不一定要与控制台“格式设置”中的“x个帖子在主页上”一致。但是Luke推荐设置一样的值

绿色部分的代码定义了每次列出的页面数量,默认是 3 个。如果是刚开的Blogger文章数比较少的话,建议讲这个值设得低一点,最好能保证“每个页面中文章的数量”*“每次列出的页面数量”约等于总共的文章数,日后文章多了再做相应调整。

3.在Blogger Accessories,博主还提供了通过修改HTML的方式来实现此功能

4.物以类聚对该方法的看法:

最后还要说明这个方式的缺点。
依然是 wall 的问题,它可能会对 blogger.com/feeds/xxx 这个地址较为敏感,有遭遇“连接被重置”的危险。
此外,这个对 json-in-script 的调用明显比没有这个应用时花费了更多时间载入。加上 wall 的干涉,所以不容乐观。


5.由于所有翻页的功能目前都是依赖 /search?updated-max= 这个 URL 实现的,发布内容均为静态页面的 FTP 发布的 Blogger用户还不能享受这样的功能。

6.如果你是使用传统的模板(Template)的用户,请参见这里的文章获得这个翻页功能。



-------------------------------------------------------------------------------------
转载请注明转自Luke瞎折腾


收藏本文
相关文章:

6 评论:

huary 说... 回复此评论

这是网络上最常见的方法,我blog也使用过,但是问题也多,所以放弃了

Luke 说... 回复此评论

@huary

问题是肯定有的,毕竟不是BLOGGER自身提供的,但是在没有其他实现办法的情况下,用这代替一下还是不错的。

William Hou 说... 回复此评论

我添加了,但是不知道为什么,一点反应都没有。没有显示任何东西出来。

Luke 说... 回复此评论

@William Hou

1.代码很长,请确保已经全部复制了。

2.请确保代码添加在了正确的位置:在“控制台”-“布局”处添加“HTML/JavaScript”小工具,然后在其中添加如下代码(代码很长请确保复制到所有代码)

滴泪斩 说... 回复此评论

今天发现好像这个显示翻页的东西有个错误,不知道你能解决么?
就是假如我定义var displayPageNum=3
如果我有7页的话
在第1页的时候应该是
1页 2 3 4
但是当我想点到第2页去的时候,它不是到第2页,而是到第4页去啦。
显示的是
1 2 3 4页 5 6 7
请问你知道有什么解决方法么?

Luke 说... 回复此评论

@滴泪斩这个Hack本身是有点BUG,所以我也取消了。

真要使用这个Hack的话,我建议:
1.var pageCount=这尽量填跟你Blogger内设置的一样的页数。
2.var displayPageNum=这最好能一段时间内就修改一下,最好能保证“每个页面中文章的数量”ד每次列出的页面数量”≈总共的文章数。

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。