dede pagelist分页样式如何自定义？

pagelist 标签用于生成文章列表、分页列表等页面的分页导航，默认样式通常比较简陋，通过修改 CSS 和调整标签属性,你可以轻松打造出符合网站设计的分页样式。

默认分页代码分析

我们来看一下 pagelist 标签在页面上生成的默认 HTML 结构,了解这个结构是修改样式的第一步。

假设你在列表页使用：

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

它可能会生成类似下面的 HTML 代码：

<ul class="pagelist">
    <li class="pagelist_item"><span class="pageinfo">共 45 条</span></li>
    <li class="pagelist_item"><a href='list_1_1.html'>首页</a></li>
    <li class="pagelist_item"><a href='list_1_4.html'>上一页</a></li>
    <li class="pagelist_item"><a href='list_1_1.html'>1</a></li>
    <li class="pagelist_item"><a href='list_1_2.html'>2</a></li>
    <li class="pagelist_item"><a href='list_1_3.html'>3</a></li>
    <li class="pagelist_item"><a href='list_1_4.html'>4</a></li>
    <li class="pagelist_item"><strong class="thisclass">5</strong></li>
    <li class="pagelist_item"><a href='list_1_6.html'>6</a></li>
    <li class="pagelist_item"><a href='list_1_7.html'>7</a></li>
    <li class="pagelist_item"><a href='list_1_8.html'>8</a></li>
    <li class="pagelist_item"><a href='list_1_9.html'>9</a></li>
    <li class="pagelist_item"><a href='list_1_6.html'>下一页</a></li>
    <li class="pagelist_item"><a href='list_1_5.html'>末页</a></li>
</ul>

从上面的代码可以看出，pagelist 标签会生成一个 <ul> 列表，每个分页项（包括链接、数字、当前页、文本信息等）都是一个 <li> 元素，并且大部分都有 pagelist_item 这个 class，当前页的 <a> 标签会被替换为 <strong> 标签，并拥有 thisclass 这个 class。

修改分页样式的主要方法

主要有两种方法：

1. 推荐方法：通过 CSS 覆盖 - 这是最灵活、最推荐的方式，你不需要修改 DedeCMS 的核心文件，只需在模板的 CSS 文件中添加或修改样式即可。
2. 传统方法：修改 pagination 函数 - 通过修改 /include/arc.listview.class.php 文件来改变输出的 HTML 结构，这种方法不推荐，因为升级 DedeCMS 时你的修改会丢失。

我们重点讲解第一种方法。

实战：通过 CSS 打造现代化分页样式

假设你的网站使用了 Bootstrap，或者你想自己写一套样式,目标效果如下：

目标效果：

• 首页、上一页、页码、下一页、末页 都用按钮样式。
• 当前页高亮显示,且为不可点击状态。
• 文本信息（如“共 45 条”）样式与其他按钮区分开。

步骤 1：在模板文件中调用 pagelist

在你的列表页模板文件（通常是 list_*.htm）中，找到合适的位置放置 pagelist

<div class="dede_pages">
    {dede:pagelist listitem='info,index,end,pre,next,pageno' listsize='5'}
</div>

这里我们用 div.dede_pages 包裹 pagelist，方便后续 CSS 选择。

步骤 2：编写 CSS 样式

在你的 CSS 文件（如 /templets/你的模板风格/style.css）中，添加以下 CSS 代码,下面提供几种常见的样式方案。

---

纯 CSS 实现按钮式分页（推荐）

这种方法利用 not() 选择器，给所有可点击的链接应用按钮样式，然后单独为当前页（thisclass）和文本信息（pageinfo）设置不同样式。

