介绍一个实用的Jimdo网站留言/博客自动分页代码

      Jimdo 的留言一直存在着一个缺陷,那就是没有自动分页功能。当留言数量较多时,带来的后果就是页面打开慢,直接影响了访客的心情,也影响了网站的访问量。比如我这里的访客留言页面,就迫不得已用手工进行了分页。但是手动毕竟不如自动,网上邻居偶然在网上发现了一种不错的JS自动分页代码,经过改造,成功地实现了Jimdo留言的自动分页

      它的效果如下:

      具体的JS代码如下:

<div id="PageNavigate" align="center">

</div>

<script type="text/javascript"> 

//<![CDATA[ 

var m_nItemPerPage =10, m_nCrtPage = 0; 

function GoPage(nPage) 

{     

      m_nCrtPage = nPage;     

      var divMessage = document.getElementsByClassName("commentstd clearover");     

      var nTotalMsg = divMessage.length;     

      for(var i = 0; i < m_nCrtPage * m_nItemPerPage; i++)     

      {

         divMessage[i].style.display = 'none';     

      }     

      for(var i = m_nCrtPage * m_nItemPerPage;            

                 i < Math.min((m_nCrtPage + 1) * m_nItemPerPage, nTotalMsg); i++)     

      {

         divMessage[i].style.display = 'block';

      }     

      for(var i = (m_nCrtPage + 1) * m_nItemPerPage; i < nTotalMsg; i++)     

      {

         divMessage[i].style.display = 'none';     

      }     

      document.getElementById("PageNavigate").innerHTML = "【分页】" ;            

      for(var i = 0 ; i < Math.ceil(nTotalMsg / m_nItemPerPage) ; i++)

      {

         if(i != m_nCrtPage)         

         {

             document.getElementById("PageNavigate").innerHTML =  

                    document.getElementById("PageNavigate").innerHTML +

                 "<a href='#' onclick='GoPage(" + i + ")'>" + (i + 1) + "<\/a>&nbsp;";

         }

         else

         {

             document.getElementById("PageNavigate").innerHTML =

                 document.getElementById("PageNavigate").innerHTML +

                 (i + 1) + "&nbsp;";

         }

     }

 }

 GoPage(0); 

//  ]]> 

</script>

使用方法:

      在留言的下方,添加“Widget/HTML“元素,然后将以上代码复制进去,再保存即可。其中:“var m_nItemPerPage =10”一句中的“10”是设置每页显示的留言条数,可以根据需要进行修改。

      以上代码是根据圣夜·纯白之地的博客分页代码修改而来的,原代码如下:

<div id="PageNavigate" align="center"> 
</div> 
<script type="text/javascript"> 
//<![CDATA[ 
var m_nItemPerPage = 10, m_nCrtPage = 0; 
function GoPage(nPage) 

    m_nCrtPage = nPage; 
    var divBlogs = document.getElementsByClassName("n clearover"); 
    var nTotalBlog = divBlogs.length; 
 
    //Hide Or Display Blog Item 
    for(var i = 0; i < m_nCrtPage * m_nItemPerPage; i++) 
    { 
        divBlogs[i].style.display = 'none'; 
    } 
    for(var i = m_nCrtPage * m_nItemPerPage;
            i < Math.min((m_nCrtPage + 1) * m_nItemPerPage, nTotalBlog); i++) 
    { 
        divBlogs[i].style.display = 'block'; 
    } 
    for(var i = (m_nCrtPage + 1) * m_nItemPerPage; i < nTotalBlog; i++) 
    { 
        divBlogs[i].style.display = 'none'; 
    } 
    //Reset PageNavigate 
    document.getElementById("PageNavigate").innerHTML = "页" ;
            for(var i = 0 ; i < Math.ceil(nTotalBlog / m_nItemPerPage) ; i++) 
    { 
        if(i != m_nCrtPage) 
        { 
            document.getElementById("PageNavigate").innerHTML = 
                document.getElementById("PageNavigate").innerHTML + 
                "<a href='#' onclick='GoPage(" + i + ")'>" + (i + 1) + "<\/a>&nbsp;"; 
        } 
        else 
        { 
            document.getElementById("PageNavigate").innerHTML = 
                document.getElementById("PageNavigate").innerHTML +
                 (i + 1) + "&nbsp;"; 
        } 
    } 

GoPage(0); 
//  ]]> 
</script> 

      经过试验,用于博客显示分页时,似乎还存在一点问题,演示页面:http://jdm.jimdo.com/blog/ 

