DEDECMS实用漂亮的翻页效果修改方法
作者：
有时候大家感觉dedecms的内容分页不太好看，下面的方法你就可以做出更好的分页效果代码
在网上流传很广,坛子里也有几个人都转过,这里说下怎么用(教程以默认模板为例).
一.内容页分页代码修改
首先介绍下基础知识,dede的内容页调用标记是:
复制代码 代码如下:
<div class="cupage">{dede:pagebreak/}</div>
生成html后形式为:
复制代码 代码如下:
<div class="cupage"><a href='#'>上一页</a><strong>1</strong><a href='#'>2</a> <a href='#'>下一页</a></div>
这里分析下,cupage的class控制整个分页区域的样式,"上一页"和"下一页"的样式可以通过控制A标签的样式来更改,而当前页,比如这里的"1"是用
<strong></strong>标记包围的,当然可以通过定义<strong>标记的样式实现当前页码与其他页码的样式不同.
然后再分析下下载的翻页效果代码,我们以第一个Digg Style为例.
首先看下Digg Style的html代码:
复制代码 代码如下:
<div class="digg">
<span class="disabled"> < </span>
<span class="current">1</span>
<a href="#?page=2">2</a><a href="#?page=3">3</a><a href="#?page=4">4</a><a href="#?page=5">5</a><a href="#?page=6">6</a><a href="#?
page=7">7</a>...<a href="#?page=199">199</a><a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
名为digg的class跟cupage作用一样,控制整个分页区域的样式,它这里的上一页和下一页用<和>代替了,而且设置了不同的样式,因为如果在第一页的话,上一页
这个链接是不可用的,所以区别了下一页的样式,但是dede在这里有个bug,从生成的html的代码也可以看出,当页码在第一页的时候,那个上一页依然是可点的,这个后面会给出解决方法.名为current的class控制的是当前页码的样式,这个和dede的<strong>标签的样式是一样的作用,像2.3...这样的页码样式和dede的一样,都用的是A标签,把这里的A标签的css搬到dede里就行了.
好了,分析到这就可以对照着Digg Style的css重写dede的分页css了,
Digg Style的css:
复制代码 代码如下:
DIV.digg {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN:
2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099
1px solid
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099
1px solid
}
DIV.digg SPAN.current {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-
BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR:
#000099
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px;
BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
首先来写cupage的css代码:
复制代码 代码如下:
.cupage {
width:638px;
text-align:center;
line-height:31px;
overflow:hidden;/*上面保留官方默认的一些css代码 下一行把Digg Style的DIV.digg的代码复制过来 这里我做了些精简 效果一样 只是写法不同*/
padding:3px;
margin:3px;
}
然后来当前页码的css:
复制代码 代码如下:
.cupage strong {
/*从DIV.digg SPAN.current复制过来即可 我这里同样做了精简*/
border: #000099 1px solid;
padding:2px 5px;
margin:2px;
color:#fff;
background-color:#000099;
font-weight:bold;
font-size:14px;/*此句定义字体大小 保留自官方的strong样式*/
} ：
下面来编写A标签的样式,它控制的是非当前页码和上一页.下一页的样式:
复制代码 代码如下:
.cupage a {
line-height:31px;
font-size:14px;/*以上保留自官方css 下面的直接拷贝DIV.digg A中的样式*/
border: #aaaadd 1px solid;
padding:2px 5px;
margin: 2px;
color: #000099;
text-decoration: none;
}
.cupage a:hover {
/*鼠标悬停的状态 照搬DIV.digg A:active*/
border: #000099 1px solid;
color: #000;
}
.cupage a:active {
/*照搬DIV.digg A:active*/
border: #000099 1px solid;
color: #000;
}
这样css就写完了,打开article.css,删掉253-256行,加入上面的css代码即可.其他的翻页样式都大同小异,参照上面的讲解慢慢改吧.
二.列表页分页代码修改
会改了内容页,列表页就很容易了,都差不多,这里同样以Digg Style为例.
首先来看看列表页的分页代码:
复制代码 代码如下:
<div class="pages"><div class="plist">{dede:pagelist listsize='4' listitem='index pre pageno next end '/}</div></div>
生成后是:
复制代码 代码如下:
<div class="pages"><div class="plist">
<a href='#'>首页</a>
<strong>1</strong>
<a href='#'>2</a>
<a href='#'>下一页</a>
<a href='#'>末页</a>
</div>
</div>
和内容页的差不多,简单分析下.pages和plist控制整个分页区域的样式,依然是<strong></strong>控制当前页码的样式,其他的链接用的是A标签,这里的分页没
有内容页的bug,就是页码在第一页的时候,上一页的链接会不显示,真搞不懂,列表页都正常,内容页却有bug,服了...
下面来写css样式:
复制代码 代码如下:
.pages .plist{
float:left;
line-height:17px;
padding:3px;
margin:3px;
}
.pages strong {
display:block;
float:left;
border: #000099 1px solid;
padding:2px 5px;
margin:2px;
color:#fff;
background-color:#000099;
font-weight:bold;
}
.plist a {
display:block;
height:17px;
float:left;
color:#000;
border: #aaaadd 1px solid;
padding:2px 5px;
margin: 2px;
color: #000099;
text-decoration: none;
}
.plist a:hover{
border: #000099 1px solid;
color: #000;
}
.plist a:active {
border: #000099 1px solid;
color: #000;
}
用上面的代码替换dede.css中230-298行分页样式就行了,注意只替换上面代码重新定义的样式,其他的默认分页样式(如input buttom)不要动.
三 修正内容页bug.
其实早些时候我看mb5u的站已经修正了这个问题,他的内容页分页实现了页码在第一页的时候,上一页的链接为不可点的形式,而且我看它的分页css代码和上面
讲到的24个翻页代码css代码命名方式一样,可见,mb5u也是抄袭的,而且没有把这个问题的解决方法共享,首先鄙视下身为版主的他╭∩╮（︶︿︶）╭∩╮
下面由于涉及到修改dede的php文件,请首先做好备份,这里也不在进行详细解释(实际上我也不懂php,也就没法解释...),直接给操作方法.
1. 打开include目录下的inc_archives_view.php文件,找到552行,改为:
复制代码 代码如下:
if($nowPage==1) $PageList.="<span class='disabled'> 上一页</span>";
然后找到569行,改为:
复制代码 代码如下:
else $PageList.= "<span class='disabled'> 下一页</span>";
保存后退出.
2. 在内容页的css加入下面的代码:
复制代码 代码如下:
.cupage .disabled {
/*照搬DIV.digg SPAN.disabled即可*/
border: #eee 1px solid;
padding: 2px 5px;
margin: 2px;
color: #ddd;
}
3. 重新生成html即可.
TIPS:到这里bug就修正了,但是有个小问题这里提一下,就是24个翻页样式中上一页和下一页用了<PRE和NEXT>代替了,mb5u也是没有用上一页和下一页,也用的是英文,具体原因为什么呢?这里不做解释,有兴趣的朋友试试就知道了,下面提示替换方法(懒的一步一步写了 给出全部代码):
直接把inc_archives_view.php的546-571改为:
复制代码 代码如下:
function GetPagebreak($totalPage,$nowPage,$aid)
{
if($totalPage==1){ return ""; }
$PageList = ''; // "共".$totalPage."页: ";
$nPage = $nowPage-1;
$lPage = $nowPage+1;
if($nowPage==1) $PageList.="<span class='disabled'> < PRE</span>";
else{
if($nPage==1) $PageList.="<a href='".$this->NameFirst.".".$this->ShortName."'>< PRE</a> ";
else $PageList.="<a href='".$this->NameFirst."_".$nPage.".".$this->ShortName."'>< PRE</a> ";
}
for($i=1;$i<=$totalPage;$i++)
{
if($i==1){
if($nowPage!=1) $PageList.="<a href='".$this->NameFirst.".".$this->ShortName."'>1</a> ";
else $PageList.="<strong>1</strong>";
}else{
$n = $i;
if($nowPage!=$i) $PageList.="<a href='".$this->NameFirst."_".$i.".".$this->ShortName."'>".$n."</a> ";
else $PageList.="<strong>$n</strong>";
}
}
if($lPage <= $totalPage) $PageList.="<a href='".$this->NameFirst."_".$lPage.".".$this->ShortName."'>NEXT></a> ";
else $PageList.= "<span class='disabled'> NEXT></span>";
return $PageList;
}
现在看看最终的效果吧
到这里教程就写玩了,累死我了,希望大家可以喜欢,以后我还会写一些有关模板方面的教程,太高深的俺也搞不来....附件提供下载的有:24款翻页代码,修改好
bug的inc_archives_view.php文件php文件覆盖时一定要备份原文件,另外此法只针对生成静态页面的站点有效,使用动态页面的参照上面步骤自己研究下就会改
下载：
css翻页代码.rar
inc_archives_view.rar