dede 列表页也分页样式

默认情况下,DedeCMS 的分页样式比较朴素，通常是一串带样式的链接，我们可以通过修改模板文件和 CSS 样式，将其改造成更现代、更美观的样式，比如常见的 "上一页 1 2 3 ... 下一页" 的布局。

整个过程主要分为两步：

1. 修改列表页模板文件 (list_article.htm)：调整分页代码的 HTML 结构。
2. 修改 CSS 样式文件 (style.css 或 dedecms.css 等)：美化分页的显示效果。

第一步：修改列表页模板文件 (list_article.htm)

你需要找到并编辑你当前使用的前端模板目录下的 list_article.htm 文件，路径通常是 /templets/你的模板名称/。

找到默认的分页代码

在 list_article.htm 文件中，找到 {dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'} 这一行，这行代码就是生成列表页分页的核心。

替换为更灵活的 HTML 结构

为了更好地控制样式,我们需要将这行简单的标签替换为一个包含 div 容器和多个 span 标签的结构，这样我们就可以通过 CSS 来分别控制上一页、页码、下一页等不同部分的样式。

将原来的代码：

{dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno' /}

替换为下面的代码：

<div class="dede_pages">
    <span class="pageinfo">
        <strong>{dede:pagecount/}</strong>页
    </span>
    <span class="pagelist_pre">
        {dede:prepage/}
    </span>
    <span class="pagelist_num">
        {dede:pagelist listsize='4' listitem='index,pageno' /}
    </span>
    <span class="pagelist_next">
        {dede:nextpage/}
    </span>
</div>

代码解释：

• <div class="dede_pages">：这是整个分页区域的容器，我们用它来包裹所有分页元素，方便整体布局和样式控制。
• <span class="pageinfo">...</span>：显示总页数信息，共 5 页”。
• <span class="pagelist_pre">...</span>：专门用于放置“上一页”链接。
• <span class="pagelist_num">...</span>：专门用于放置页码（1, 2, 3...）。
• <span class="pagelist_next">...</span>：专门用于放置“下一页”链接。

通过这样拆分,我们就可以在 CSS 中针对 .pagelist_pre、.pagelist_num 等不同类名进行精确的样式设置。

第二步：修改 CSS 样式文件

打开你模板目录下的 CSS 文件（通常是 style.css），添加以下 CSS 代码来美化分页。

你可以根据自己网站的风格调整颜色、间距等。

/* DedeCMS 列表页分页样式美化 */
.dede_pages {
    text-align: center; /* 让分页居中显示 */
    font-size: 14px;
    color: #666;
    margin: 20px 0;
    padding: 10px 0;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}
/* 总页数信息样式 */
.dede_pages .pageinfo {
    margin-right: 15px;
    color: #999;
}
/* 上一页/下一页 基础样式 */
.dede_pages .pagelist_pre,
.dede_pages .pagelist_next {
    margin: 0 5px;
    padding: 5px 12px;
    border: 1px solid #ddd;
    border-radius: 3px; /* 圆角 */
    background-color: #f8f8f8;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease; /* 平滑过渡效果 */
}
/* 上一页/下一页 鼠标悬停效果 */
.dede_pages .pagelist_pre:hover,
.dede_pages .pagelist_next:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
/* 当前页码样式 */
.dede_pages .thisclass {
    background-color: #007bff;
    border: 1px solid #007bff;
    color: #fff;
    padding: 5px 12px;
    margin: 0 5px;
    border-radius: 3px;
    font-weight: bold;
}
/* 普通页码链接样式 */
.dede_pages a,
.dede_pages .pagelist_num span {
    display: inline-block; /* 让 span 也能有 padding 和 margin */
    margin: 0 5px;
    padding: 5px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #f8f8f8;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* 普通页码链接悬停效果 */
.dede_pages a:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}
/* 首页/末页 链接样式 (如果你在模板中开启了 listitem='index,end') */
.dede_pages .pagelist_first,
.dede_pages .pagelist_end {
    margin: 0 5px;
    padding: 5px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #f8f8f8;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}
.dede_pages .pagelist_first:hover,
.dede_pages .pagelist_end:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

第三步：完整示例与最终效果

list_article.htm 中的完整代码片段

<!-- 列表内容循环开始 -->
{dede:list pagesize='20'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
{/dede:list}
<!-- 列表内容循环结束 -->
<!-- 分页代码 -->
<div class="dede_pages">
    <span class="pageinfo">
        <strong>{dede:pagecount/}</strong>页
    </span>
    <span class="pagelist_pre">
        {dede:prepage/}
    </span>
    <span class="pagelist_num">
        {dede:pagelist listsize='4' listitem='index,pageno' /}
    </span>
    <span class="pagelist_next">
        {dede:nextpage/}
    </span>
</div>

最终效果预览

在浏览器中刷新你的列表页,你将会看到类似下面的效果：

[首页] [上一页] 1 2 3 4 5 ... 15 [下一页] [末页] 共 15 页

• 当前页码 (如第3页) 会高亮显示，背景色为蓝色，文字为白色。
• 其他页码 是一个带边框的灰色按钮。
• 鼠标移到其他页码或“上一页/下一页”上时，按钮会变成蓝色背景，白色文字，并有平滑的过渡动画。
• “共 X 页” 的信息会显示在分页区域的一侧。

常见问题与高级技巧

1. 如何修改“上一页/下一页”显示的文字？ 默认 {dede:prepage/} 和 {dede:nextpage/} 会显示“上一页”和“下一页”，如果你想改成 « 和 » 或者其他文字，可以修改 /include/arc.listview.class.php 文件，找到 GetPageListDM 函数，找到 $prepage 和 $nextpage 的定义部分，修改其中的字符串，但不推荐直接修改核心文件，升级会覆盖，更好的方法是使用 JS 或在模板中通过判断来替换。

2. 如何实现 "..." 省略号？ 默认的 {dede:pagelist} 在页码过多时已经自带了省略号（），你不需要做额外操作。

3. 分页样式不生效？

   • 检查缓存：DedeCMS 有强大的缓存机制，修改模板或 CSS 后，务必在后台 [系统] -> [性能优化] -> [清除全部缓存] 中清除缓存。
   • 检查路径：确保 CSS 文件的路径正确，并且被正确引入到了 list_article.htm 文件中（通常在 head 部分通过 <link> 标签引入）。
   • 使用浏览器开发者工具：按 F12 打开开发者工具，在 Elements 面板中检查分页元素的类名是否正确应用，以及 CSS 规则是否被正确加载和覆盖。

通过以上步骤,你就可以轻松地将 DedeCMS 列表页的分页样式修改成你想要的任何样子了。