用Javascript实现Blogger/Blogspot的传统模板翻页功能

Blogger的API很好很强大，今天，搞定了翻页功能，翻墙找到一个原始的脚本文件blogger_pager_script_v10.js，不过已经不好用了，于是改了一下，现在终于好用了。

基本功能：
首页的翻页
标签页的翻页
（还有archive页的翻页没搞，archive页默认是显示一个月内所有帖子，所以不用翻页）

 演示： http://www.ayeah.com，一切尽在源码中

代码如下： 部分需要自己修改一下~~尤其是自己的blogID

1. /********************************
2. Blogger Pager Script v1.0
3. (C) 2008 by Anhvo, http://vietwebguide.com
4. Visit http://en.vietwebguide.com to get more cool hacks
5. 
   
6. 演示：http://www.ayeah.com
7. ********************************/
8. var home_page = "http://www.ayeah.com/";
9. var blogID = "2229728651085312053" ;
10. 
    
11. var pager_max_main = 15;
12. var pager_num_of_button = 10;
13. 
    
14. var pager_link_alt_text = "点击翻页";
15. //var pager_total_text = "共有";
16. //var pager_posts_text = " 帖子, ";
17. //var pager_pages_text = " 页";
18. 
    
19. 
    
20. var pager_max_results = 15;
21. if(location.href.match("max-results=")){
22.     pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("/&")[0]);
23. } else if(!location.href.match("/label/")){
24.     pager_max_results = pager_max_main;
25. }
26. 
    
27. var per_page = pager_max_results ;
28. $(document).ready(function(){
29.     if(!location.href.match('/labels/')) {
30.         pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary";
31.         pager_pageurl = home_page+"search";
32.         }
33.     else {
34.         //label = encodeURI($("a[href$='"+location.pathname+"']:eq(0)").text());
35.         label = $("a[href$='"+location.pathname+"']:eq(0)").text();
36.         //label = label.split("?")[0].
37.         //label = label.replace(/ /g,"%20");
38.         pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
39.         pager_pageurl = home_page+"labels/"+label;
40.     }
41. });
42. 
    
43. function createBlogPager(){
44.     var script = document.createElement('script');
45.     script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
46.     script.type = "text/javascript";
47.     document.getElementsByTagName('head')[0].appendChild(script)
48. }
49. 
    
50. function countnumpost(json) {
51.     var posts  = json.feed.openSearch$totalResults.$t;
52.     var num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
53.     var buoc2 = Math.round(num_pages/pager_num_of_button);
54.     createPagesList(buoc2,num_pages);
55.     var totalDis = document.getElementById('blogpagerShowToTal');
56.     //totalDis.innerHTML = pager_total_text+ posts + pager_posts_text + num_pages + pager_pages_text;
57.     totalDis.innerHTML = "共有 <strong>"+num_pages+"</strong> 页，<strong>"+ posts +"</strong> 个文章";
58. }
59. 
    
60. function page(d){
61.     window.scroll(0,0);
62.     $("a[id^=ddmp]").removeClass("current");
63.     $("#ddmp"+d).addClass("current");
64.     $("#main2").html("Loading...");
65.     returnDate(d);
66. }
67. 
    
68. 
    
69. function getDateAndGo(json){
70.     var date2 = json.feed.entry[0].published.$t;
71.     ss = parseFloat(date2.substring(17,19));
72.     if(ss<59) ss++;
73.     if(ss<10) { ss = "0"+ ss; }
74.     date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
75.     location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page ;
76. }
77. 
    
78. function getDataAndShow(json){ //Needs jQuery
79.     $("#main2").empty();
80.     for (var i=0;i<json.feed.entry.length ;i++ )
81.     {
82.         var post=$(document.createElement("div")).addClass("post").appendTo("#main2");
83.         $(document.createElement("h3")).addClass("post-title").html("<a target=_blank title=/""+json.feed.entry[i].title.$t+"/" href=/""+json.feed.entry[i].link[2].href+"/">"+json.feed.entry[i].title.$t+"</a>").appendTo(post);
84.         $(document.createElement("div")).addClass("post-body").html(json.feed.entry[i].summary.$t).appendTo(post);
85.         $(document.createElement("div")).addClass("moreLink").html("<a href=/""+json.feed.entry[i].link[2].href+"/" target=_blank>查看全文>></a>").appendTo(post);
86. 
    
87.         var tags="标签： ";
88.         for (var c=0;c<json.feed.entry[i].category.length ;c++ )
89.         {
90.             tags+=json.feed.entry[i].category[c].term+" ";
91.         }
92.         $(document.createElement("p")).addClass("blogger-labels").text(tags).appendTo(post);
93.         $(document.createElement("p")).addClass("post-footer").html("张贴者："+json.feed.entry[i].author[0].name.$t+" 时间  "+json.feed.entry[i].updated.$t+" ").appendTo(post);
94.         //document.getElementById("main2").innerHTML+="<p>"+json.feed.entry[i].summary.$t.replace(///n/,"<BR />")+"</p>";
95.     }
96. }
97. 
    
98. function returnDate(startindex) {
99.     var i = per_page*(startindex-1)+1;
100.     var script2 = document.createElement("script");
101.     script2.src =  pager_feedx+"?start-index="+i+"&max-results="+pager_max_results+"&alt=json-in-script&callback=getDataAndShow";
102.     document.getElementsByTagName('head')[0].appendChild(script2);
103. }
104. 
     
105. 
     