PS:

      关于分页显示样式太难看的问题,我又查找了一些资料,作了点修改,修改后的样式如下:

      具体方法是修改 <a href='#' 这一句,在它后面加上CSS样式,我用的代码是:

style='color:#00e;font-weight:500;padding:1px 3px;border:#ccc 1px solid;'

      实际上就是给未选中的页码加上一个边框,修改了字体颜色和粗细,懂CSS的朋友可以按自己的喜好来修改。   (14/03-2011)

PS2:

      因为又看到有朋友对本文提出一些问题,这里再补充一点内容:

      1、网上邻居对JS一窍不通,这个代码是引用朋友的,文中已述。

      2、在Jimdo上使用这个JS自动分页代码,是因为Jimdo一直没有开发或者说没提供给Jimdo用户自动分页功能。

      有一点要说明一下,采用JS分页,只是纵向缩短了页面的长度,并不能加快网页的显示速度,它的实质只是显示分页,也就是说,它只能等内容加载完毕,才按照设定(比如条数、高度等)显示一定的内容。

      3、本文介绍的代码,只能对Jimdo的“博客显示”和“自已添加”的留言元素进行自动分页,也就是说,对于博文后面系统自带的“评论”及Jimdo“博文”,是无法实现自动分页的。

      4、文章标题是说留言/博客分页,实际上提供的只是“Jimdo留言”自动分页代码,要实现“博客显示”自动分页,需要作部分改动,其实就是一句代码,即:

      var divBlogs = document.getElementsByClassName("commentstd clearover")

      修改为:

      var divBlogs = document.getElementsByClassName("n clearover j-blogarticle")

      (28/10-2011)

Write a comment

