pagebreak 标签主要用于两种场景：
- 内容分页：在文章内容编辑器中使用
{dede:pagebreak/}标签进行手动分页。 - 列表分页：在列表页（如文章列表、产品列表等）的底部分页导航，由
{dede:pagelist/}标签生成。
虽然都叫“分页”，但它们的样式定制方法完全不同,下面我将分别进行详细说明。
分页 ({dede:pagebreak/})
这是指在文章内容中使用“分页符”功能后，在文章内容页生成的“上一页/下一页”或“1 2 3”这样的分页链接。
修改模板文件
分页的样式是由文章内容页模板文件控制的，通常是 article_article.htm。
你需要在这个模板文件中找到 {dede:pagebreak/} 标签，并用一个 div 容器包裹它，以便于后续用 CSS 进行样式控制。
原始代码可能长这样：
{dede:pagebreak/}
修改后的推荐代码：
<div class="article-pagebreak">
{dede:pagebreak/}
</div>
我们给这个容器加上了 class="article-pagebreak"，接下来就可以专门针对这个 class 来写 CSS 了。
添加 CSS 样式
在模板文件 <head> 标签内引入的 CSS 文件（如 style.css）中,添加以下样式代码。
示例 1：简单的上一页/下一页样式
.article-pagebreak {
text-align: center; /* 居中对齐 */
margin: 30px 0; /* 上下间距 */
font-size: 14px; /* 字体大小 */
color: #666; /* 字体颜色 */
}
/* 分页链接的样式 */
.article-pagebreak a {
color: #007bff; /* 链接颜色 */
margin: 0 10px; /* 链接之间的左右间距 */
text-decoration: none; /* 去掉下划线 */
}
/* 鼠标悬停时的样式 */
.article-pagebreak a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
color: #0056b3; /* 悬停时颜色加深 */
}
/* 当前页码的样式（如果分页器显示数字） */
.article-pagebreak .thisclass {
color: #333; /* 当前页颜色 */
font-weight: bold; /* 字体加粗 */
margin: 0 10px;
}示例 2：更美观的按钮式样式
.article-pagebreak {
text-align: center;
margin: 40px 0;
}
.article-pagebreak a {
display: inline-block; /* 将链接设置为块级元素，以便设置宽高和内边距 */
padding: 8px 16px; /* 内边距，让按钮看起来更大 */
margin: 0 5px; /* 按钮之间的间距 */
background-color: #f0f0f0; /* 背景色 */
color: #333; /* 字体颜色 */
border-radius: 4px; /* 圆角 */
text-decoration: none; /* 去掉下划线 */
transition: all 0.3s ease; /* 添加过渡动画效果 */
}
/* 鼠标悬停效果 */
.article-pagebreak a:hover {
background-color: #007bff; /* 悬停时背景变蓝 */
color: #ffffff; /* 悬停时字体变白 */
}
/* 当前页码的样式 */
.article-pagebreak .thisclass {
background-color: #007bff; /* 当前页背景色 */
color: #ffffff; /* 当前页字体色 */
cursor: not-allowed; /* 鼠标样式为禁止 */
}
列表分页导航 ({dede:pagelist/})
这是指在文章列表页、图集列表页等，页面底部显示的“首页 上一页 1 2 3 4 5 下一页 末页”这样的分页导航。
修改模板文件
列表分页的样式由列表页模板文件控制，通常是 list_*.htm (list_article.htm)。
你需要找到 {dede:pagelist/} 标签，并用一个 div 容器包裹它。
原始代码可能长这样：
<div class="dede_pages">
<ul class="pagelist">
{dede:pagelist listsize='5' listitem='info,index,end,pre,next,pageno'}
</ul>
</div>
DedeCMS 默认已经给分页加上了 dede_pages 和 pagelist 这两个 class，我们可以直接利用它们，如果默认结构不是这样，你需要自己用 div 包裹并加上 class。
添加 CSS 样式
同样，在 CSS 文件中添加样式来美化这个分页导航。
示例 1：经典分页样式
/* 整个分页导航的容器 */
.dede_pages {
text-align: center;
margin: 30px 0;
font-size: 12px;
color: #999;
}
/* 分页导航的列表容器 */
.dede_pages .pagelist {
display: inline-block; /* 让ul横向排列 */
list-style: none; /* 去掉列表前的点 */
padding: 0;
margin: 0;
}
/* 分页导航中的每一个列表项 (li) */
.dede_pages .pagelist li {
float: left; /* 让li横向浮动 */
margin: 0 5px; /* li之间的间距 */
}
/* 分页导航中的每一个链接 (a) */
.dede_pages .pagelist a {
display: block; /* 将a设置为块级元素 */
padding: 5px 10px; /* 内边距 */
border: 1px solid #ddd; /* 边框 */
color: #666; /* 字体颜色 */
text-decoration: none; /* 去掉下划线 */
}
/* 鼠标悬停在链接上时的效果 */
.dede_pages .pagelist a:hover {
border-color: #007bff; /* 边框变色 */
color: #007bff; /* 字体变色 */
}
/* 当前页码的样式 */
.dede_pages .pagelist .thisclass {
display: block;
padding: 5px 10px;
border: 1px solid #007bff; /* 当前页边框颜色 */
background-color: #007bff; /* 当前页背景色 */
color: #ffffff; /* 当前页字体颜色 */
font-weight: bold; /* 字体加粗 */
cursor: default; /* 鼠标样式为默认 */
}
/* 上一页/下一页 首页/末页 的样式 */
.dede_pages .pagelist a.prev,
.dede_pages .pagelist a.next {
color: #999;
}
.dede_pages .pagelist a.prev:hover,
.dede_pages .pagelist a.next:hover {
color: #007bff;
border-color: #007bff;
}
示例 2：现代化按钮式分页
.dede_pages {
text-align: center;
margin: 40px 0;
}
.dede_pages .pagelist {
display: inline-flex; /* 使用flexbox布局，更现代 */
list-style: none;
padding: 0;
gap: 5px; /* flex布局下的间距 */
}
.dede_pages .pagelist li {
margin: 0;
}
.dede_pages .pagelist a {
display: inline-block; /* 也可以直接用inline-block */
padding: 8px 15px;
border-radius: 4px;
background-color: #f8f9fa;
color: #333;
border: 1px solid #dee2e6;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.dede_pages .pagelist a:hover {
background-color: #e9ecef;
border-color: #adb5bd;
}
.dede_pages .pagelist .thisclass {
background-color: #007bff;
color: white;
border-color: #007bff;
cursor: not-allowed;
}
总结与技巧
- 定位问题：首先要明确你要修改的是内容分页还是列表分页，它们位于不同的模板文件中，使用不同的标签 (
{dede:pagebreak/}vs{dede:pagelist/})。 - 容器包裹：无论哪种情况，最关键的一步是用
div容器包裹分页标签，并给它一个独特的class名，这是 CSS 选择器生效的前提。 - 浏览器开发者工具：这是你最好的朋友，在浏览器中按
F12打开开发者工具，右键点击你想要修改的分页元素，选择“检查”，你就能看到它的 HTML 结构和当前应用的 CSS 样式,从而进行精准的修改。 - 清除缓存：修改模板文件或 CSS 文件后，务必去 DedeCMS 后台“系统” -> “一键更新缓存”中更新缓存,否则可能看不到效果。
- 响应式设计：如果希望分页在不同屏幕尺寸下都美观，可以使用媒体查询 (
@media) 来调整小屏幕下的分页样式,例如在小屏幕上将分页链接改为垂直排列或隐藏部分页码。
通过以上步骤，你就可以完全掌控 DedeCMS 中分页的样式,使其与你的网站设计风格完美融合。