106. function createPagesList(buoc,num_pages){
107.     var isDOM  = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
108.     if(buoc==0) buoc = 1;
109.     for(var i=1;i<num_pages+1;i = i+buoc)
110.     {
111.          var a = document.createElement("a");
112.         a.className = "blogpaging";
113.         a.id = "ddmp"+i;
114.         a.title = pager_link_alt_text+" "+i;
115.         a.href = "javascript:page(" + i + ")";
116.        
117.         if(buoc!=1) {
118.             r = num_pages % buoc;
119.             last = (r!=0) ? num_pages - r +1 : num_pages - buoc + 1;
120.             a.innerHTML = (i==last) ? i: i +'';
121.         } else {
122.             a.innerHTML = (i==num_pages) ? i: i +'';
123.         }
124.        
125.         var div = document.createElement("div");
126.         div.id = "ddmc"+i;
127.         div.style.visibility = "hidden";
128.         if(i!=num_pages){
129.             div2 = document.createElement("div");
130.             var t = '';
131.             for(var j=i+1;j<i+buoc;j++){
132.                 t += '<div class="blogpaging"><a title="'+pager_link_alt_text+' '+j+'" href="javascript:page('+j+')">'+j+'</a></div>';
133.                 if(j==num_pages) break;
134.             }
135.             div2.innerHTML = t;
136.             if(isDOM) div.appendChild(div2);
137.         }
138.                
139.         var sc2 = document.createElement("script");
140.         text = 'at_attach("ddmp'+i+'", "ddmc'+i+'", "hover", "y", "pointer");';
141.        
142.         if(isDOM){
143.             tt = document.createTextNode(text);
144.             sc2.appendChild(tt);
145.         } else {
146.             sc2.text = text;
147.         }
148.        
149.         var pages = document.getElementById('blogpager');
150.         pages.appendChild(a);
151.         pages.appendChild(div);
152.         pages.appendChild(sc2);
153.        
154.     }
155.     $("#ddmp1").addClass("current");
156. 
     
157. }
158. 
     
159. //==== display total posts and pages
160. 
     
161. function pager_showTotal(){
162.     var script = document.createElement('script');
163.     script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=pagerJsonShowTotal";
164.     script.type = "text/javascript";
165.     document.getElementsByTagName('head')[0].appendChild(script);
166. }
167. 
     
168. function pagerJsonShowTotal(json) {
169.     var posts  = json.feed.openSearch$totalResults.$t;
170.     var num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
171.     var totalDis = document.getElementById('blogpagerShowToTal');
172.     totalDis.innerHTML = pager_total_text+ posts + pager_posts_text + num_pages + pager_pages_text;
173. }
174. 
     
175. // ddmenu
176. function at_display(x) {
177.     var win = window.open();
178.     for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
179. }
180. function at_show_aux(parent, child) {
181.     var p = document.getElementById(parent);
182.     var c = document.getElementById(child );
183.     var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
184.     var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
185.     for (; p; p = p.offsetParent) {
186.         top  += p.offsetTop; left += p.offsetLeft;
187.     }
188.     c.style.position   = "absolute";
189.     c.style.top = top +'px'; c.style.left = left+'px'; c.style.visibility = "visible";
190. }
191. function at_show(){
192.     var p = document.getElementById(this["at_parent"]);
193.     var c = document.getElementById(this["at_child" ]); 
194.     at_show_aux(p.id, c.id); clearTimeout(c["at_timeout"]);
195. }
196. function at_hide(){
197.     var c = document.getElementById(this["at_child"]);
198.     c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
199. };
200. function at_click(){
201.     var p = document.getElementById(this["at_parent"]);
202.     var c = document.getElementById(this["at_child" ]);
203.     if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
204.     else c.style.visibility = "hidden";
205.     return false;
206. } 
207. function at_attach(parent, child, showtype, position, cursor) {
208.     var p = document.getElementById(parent);
209.     var c = document.getElementById(child); 
210.     p["at_parent"]  = p.id;
211.     c["at_parent"] = p.id;
212.     p["at_child"] = c.id;
213.     c["at_child"] = c.id;
214.     p["at_position"]   = position;
215.     c["at_position"] = position;
216.     c.style.position   = "absolute";
217.     c.style.visibility = "hidden";
218.     if (cursor != undefined) p.style.cursor = cursor;
219.     switch (showtype) {
220.         case "click":  p.onclick  = at_click;
221.             p.onmouseout  = at_hide;
222.             c.onmouseover = at_show;
223.             c.onmouseout  = at_hide;
224.             break;
225.         case "hover": p.onmouseover = at_show;
226.             p.onmouseout  = at_hide;
227.             c.onmouseover = at_show; c.onmouseout  = at_hide; break;
228.     }
229. }

以下是写给入门的站长的：
原理：本脚本是从blogger.com直接取json格式数据，通过javascript显示在页面上

步骤：
1、http://www.ayeah.com/js/blogger_pager_script_v11.js保存，修改后上传到自己的空间上
2、在blogger模板中分别调用jquery和blogger_pager_script_v11.js这两个脚本 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="http://www.ayeah.com/js/blogger_pager_script_v11.js"></script>

1.   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
2.   <script type="text/javascript" src="http://www.ayeah.com/js/blogger_pager_script_v11.js" ></script>

3、在模板中放两个div，位置随意，在body中即可

1.   <div id='blogpager''></div>
2.   <div id='blogpagerShowToTal'></div>

4、在模板中调用createBlogPager()来生成分页信息

1. $(document).ready(
2.   function(){ 
3.      createBlogPager();
4.   }
5. );

5、自己改CSS来美化你的分页显示 具体演示请看： http://www.ayeah.com