DedeCMS 的分页功能是通过一个固定的函数 GetPageList() 来实现的,其样式主要是由两个部分决定的：
（图片来源网络，侵删）
- PHP 函数中的参数：控制分页项的显示和基本结构。
- CSS 样式：负责美化分页栏的外观，使其更美观、更符合网站整体设计。
下面我将分步为您讲解如何修改和自定义分页样式。
第一步：理解分页函数 GetPageList()
在 DedeCMS 的列表页模板（通常是 list_article.htm）中,你会找到类似这样的代码：
<div class="dede_pages">
<ul class="pagelist">
{dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5"}
</ul>
</div>
这里的 {dede:pagelist} 就是调用分页标签的核心，它通过 listitem 和 listsize 等参数来控制分页栏的显示内容。
常用 listitem 参数说明：
index：首页pre：上一页pageno：页码（当前页高亮）next：下一页end：尾页info：分页信息（如：共 45 条记录，共 5 页）option：跳转下拉选择框
你可以根据自己的需求，调整 listitem 的值来决定显示哪些分页元素。
（图片来源网络，侵删）
第二步：修改分页标签的 HTML 结构（可选）
如果你觉得默认生成的 HTML 结构不够灵活，或者想使用更现代的标签（如 <nav>），你可以修改 DedeCMS 的核心文件。
⚠️ 重要提示：修改核心文件前，请务必备份原文件！
-
找到核心文件： 文件路径为：
/include/arc.listview.class.php -
定位函数： 在该文件中找到
GetPageList()函数。
（图片来源网络，侵删） -
修改
$listitem数组： 你可以修改这个函数中定义$listitem数组的部分，来改变每个分页项的 HTML 结构,默认的首页可能是：$indexpage = "<li><a href='".$this->GetCurUrl()."'>首页</a></li>\r\n";
你可以将其修改为：
$indexpage = "<li class='page-item'><a class='page-link' href='".$this->GetCurUrl()."' aria-label='首页'><span aria-hidden='true'>首页</span></a></li>\r\n";
对
pre,next,pageno等也进行类似的修改，使其生成符合你期望的 HTML 结构。
这种方法比较彻底，但需要对 PHP 代码有一定了解，且升级 DedeCMS 时可能会被覆盖，对于大多数用户，推荐使用下面的 CSS 方法，因为它更安全、更灵活。
第三步：通过 CSS 自定义分页样式（推荐）
这是最常用也是最安全的方法，我们只需要在网站的 CSS 文件（如 /templets/你的模板/style.css）中添加或修改样式即可。
默认情况下，DedeCMS 分页的 HTML 结构和类名如下：
<div class="dede_pages">
<ul class="pagelist">
<li><a href="/plus/list.php?tid=1">首页</a></li>
<li><a href="/plus/list.php?tid=1&PageNo=2">下一页</a></li>
<li class="thisclass"><a href="#">1</a></li>
<li><a href="/plus/list.php?tid=1&PageNo=2">2</a></li>
<li><a href="/plus/list.php?tid=1&PageNo=3">3</a></li>
<li><a href="/plus/list.php?tid=1&PageNo=4">4</a></li>
<li><a href="/plus/list.php?tid=1&PageNo=5">5</a></li>
<li><a href="/plus/list.php?tid=1&PageNo=6">6</a></li>
<li><span>...</span></li>
<li><a href="/plus/list.php?tid=1&PageNo=10">尾页</a></li>
</ul>
</div>
样式定制示例
下面我将提供几个常见的分页样式，你可以直接复制到你的 CSS 文件中,并根据需要进行调整。
示例1：简洁经典样式
这种样式清晰、易用,适合大多数网站。
/* 分页容器 */
.dede_pages {
margin: 20px 0;
text-align: center;
}
/* 分页列表 */
.pagelist {
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
}
/* 分页项（每个按钮） */
.pagelist li {
float: left; /* 使列表项横向排列 */
margin: 0 5px; /* 按钮之间的间距 */
}
/* 分页链接 */
.pagelist li a {
display: block;
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 3px; /* 圆角 */
color: #333;
text-decoration: none;
transition: all 0.3s ease;
}
/* 鼠标悬停效果 */
.pagelist li a:hover {
background-color: #f5f5f5;
border-color: #ccc;
}
/* 当前页样式 */
.pagelist li.thisclass a {
background-color: #007bff;
color: #fff;
border-color: #007bff;
cursor: default; /* 禁止点击 */
}
/* 省略号样式 */
.pagelist li span {
display: block;
padding: 6px 12px;
color: #999;
}
示例2：Bootstrap 风格样式
如果你的网站使用了 Bootstrap，或者你想要一个类似 Bootstrap 的分页效果,可以使用以下样式：
/* 分页容器 */
.dede_pages {
margin: 20px 0;
text-align: center;
}
/* 分页列表 */
.pagelist {
display: inline-flex;
list-style: none;
padding: 0;
margin: 0;
border-radius: 4px;
}
/* 分页项 */
.pagelist li {
margin: 0 2px;
}
/* 分页链接 */
.pagelist li a {
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #337ab7;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
/* 首页和上一页的特殊处理 */
.pagelist li:first-child a {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
/* 下一页和尾页的特殊处理 */
.pagelist li:last-child a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* 鼠标悬停和焦点状态 */
.pagelist li a:hover,
.pagelist li a:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
/* 当前页样式 */
.pagelist li.thisclass a {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
/* 省略号样式 */
.pagelist li span {
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
color: #777;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
}
示例3：现代卡片/按钮样式
这种样式更现代化，没有边框,主要靠背景色和阴影来区分。
/* 分页容器 */
.dede_pages {
margin: 20px 0;
text-align: center;
}
/* 分页列表 */
.pagelist {
display: inline-flex;
list-style: none;
padding: 0;
gap: 8px; /* 使用 gap 属性创建间距，更现代 */
}
/* 分页项 */
.pagelist li {
margin: 0;
}
/* 分页链接 */
.pagelist li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
color: #555;
background-color: #f8f9fa;
border: none;
border-radius: 8px;
font-size: 14px;
text-decoration: none;
transition: all 0.2s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 鼠标悬停效果 */
.pagelist li a:hover {
background-color: #e9ecef;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
color: #333;
}
/* 当前页样式 */
.pagelist li.thisclass a {
background-color: #007bff;
color: #fff;
box-shadow: 0 2px 5px rgba(0,123,255,0.3);
cursor: default;
}
/* 省略号样式 */
.pagelist li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
color: #adb5bd;
background-color: #f8f9fa;
border-radius: 8px;
font-size: 14px;
}
- 基础调整：在模板文件中通过修改
{dede:pagelist}的listitem参数来控制显示哪些分页元素。 - 深度定制：如果需要修改 HTML 结构，可以编辑
/include/arc.listview.class.php文件,但需谨慎操作并备份。 - 美化样式：推荐方法，在模板的 CSS 文件中添加样式，通过选择器（如
.pagelist li a,.pagelist li.thisclass）来精确控制分页的外观、颜色、间距和交互效果。
你可以从上面的示例中选择一个最符合你网站风格的 CSS，然后在此基础上进行微调,以达到最佳效果。
