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

最新推荐文章于 2024-04-22 15:28:53 发布

平淡真无奇

最新推荐文章于 2024-04-22 15:28:53 发布

阅读量2k

点赞数

文章标签： javascript div date json archive button

本文链接：https://blog.csdn.net/superayeah/article/details/3454784

版权

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

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

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

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

 
 /********************************
Blogger Pager Script v1.0
(C) 2008 by Anhvo, http://vietwebguide.com
Visit http://en.vietwebguide.com to get more cool hacks

演示：http://www.ayeah.com
********************************/
var home_page = "http://www.ayeah.com/";
var blogID = "2229728651085312053" ;

var pager_max_main = 15;
var pager_num_of_button = 10;

var pager_link_alt_text = "点击翻页";
//var pager_total_text = "共有";
//var pager_posts_text = " 帖子, ";
//var pager_pages_text = " 页";


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

var per_page = pager_max_results ;
$(document).ready(function(){
    if(!location.href.match('/labels/')) {
        pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary";
        pager_pageurl = home_page+"search";
        }
    else {
        //label = encodeURI($("a[href$='"+location.pathname+"']:eq(0)").text());
        label = $("a[href$='"+location.pathname+"']:eq(0)").text();
        //label = label.split("?")[0].
        //label = label.replace(/ /g,"%20");
        pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
        pager_pageurl = home_page+"labels/"+label;
    }
});

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

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

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


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

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

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

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


function createPagesList(buoc,num_pages){
    var isDOM  = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
    if(buoc==0) buoc = 1;
    for(var i=1;i<num_pages+1;i = i+buoc)
    {
         var a = document.createElement("a");
        a.className = "blogpaging";
        a.id = "ddmp"+i;
        a.title = pager_link_alt_text+" "+i;
        a.href = "javascript:page(" + i + ")";
       
        if(buoc!=1) {
            r = num_pages % buoc;
            last = (r!=0) ? num_pages - r +1 : num_pages - buoc + 1;
            a.innerHTML = (i==last) ? i: i +'';
        } else {
            a.innerHTML = (i==num_pages) ? i: i +'';
        }
       
        var div = document.createElement("div");
        div.id = "ddmc"+i;
        div.style.visibility = "hidden";
        if(i!=num_pages){
            div2 = document.createElement("div");
            var t = '';
            for(var j=i+1;j<i+buoc;j++){
                t += '<div class="blogpaging"><a title="'+pager_link_alt_text+' '+j+'" href="javascript:page('+j+')">'+j+'</a></div>';
                if(j==num_pages) break;
            }
            div2.innerHTML = t;
            if(isDOM) div.appendChild(div2);
        }
               
        var sc2 = document.createElement("script");
        text = 'at_attach("ddmp'+i+'", "ddmc'+i+'", "hover", "y", "pointer");';
       
        if(isDOM){
            tt = document.createTextNode(text);
            sc2.appendChild(tt);
        } else {
            sc2.text = text;
        }
       
        var pages = document.getElementById('blogpager');
        pages.appendChild(a);
        pages.appendChild(div);
        pages.appendChild(sc2);
       
    }
    $("#ddmp1").addClass("current");

}

//==== display total posts and pages

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

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

// ddmenu
function at_display(x) {
    var win = window.open();
    for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
function at_show_aux(parent, child) {
    var p = document.getElementById(parent);
    var c = document.getElementById(child );
    var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
    var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
    for (; p; p = p.offsetParent) {
        top  += p.offsetTop; left += p.offsetLeft;
    }
    c.style.position   = "absolute";
    c.style.top = top +'px'; c.style.left = left+'px'; c.style.visibility = "visible";
}
function at_show(){
    var p = document.getElementById(this["at_parent"]);
    var c = document.getElementById(this["at_child" ]); 
    at_show_aux(p.id, c.id); clearTimeout(c["at_timeout"]);
}
function at_hide(){
    var c = document.getElementById(this["at_child"]);
    c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
};
function at_click(){
    var p = document.getElementById(this["at_parent"]);
    var c = document.getElementById(this["at_child" ]);
    if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
    else c.style.visibility = "hidden";
    return false;
} 
function at_attach(parent, child, showtype, position, cursor) {
    var p = document.getElementById(parent);
    var c = document.getElementById(child); 
    p["at_parent"]  = p.id;
    c["at_parent"] = p.id;
    p["at_child"] = c.id;
    c["at_child"] = c.id;
    p["at_position"]   = position;
    c["at_position"] = position;
    c.style.position   = "absolute";
    c.style.visibility = "hidden";
    if (cursor != undefined) p.style.cursor = cursor;
    switch (showtype) {
        case "click":  p.onclick  = at_click;
            p.onmouseout  = at_hide;
            c.onmouseover = at_show;
            c.onmouseout  = at_hide;
            break;
        case "hover": p.onmouseover = at_show;
            p.onmouseout  = at_hide;
            c.onmouseover = at_show; c.onmouseout  = at_hide; break;
    }
}
 

以下是写给入门的站长的：
原理：本脚本是从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>

 
   <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>

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

 
   <div id='blogpager''></div>
  <div id='blogpagerShowToTal'></div>

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

 
 $(document).ready(
  function(){ 
     createBlogPager();
  }
);
 

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

平淡真无奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Javascript实现Blogger/Blogspot的传统模板翻页功能

Blogger的API很好很强大，今天，搞定了翻页功能，翻墙找到一个原始的脚本文件blogger_pager_script_v10.js，不过已经不好用了，于是改了一下，现在终于好用了。基本功能：首页的翻页标签页的翻页（还有archive页的翻页没搞，archive页默认是显示一个月内所有帖子，所以不用翻页）演示：http://www.ayeah.com，一切尽在源码中代码如下：
复制链接

扫一扫