2014年2月16日星期日

用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. 演示:http://www.ayeah.com
  6. ********************************/
  7. var home_page = "http://www.ayeah.com/";
  8. var blogID = "2229728651085312053" ;

  9. var pager_max_main = 15;
  10. var pager_num_of_button = 10;

  11. var pager_link_alt_text = "点击翻页";
  12. //var pager_total_text = "共有";
  13. //var pager_posts_text = " 帖子, ";
  14. //var pager_pages_text = " 页";


  15. var pager_max_results = 15;
  16. if(location.href.match("max-results=")){
  17.     pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("/&")[0]);
  18. else if(!location.href.match("/label/")){
  19.     pager_max_results = pager_max_main;
  20. }

  21. var per_page = pager_max_results ;
  22. $(document).ready(function(){
  23.     if(!location.href.match('/labels/')) {
  24.         pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary";
  25.         pager_pageurl = home_page+"search";
  26.         }
  27.     else {
  28.         //label = encodeURI($("a[href$='"+location.pathname+"']:eq(0)").text());
  29.         label = $("a[href$='"+location.pathname+"']:eq(0)").text();
  30.         //label = label.split("?")[0].
  31.         //label = label.replace(/ /g,"%20");
  32.         pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
  33.         pager_pageurl = home_page+"labels/"+label;
  34.     }
  35. });

  36. function createBlogPager(){
  37.     var script = document.createElement('script');
  38.     script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
  39.     script.type = "text/javascript";
  40.     document.getElementsByTagName('head')[0].appendChild(script)
  41. }

  42. function countnumpost(json) {
  43.     var posts  = json.feed.openSearch$totalResults.$t;
  44.     var num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
  45.     var buoc2 = Math.round(num_pages/pager_num_of_button);
  46.     createPagesList(buoc2,num_pages);
  47.     var totalDis = document.getElementById('blogpagerShowToTal');
  48.     //totalDis.innerHTML = pager_total_text+ posts + pager_posts_text + num_pages + pager_pages_text;
  49.     totalDis.innerHTML = "共有 <strong>"+num_pages+"</strong> 页,<strong>"+ posts +"</strong> 个文章";
  50. }

  51. function page(d){
  52.     window.scroll(0,0);
  53.     $("a[id^=ddmp]").removeClass("current");
  54.     $("#ddmp"+d).addClass("current");
  55.     $("#main2").html("Loading...");
  56.     returnDate(d);
  57. }


  58. function getDateAndGo(json){
  59.     var date2 = json.feed.entry[0].published.$t;
  60.     ss = parseFloat(date2.substring(17,19));
  61.     if(ss<59) ss++;
  62.     if(ss<10) { ss = "0"+ ss; }
  63.     date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
  64.     location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page ;
  65. }

  66. function getDataAndShow(json){ //Needs jQuery
  67.     $("#main2").empty();
  68.     for (var i=0;i<json.feed.entry.length ;i++ )
  69.     {
  70.         var post=$(document.createElement("div")).addClass("post").appendTo("#main2");
  71.         $(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);
  72.         $(document.createElement("div")).addClass("post-body").html(json.feed.entry[i].summary.$t).appendTo(post);
  73.         $(document.createElement("div")).addClass("moreLink").html("<a href=/""+json.feed.entry[i].link[2].href+"/" target=_blank>查看全文>></a>").appendTo(post);

  74.         var tags="标签: ";
  75.         for (var c=0;c<json.feed.entry[i].category.length ;c++ )
  76.         {
  77.             tags+=json.feed.entry[i].category[c].term+" ";
  78.         }
  79.         $(document.createElement("p")).addClass("blogger-labels").text(tags).appendTo(post);
  80.         $(document.createElement("p")).addClass("post-footer").html("张贴者:"+json.feed.entry[i].author[0].name.$t+" 时间  "+json.feed.entry[i].updated.$t+" ").appendTo(post);
  81.         //document.getElementById("main2").innerHTML+="<p>"+json.feed.entry[i].summary.$t.replace(///n/,"<BR />")+"</p>";
  82.     }
  83. }

  84. function returnDate(startindex) {
  85.     var i = per_page*(startindex-1)+1;
  86.     var script2 = document.createElement("script");
  87.     script2.src =  pager_feedx+"?start-index="+i+"&max-results="+pager_max_results+"&alt=json-in-script&callback=getDataAndShow";
  88.     document.getElementsByTagName('head')[0].appendChild(script2);
  89. }


  90. function createPagesList(buoc,num_pages){
  91.     var isDOM  = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
  92.     if(buoc==0) buoc = 1;
  93.     for(var i=1;i<num_pages+1;i = i+buoc)
  94.     {
  95.          var a = document.createElement("a");
  96.         a.className = "blogpaging";
  97.         a.id = "ddmp"+i;
  98.         a.title = pager_link_alt_text+" "+i;
  99.         a.href = "javascript:page(" + i + ")";
  100.        
  101.         if(buoc!=1) {
  102.             r = num_pages % buoc;
  103.             last = (r!=0) ? num_pages - r +1 : num_pages - buoc + 1;
  104.             a.innerHTML = (i==last) ? i: i +'';
  105.         } else {
  106.             a.innerHTML = (i==num_pages) ? i: i +'';
  107.         }
  108.        
  109.         var div = document.createElement("div");
  110.         div.id = "ddmc"+i;
  111.         div.style.visibility = "hidden";
  112.         if(i!=num_pages){
  113.             div2 = document.createElement("div");
  114.             var t = '';
  115.             for(var j=i+1;j<i+buoc;j++){
  116.                 t += '<div class="blogpaging"><a title="'+pager_link_alt_text+' '+j+'" href="javascript:page('+j+')">'+j+'</a></div>';
  117.                 if(j==num_pages) break;
  118.             }
  119.             div2.innerHTML = t;
  120.             if(isDOM) div.appendChild(div2);
  121.         }
  122.                
  123.         var sc2 = document.createElement("script");
  124.         text = 'at_attach("ddmp'+i+'", "ddmc'+i+'", "hover", "y", "pointer");';
  125.        
  126.         if(isDOM){
  127.             tt = document.createTextNode(text);
  128.             sc2.appendChild(tt);
  129.         } else {
  130.             sc2.text = text;
  131.         }
  132.        
  133.         var pages = document.getElementById('blogpager');
  134.         pages.appendChild(a);
  135.         pages.appendChild(div);
  136.         pages.appendChild(sc2);
  137.        
  138.     }
  139.     $("#ddmp1").addClass("current");

  140. }

  141. //==== display total posts and pages

  142. function pager_showTotal(){
  143.     var script = document.createElement('script');
  144.     script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=pagerJsonShowTotal";
  145.     script.type = "text/javascript";
  146.     document.getElementsByTagName('head')[0].appendChild(script);
  147. }

  148. function pagerJsonShowTotal(json) {
  149.     var posts  = json.feed.openSearch$totalResults.$t;
  150.     var num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
  151.     var totalDis = document.getElementById('blogpagerShowToTal');
  152.     totalDis.innerHTML = pager_total_text+ posts + pager_posts_text + num_pages + pager_pages_text;
  153. }

  154. // ddmenu
  155. function at_display(x) {
  156.     var win = window.open();
  157.     for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
  158. }
  159. function at_show_aux(parent, child) {
  160.     var p = document.getElementById(parent);
  161.     var c = document.getElementById(child );
  162.     var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  163.     var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
  164.     for (; p; p = p.offsetParent) {
  165.         top  += p.offsetTop; left += p.offsetLeft;
  166.     }
  167.     c.style.position   = "absolute";
  168.     c.style.top = top +'px'; c.style.left = left+'px'; c.style.visibility = "visible";
  169. }
  170. function at_show(){
  171.     var p = document.getElementById(this["at_parent"]);
  172.     var c = document.getElementById(this["at_child" ]); 
  173.     at_show_aux(p.id, c.id); clearTimeout(c["at_timeout"]);
  174. }
  175. function at_hide(){
  176.     var c = document.getElementById(this["at_child"]);
  177.     c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
  178. };
  179. function at_click(){
  180.     var p = document.getElementById(this["at_parent"]);
  181.     var c = document.getElementById(this["at_child" ]);
  182.     if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
  183.     else c.style.visibility = "hidden";
  184.     return false;
  185. function at_attach(parent, child, showtype, position, cursor) {
  186.     var p = document.getElementById(parent);
  187.     var c = document.getElementById(child); 
  188.     p["at_parent"]  = p.id;
  189.     c["at_parent"] = p.id;
  190.     p["at_child"] = c.id;
  191.     c["at_child"] = c.id;
  192.     p["at_position"]   = position;
  193.     c["at_position"] = position;
  194.     c.style.position   = "absolute";
  195.     c.style.visibility = "hidden";
  196.     if (cursor != undefined) p.style.cursor = cursor;
  197.     switch (showtype) {
  198.         case "click":  p.onclick  = at_click;
  199.             p.onmouseout  = at_hide;
  200.             c.onmouseover = at_show;
  201.             c.onmouseout  = at_hide;
  202.             break;
  203.         case "hover": p.onmouseover = at_show;
  204.             p.onmouseout  = at_hide;
  205.             c.onmouseover = at_show; c.onmouseout  = at_hide; break;
  206.     }
  207. }
以下是写给入门的站长的: 
原理:本脚本是从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. );

没有评论:

发表评论