/* 1. 设置分页容器的样式，清除默认列表样式 */
.dede_pages {
    display: flex;
    justify-content: center; /* 居中显示 */
    list-style: none;
    padding: 0;
    margin: 20px 0;
    gap: 5px; /* 按钮之间的间距 */
}
/* 2. 设置所有分页项的通用样式 */
.dede_pages li {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px; /* 圆角 */
    background-color: #fff;
}
/* 3. 设置所有分页链接的样式 */
.dede_pages li:not(.thisclass) a {
    color: #337ab7;
    text-decoration: none;
    display: block; /* 让 a 标签撑满 li */
}
/* 4. 鼠标悬停在链接上的效果 */
.dede_pages li:not(.thisclass) a:hover {
    background-color: #eee;
}
/* 5. 重点：设置当前页的样式 */
.dede_pages .thisclass {
    background-color: #337ab7;
    color: #fff;
    border-color: #337ab7;
    font-weight: bold;
    cursor: default; /* 显示为默认光标，表示不可点击 */
}
/* 6. 设置文本信息（如“共45条”）的样式 */
.dede_pages .pageinfo {
    color: #999;
    border: none;
    background: none;
    cursor: default;
    font-size: 14px;
    padding: 6px 12px;
}
/* 7. 首页、末页、上一页、下一页的特殊处理（可选，让它们更大或图标化） */
.dede_pages li a:first-child, /* 首页 */
.dede_pages li a:last-child {  /* 末页 */
    padding: 6px 16px;
}

效果说明：

• not(.thisclass) a 这个选择器非常关键，它选择了所有 class 不是 thisclass 的 <li> 中的 <a> 标签,也就是所有可点击的页码和导航链接。
• .thisclass 专门处理当前页,使其高亮且不可点击。
• .pageinfo 单独处理文本信息，去掉边框和背景,使其看起来不像按钮。

---

使用 Flexbox 和伪元素实现更简洁的分页

这个方案更现代，利用 :before 和 :after 伪元素来添加 "..." 省略号,这在页码很多时非常有用。

/* 容器样式 */
.dede_pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 20px 0;
}
/* 通用项样式 */
.dede_pages li {
    padding: 8px 12px;
    border-radius: 4px;
}
/* 链接样式 */
.dede_pages li:not(.thisclass) a {
    color: #555;
    text-decoration: none;
}
.dede_pages li:not(.thisclass) a:hover {
    background-color: #f0f0f0;
    color: #007bff;
}
/* 当前页样式 */
.dede_pages .thisclass {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    pointer-events: none; /* 更彻底地禁止点击 */
}
/* 文本信息样式 */
.dede_pages .pageinfo {
    color: #999;
}
/* 省略号样式 (需要修改PHP或在模板中手动处理，这里仅作CSS示例) */
.dede_pages .ellipsis::before {
    content: '...';
    color: #999;
    pointer-events: none;
}

注意：方案二中的省略号 通常需要通过修改 pagelist 的 PHP 代码或使用 JS 来动态插入，纯 CSS 实现比较困难，方案一的 listsize 属性已经能很好地控制显示的页码数量。

---

pagelist 标签常用属性

为了更好地控制分页显示，你需要了解 pagelist 的常用属性：

属性名	说明	示例
listsize	显示的页码链接数量。listsize='5' 表示当前页码的前后各显示 5 个页码。	{dede:pagelist listsize='3'}
listitem	显示哪些分页项，用 分隔。info-文本信息, index-首页, pre-上一页, pageno-页码, next-下一页, end-末页。	{dede:pagelist listitem='index pre pageno next end'}
listitem	显示哪些分页项，用 分隔。info-文本信息, index-首页, pre-上一页, pageno-页码, next-下一页, end-末页。	{dede:pagelist listitem='index pre pageno next end'}
option	select 下拉跳转菜单的附加属性。	option='onchange="document.location.href=this.options[this.selectedIndex].value;"'

总结与最佳实践

1. 首选 CSS：永远优先使用 CSS 来修改 pagelist 的样式，这是最安全、最灵活、最易于维护的方式。
2. 分析结构：在写 CSS 前，先用浏览器查看器（F12）查看 pagelist 生成的 HTML 结构，了解每个元素对应的 class。
3. 利用 class：pagelist 生成的 class（如 pagelist_item, thisclass, pageinfo）是你的好朋友,善用它们来精确定位样式。
4. 从简单开始：先修改背景色、文字颜色、边框等基本属性，再逐步调整布局、间距等，最后处理特殊状态（如 hover）。
5. 保持兼容：如果你的网站需要兼容旧浏览器，避免使用过于新潮的 CSS 特性（如 not() 选择器，虽然 IE9+ 已支持）。

通过以上方法，你就可以完全掌控 DedeCMS 的分页样式,让它完美融入你的网站设计。