Comments: 31
  • #1

    淘宝600家园 (Tuesday, 01 February 2011 12:46)

    我之前的分页都是手工设置的,看来这个代码很实用哦~~~~~

  • #2

    网上邻居 (Tuesday, 01 February 2011 12:58)

    我也觉得不错,才在这里推荐一下。用作留言分页已经比较实用了,不过用作博客分页,侧栏上的博客目录也参与进去了,尚有待改进。此外,当分页数目太多时,也存在点问题。

  • #3

    网型网秀 (Tuesday, 01 February 2011 13:14)

    Jimdo的留言薄不能自动分页,即使加了Javascript代码也不能阻止代码的生成,代码多了就会影响打开速度,所以最好使用于栏目不多的博客分页。

  • #4

    网上邻居 (Tuesday, 01 February 2011 14:05)

    JS代码肯定要有一定的执行时间,要说明一点的是,这个代码是加在具体页面上的,不会对整个网站产生影响。我对466条留言的访客留言第一页进行了试验,每页设置为20条,从打开速度上看,跟原来差别不大,但是从阅读感觉上来说,还是不一样的。

  • #5

    失色天空 (Tuesday, 01 February 2011 16:31)

    顶了再看。。。。学习下。

  • #6

    Suitear (Tuesday, 01 February 2011 16:53)

    这个?以前不是就有?

  • #7

    网上邻居 (Tuesday, 01 February 2011 17:13)

    呵呵,是早就有,我最近才看到这个,而且比较地看,感觉这个还比较实用,所以,就推荐了一下。

  • #8

    独星 (Tuesday, 01 February 2011 17:51)

    模板留言部分也改成红色~~~

  • #9

    网上邻居 (Tuesday, 01 February 2011 19:11)

    这个红色大背景,只是为了迎接兔年春节,临时改了一下,图个喜庆。
    顺祝朋友们兔年快乐!幸福!

  • #10

    网型网秀 (Wednesday, 02 February 2011 06:41)

    我的意思是留言过多会影响加载速度,不然你手工分页干嘛呢

  • #11

    王滨音乐空间 (Wednesday, 02 February 2011 11:51)

    谢谢邻居,代码拿去用一下。

  • #12

    网上邻居 (Wednesday, 02 February 2011 13:48)

    网型网秀:
    说的极是,我那个留言快1500条了,不手工分页简单没法想像。这个代码作为辅助用用还是不错的。感觉加载头像是影响打开速度的原因之一,找时间把头像去掉看看。

  • #13

    网上邻居 (Wednesday, 02 February 2011 13:54)

    王滨音乐空间:
    感觉这个代码还不错,欢迎试试。顺祝新年快乐!

  • #14

    holyice (Monday, 21 February 2011 15:22)

    首先感谢网上邻居的推荐转载以及原创更新,让我的心血得以让更多人知晓。博客分页因为我没用侧边栏,所以没发现到这个问题。

    另:后来又加了搜索功能,加好后一直没发文说明源码,索性看看能不能解决侧边栏问题过阵子一起补上。综合效果如下:http://holyice.jimdo.com/%E5%8D%9A%E5%AE%A2/

  • #15

    网上邻居 (Wednesday, 23 February 2011 21:13)

    holyice:你好!
    首先应该感谢你写的这个代码,感觉有一定实用价值,所以介绍了一下。我对JS一窍不通,希望有空改进一下,为更多的人Jimdo站长所使用。

  • #16

    zff (Friday, 25 February 2011 18:16)

    邻居介绍的holyice代码太好了实用了,谢谢!!

  • #17

    中国圆号网 (Saturday, 26 February 2011 19:11)

    此代码留言分页正常。但博客分页不正常,我把博文显示设为10,可第一页只显示3条。

  • #18

    江湖-XAPD (Sunday, 06 March 2011 00:54)

    收下放留言了,邻居,你能在给这个加上下一页前一页的显示吗?这个我感觉太简陋了。

  • #19

    网上邻居 (Sunday, 06 March 2011 17:58)

    江湖-XAPD:
    我不懂JS,不过我整理过一个博文自动分页的代码,它是可以实现上一页、下一页的,因为还不是很成熟,所以没有介绍。如果有感兴趣的朋友,可以看下:http://jdm.jimdo.com/2010/12/17/journey-to-the-west-01/的效果。

  • #20

    网型网秀 (Sunday, 10 April 2011 11:45)

    抽空再过来学学。

  • #21

    网型网秀 (Sunday, 10 April 2011 11:56)

    邻居可以将href="#"改成href='javascript:(null)',这样就不会出现每次都跳转到页面顶部了。

  • #22

    网型网秀 (Sunday, 10 April 2011 12:00)

    代码写错了,呵呵
    标准点应该写href="javascript:void(null)"或href="javascript:void(0)"

  • #23

    山百味 (Friday, 08 July 2011 15:30)

    尽管比较简单,但非常实用,收下了...

  • #24

    ericcruise (Sunday, 11 September 2011 15:09)

    请问在留言的下方,添加“Widget/HTML“元素,我怎么找不到留言的位置?可以再说仔细一点吗?

  • #25

    网上邻居 (Sunday, 11 September 2011 15:59)

    ericcruise:你好!
    “留言簿”元素是根据需要添加的,在“添加新元素”中有“留言簿”一项,添加了“留言簿”元素后,在它的下方,再添加本文所述的代码,就可以让留言按设计的条数自动分页显示了。
    另外,Jimdo博文的评论(或留言)是通过博客设置的,在它的后面无法添加元素,所以,博客评论/留言,是无法用这个方法实现分页的。

  • #26

    ericcruise (Sunday, 18 September 2011 15:30)

    谢谢!
    那让博客自动分页的方式该在哪里设定?我试了首页最下方,添加“Widget/HTML“元素,结果什么都没出现,可以帮我看一下吗?http://ericcruise.jimdo.com

  • #27

    网上邻居 (Monday, 24 October 2011 18:25)

    ericcruise:
    这个代码要放在留言的下方,通过“Widget/HTML“元素,添加文中所述代码,具体效果可以看下我的“访客留言”页面。

  • #28

    方溯 (Friday, 28 October 2011 15:39)

    博客自动分页使用此方式无效啊?

  • #29

    网上邻居 (Friday, 28 October 2011 20:14)

    方溯:
    不好意思,文中有点疏漏,请见PS2补充内容,也可以看下http://jdm.jimdo.com/blog/ 等页面的源码,很多东西都在学习和更新中...

  • #30

    wlp (Friday, 03 July 2015 12:31)

    http://www.guccihandbags.com.co/
    http://www.gucci-outlet.in.net/
    http://www.gucci--outlet.com.co/
    http://www.guccishoes.net.co/
    http://www.guccishoes.us.org/
    http://www.hermesbags.com.co/
    http://www.hermesbirkin.com.co/
    http://www.hermesoutlet.net.co/
    http://www.hollister.us.org/
    http://www.hollisterclothing-store.in.net/
    http://www.insanityworkout.net.co/
    http://www.iphone-cases.us/
    http://www.ralphlaurenpolo.in.net/
    http://www.ray-ban-outlet.us.com/
    http://www.raybans.us.org/
    http://www.rayban-sunglasses.org.uk/
    http://www.rayban-sunglasses.us.org/
    http://www.raybansunglassesoutlet.net.co/
    http://www.raybanwayfarer.in.net/
    http://www.replicahandbags.com.co/
    http://www.replicawatches.us.com/
    http://www.retro-jordans.com/
    http://www.rolex-watches.me.uk/
    http://www.rosherun.org.uk/
    http://www.rosheruns.us/
    http://www.salvatoreferragamo.in.net/
    http://www.soccer-shoes.org/
    http://www.softball-bats.us/
    http://www.suprashoe.net/
    http://www.swarovskicrystal.com.co/
    http://www.swarovskijewelry.com.co/
    http://www.swarovski-uk.org.uk/
    http://www.the-northface.com.co/
    http://www.the-northface.in.net/
    http://www.thenorth-face.org.uk/
    http://www.thenorthface.us.org/
    http://www.thenorthfacejackets.in.net/
    http://www.thomassabo-uk.org.uk/
    http://www.tiffanyandco.net.co/
    http://www.tiffanyjewelry.us.org/
    http://www.tory-burch-outlet.in.net/
    http://www.tory-burchoutlet.us.com/
    http://www.louboutin.jp.net/
    http://www.louis-vuittoncanada.ca/
    http://www.louisvuitton.jp.net/
    http://www.louis--vuitton.org.uk/
    http://www.louisvuitton.so/
    http://www.louisvuittonas.com/
    http://www.edhardy.in.net/
    http://www.levisjeans.com.co/
    http://www.bcbgdresses.net/
    http://www.bebeclothing.net/
    http://www.harrods-london.co.uk/
    http://www.guccishoes.com.co/
    http://www.ralphlaurenoutletonline.us.org/
    http://www.true-religion.com.co/
    http://www.truereligionjeans.net.co/
    http://www.truereligion-outlet.com.co/
    http://www.uggaustralia.net.co/
    http://www.uggboots.net.co/
    http://www.uggbootsclearance.com.co/
    http://www.uggsonsale.com.co/
    http://www.uggsoutlet.com.co/
    http://www.uptocoachoutlet.com/
    http://www.vansshoes.us/
    http://www.weddingdressesuk.org.uk/
    http://www.yogapants.com.co/
    http://www.ugg-boots.us.org/
    http://www.poloralphlaurenoutlet.net.co/
    http://www.burberryoutletonline.ar.com/
    http://www.toms-outlet.net.co/
    http://www.michaelkors.in.net/
    http://www.christianlouboutinoutlet.net.co/
    http://www.toryburchsale.com.co/
    http://www.pradaoutlet.com.co/
    http://www.longchamp-handbags.in.net/
    http://www.longchampoutlet.com.co/
    http://www.chanel-bags.com.co/
    http://www.truereligion-outlet.us.org/
    http://www.abercrombie-and-fitch.us.com/
    http://www.timberlandboots-outlet.net/
    http://www.timberland-shoes.com/
    http://www.tommyhilfiger.net.co/
    http://www.tommy-hilfigeroutlet.com/
    http://www.tomshoesoutlet.com/
    http://www.toms-outlet.in.net/
    http://www.toms-shoes.com.co/
    http://www.hollisterclothing.in.net/
    http://www.newbalance-shoes.org/
    http://www.converse--shoes.net/
    http://www.lululemonoutlet.com.co/
    http://www.nfl-jerseys.in.net/
    http://www.cheapjerseys.us.org/
    http://www.rolex-watches.us.com/
    http://www.rolexwatchesforsale.us.com/
    http://www.p90xworkout.in.net/
    http://www.giuseppezanotti.com.co/
    http://www.maccosmetics.net.co/
    http://www.instyler.in.net/
    http://www.mizunorunning.net/
    http://www.handbagsoutlet.com.co/
    http://www.hilfigeroutlet.in.net/
    http://www.kate-spade.com.co/
    http://www.katespade-outlet.com.co/
    http://www.kate-spades.com/
    http://www.longchamp.us.org/
    http://www.longchamp.com.co/

  • #31

    women's designer handbags (Saturday, 19 August 2017 14:20)

    Nice knowledge gaining article. This post is really the best on this valuable topic.