首页 > web前端 > Zblog实现长文章自动分页的方法

Zblog实现长文章自动分页的方法

2012-05-28 toyean web前端 1人评论 5016人浏览

此长文章自动分页提供两种分页方法:

一是按照文章字符数,这个数字可以自行设定,但有个不足之处,就是分页处如果正巧有图片出现,就会中断,后面的内容显示不了,优点就是方便,适合懒人;

二是在写文章时,在需要产生分页的地方,加入[Next=Page]分页标记(去掉=号).使用此方法,可以避免图片造成中断的情况,不足之处就是需要手动加入,而且在Zblog写文章的时候,可视编辑状态插入分页标志无效,必须切换到"源代码"状态下插入方有效果,勤者多劳了.呵呵

下面说下步聚:


一:用DW等网页编辑软件打开主题样式文件夹下模板文件夹里的b_article-single.html.在里面查找下面这行代码:

<#article/content#>

也就是显示文章内容的代码.将此代码改为以下代码:

<DIV id="article"></DIV>
    <xml id="xmlArticle">
         <Article>
          <Info>
           <Content>
                <![CDATA[<#article/content#>]]>
          </Content>
          </Info>
         </Article>
     </xml>
<script language="JavaScript" src="<#ZC_BLOG_HOST#>script/Autopage.js" type="text/javascript"></script>

注意:后面的JS调用一定要有,不然网页打开后会报错的,或者无法显示内容。(在头部调用还没有试过,好像会报错,就放这里吧,以免影响其它页面打开速度)

二:将下面的代码复制,存为Autopage.js,上传至网站空间根目录的SCRIPT文件夹里.(其它文件夹也可以,但上面的调用路径也要相应的做出调整)

特别注间:这个JS代码的编码模式应该是UTF8才行,不然会出现乱码。

//每页显示字数   
PageSize=5000;   
//分页模式   
flag=2;//1:根据字数自动分页 2:根据[NextPage]分页   
//默认页   
startpage = 1;   
//导航显示样式 0:常规 1:直接 3:下拉   
TopShowStyle = 1;   
DownShowStyle = 0;   
var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage;   
key="";   
currentSet=0;   
var Text=xmlArticle.selectSingleNode("//Content").text;   
TotalByte=Text.length;   
if (flag==1)   
{   
    PageCount=Math.round(TotalByte/PageSize);   
    if(parseFloat("0."+TotalByte%PageSize)>0){   
     if(parseFloat("0."+TotalByte%PageSize)<0.5){   
      PageCount=PageCount+1;   
      }   
    }   
    var PageNum=new Array(PageCount+1);   
    var PageTitle=new Array(PageCount+1);   
    PageNum[0]=0;   
    PageTitle[0]="";   
      
    var sDrv1,sDrv2,sDrv3,sDrv4,sFlag;   
    var sDrvL,sTemL;   
    var sTem1,sTem2,k;   
    sFlag=0;   
      
    for(j=1;j<PageCount+1;j++){   
     PageNum[j]=PageNum[j-1]+PageSize;   
     PageTitle[j]="";   
     //alert(j);   
     sDrv1="<br>";   
     sDrv2="<BR>";   
     sDrv3="<Br>";   
     sDrv4="<bR>";   
     sDrvL=sDrv1.length;   
     for(k=PageNum[j];k<=TotalByte;k++){   
      sTem1=Text.substring(PageNum[j]-sDrvL,k);   
      sTemL=sTem1.length;   
      sTem2=sTem1.substring(sTemL-sDrvL,sTemL)   
      if (sTem2==sDrv1 || sTem2==sDrv2 || sTem2==sDrv3 || sTem2==sDrv4)   
      {   
       sFlag=sFlag+1;   
       PageNum[j]=k;   
       break;   
      }   
     }   
     if (PageNum[j]>TotalByte)   
     {   
      break;   
     }   
    }   
    if (j<PageCount)   
    {   
     PageNum.length=j;   
     PageCount=j   
    }   
    if (PageCount>1&&sFlag>1&&PageCount<sFlag)   
    {   
     PageCount=sFlag+1;   
    }   
}   
else{   
    //手动分页   
    var j,sFlag,PageCount,sText;   
    var sTitleFlag;   
    var PageNum=new Array();   
    var PageTitle=new Array();   
    PageSize=0;   
    j=1;   
    PageNum[0]=-10;   
    PageTitle[0]="";    
    sFlag=0;   
    sText=Text;   
    do   
    {   
     sText=Text.substring(PageNum[j-1]+10,TotalByte);   
     sFlag=sText.indexOf("[NextPage");   
     if (sText.substring(sFlag+9,sFlag+10)=="=")   
     {   
      sTitleFlag=sText.indexOf("]",sFlag);   
      PageTitle[j]=sText.substring(sFlag+10,sTitleFlag);   
     }   
     else{   
      PageTitle[j]="";   
     }   
     if (sFlag>0)   
     {   
      PageNum[j]=sFlag+PageNum[j-1]+10;   
     }   
     else{   
      PageNum[j]=TotalByte;   
     }   
     j+=1;   
    }   
    while (PageNum[j-1]<TotalByte);   
    PageCount=j-1;   
}   
function text_pagination(Page){   
    var Output,Byte;   
    if(Page==null){Page=1;}   
    Output="";   
  
    //显示正文   
    if(Page==0) {   
    //不分页   
     tempText=Text;   
    }   
    else{   
    //分页   
     if (flag==1)   
     //自动分页   
     {   
      tempText=Text.substring(PageNum[Page-1],PageNum[Page]);    
     }   
     else{   
     //手动分页   
      if (PageTitle[Page-1].length==0)   
      {   
       tempText=Text.substring(PageNum[Page-1]+10,PageNum[Page]);   
      }   
      else{   
       tempText=Text.substring(PageNum[Page-1]+11+PageTitle[Page-1].length,PageNum[Page]);   
      }   
     }   
    }   
     
    //布置内容   
     
    Output=Output+"<div id=world>";   
    Output=Output+tempText;   
    Output=Output+"</div>";   
    Output=Output+"<br>";   
    Output=Output+"<div align=center>";   
    Output=Output+Article_PageNav(DownShowStyle,Page);   
    Output=Output+"</div>";   
     
    article.innerHTML = Output;   
    if (Page>1)   
    {   
     document.location.href='#top';   
    }   
}   
function Article_PageNav(ShowStyle,Page){   
//分页码显示函数   
//参数为调用样式,0=简单样式,1=标准样式   
    var temp="";   
    if (ShowStyle==0)   
    //简单样式   
    {   
     tempPage=Page;   
     if(TotalByte>PageSize){    
      if (Page-4<=1){   
       temp=temp+"<font face=webdings color=#999999>9</font>";   
       if (Page<=1){temp=temp+"<font face=webdings color=#999999>7</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";}   
       if (PageCount>10){   
        for(i=1;i<8;i++){   
         if (i==Page){   
          temp=temp+"<font color=red>"+i+"</font> ";   
         }else{   
          temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";   
         }   
        }   
       temp=temp+" ...";   
       }   
       else{   
        for(i=1;i<PageCount+1;i++){   
         if (i==Page){   
          temp=temp+"<font color=red>"+i+"</font> ";   
         }   
         else{   
          temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";   
         }   
        }   
       }   
       if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}   
       if(PageCount<10){temp=temp+"<font face=webdings color=#999999>:</font>";}else{temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";}   
      }   
      else if(Page+4<=PageCount){   
      temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";   
      temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";   
       if (PageCount>10){   
        temp=temp+"..";   
        for(i=Page-4;i<Page+4;i++){   
         if (i==Page){   
          temp=temp+"<font color=red>"+i+"</font> ";   
         }   
         else{   
         temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";   
         }   
        }   
        temp=temp+" ..";   
       }   
       else{   
        for(i=1;i<PageCount+1;i++){   
         if (i==Page){   
          temp=temp+"<font color=red>"+i+"</font> ";   
         }   
         else{   
         temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";   
         }
        }
       }
       if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}   
       temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";   
      }   
      else{   
       temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";   
       temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";   
       temp=temp+".."  
       for(i=Page-2;i<PageCount+1;i++){   
        if (i==Page){   
         temp=temp+"<font color=red>"+i+"</font> ";   
        }   
        else{   
         temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";   
        }   
       }   
       if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}   
       temp=temp+"<font face=webdings color=#999999>:</font>";   
      }   
     }   
     else{   
      temp=temp+"<font color=red>1</font> ";   
     }   
     temp=temp+" <a href=javascript:text_pagination(0)>显示全部</a>"  
    }   
    else if (ShowStyle==1)   
    //标准样式   
    {   
     if(TotalByte>PageSize){if(Page!=0){if(Page!=1){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page-1)+")><font color=3366cc>[上一页]</font></a>  ";}}}   
     for (i=1;i<PageCount+1 ;i++ )   
     {   
      if (Page==i)   
      {   
       temp=temp+"<font color=800000>["+i+"]</font>  ";   
      }   
      else{   
       temp=temp+"<a href='#top' onclick=javascript:text_pagination("+i+")><font color=3366cc>["+i+"]</font></a>  ";   
      }   
     }   
     temp=temp+"<a name='foot'></a>";   
     if(TotalByte>PageSize){if(Page!=0){if(Page!=PageCount){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page+1)+")><font color=3366cc>[下一页]</font></a>";}}}   
     temp=temp+" <a href=javascript:text_pagination(0)><font color=3366cc>显示全部</font></a>"  
    }   
    else if (ShowStyle==2)   
    //下拉菜单样式   
    {   
     temp=temp+'<select>'   
     for (i=1;i<PageCount+1 ;i++ )   
     {   
      if (Page==i)   
      {   
       temp=temp+"<option value='"+i+"' selected style='color:red'>第 "+i+" 页"  
      }   
      else{   
       temp=temp+"<option value='"+i+"'>第 "+i+" 页";   
      }   
      if (PageTitle.length!=0)   
      {   
       temp=temp+':'+PageTitle;   
      }   
      temp=temp+"</option>";   
     }   
     temp=temp+"</select>";   
    }   
    return (temp);   
}   
//默认页   
text_pagination(startpage);
打赏
标签:Zblog 翻页CSS ASP

评论列表

张民强  4年前 (2013-06-02) 回复该评论
这篇分享不错,不过我还是选用第二种。
张民强

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

拓源网官方微信
关注拓源网微博
476590949
09:00 - 18:00
拓源网QQ群: 491920017
客服邮箱: