Blogger的翻页功能 终于实现了paging

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这两个脚本

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