dede pagelist样式如何自定义？

pagelist 的样式定制主要分为三个层面：

1. HTML 结构：通过修改标签属性来改变生成的 HTML 代码结构。
2. CSS 样式：通过编写 CSS 代码来美化 HTML 结构,实现视觉效果。
3. 默认文本：修改分页器中“上一页”、“下一页”、“首页”等默认显示的文字。

下面我们一步步进行讲解。

第一步：理解 pagelist 标签的基本用法

在 DedeCMS 的模板文件（通常是 list_article.htm）中,你可能会看到类似这样的代码：

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

• {dede:pagelist}: 这是核心标签。
• listsize='4': 表示在当前页码的前后各显示 4 个页码按钮。
• listitem: 这是一个非常重要的属性，用于控制分页器中显示哪些元素，常见的值有：
  • index: 首页
  • pre: 上一页
  • pageno: 页码
  • next: 下一页
  • end: 末页
  • info: 显示总页数等信息，如“共 45 页 / 当前第 1 页”

第二步：修改 HTML 结构（通过 listitem 和 listitemalt）

有时候默认生成的 HTML 结构不够灵活,我们可以通过自定义属性来改变它。

使用 listitem 控制显示内容

如上所述，你可以通过组合 listitem 的值来决定显示哪些部分，如果你想显示一个简洁的页码和上下页,可以这样写：

{dede:pagelist listitem='pre,next,pageno'}

使用 listitemalt 自定义不同部分的 class (进阶)

这是一个非常强大的功能，可以给不同的分页元素（如首页、上一页、页码、下一页、末页）赋予不同的 CSS 类名,从而进行精细化样式控制。

• listitemalt 的格式是：元素名1=类名1,元素名2=类名2,...

示例：

假设我们想给“首页”一个 .first-btn 的类，给“末页”一个 .last-btn 的类，给“上一页”和“下一页”分别设置不同的类。

{dede:pagelist listitem='index,pre,next,end,pageno' listitemalt='index=first-btn,pre=prev-btn,next=next-btn,end=last-btn'}

这样生成的 HTML 结构就会变成类似下面这样（具体标签名可能因版本略有不同）：

<ul class="pagelist">
    <li class="first-btn"><a href="#">首页</a></li>
    <li class="prev-btn"><a href="#">上一页</a></li>
    <!-- ... 其他页码 ... -->
    <li class="next-btn"><a href="#">下一页</a></li>
    <li class="last-btn"><a href="#">末页</a></li>
</ul>

注意： listitemalt 中的元素名必须和 listitem 中定义的元素名完全一致（不区分大小写）。

第三步：编写 CSS 样式

这是实现分页器美化的核心，我们将针对不同的 HTML 结构编写 CSS。

美化默认的 ul 和 li 结构

假设你的 pagelist 生成了如下 HTML：

<div class="dede_pages">
    <ul class="pagelist">
        <li><a href="1">1</a></li>
        <li><a href="2">2</a></li>
        <li><span class="thisclass">3</span></li>
        <li><a href="4">4</a></li>
        <li><a href="5">5</a></li>
        <li><a href="4">下一页</a></li>
    </ul>
</div>

对应的 CSS 样式可以这样写：

/* 1. 清除默认样式，设置分页容器 */
.dede_pages {
    text-align: center; /* 居中显示 */
    margin: 20px 0;
    font-size: 14px;
}
/* 2. 设置分页列表的样式 */
.dede_pages .pagelist {
    display: inline-block; /* 让 ul 能够像 div 一样设置宽高，并让 li 横向排列 */
    list-style: none; /* 去掉列表前的点 */
    padding: 0;
    margin: 0;
}
/* 3. 设置每个分页项的样式 */
.dede_pages .pagelist li {
    float: left; /* 横向排列 */
    margin: 0 5px; /* 设置页码之间的间距 */
}
/* 4. 设置页码链接的样式 */
.dede_pages .pagelist li a {
    display: block; /* 将 a 变为块级元素，方便设置宽高和内边距 */
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 3px; /* 圆角 */
    color: #333;
    text-decoration: none; /* 去掉下划线 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}
/* 5. 鼠标悬停在页码链接上时的样式 */
.dede_pages .pagelist li a:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
}
/* 6. 设置当前页码的样式 */
.dede_pages .pagelist li span.thisclass {
    display: block;
    padding: 6px 12px;
    border: 1px solid #007bff;
    border-radius: 3px;
    color: #fff;
    background-color: #007bff; /* 背景色 */
    cursor: default; /* 鼠标样式为默认，表示不可点击 */
}

美化带有自定义 class 的结构

如果你使用了 listitemalt，并且生成了这样的 HTML：

<ul class="pagelist">
    <li class="first-btn"><a href="#">首页</a></li>
    <li class="prev-btn"><a href="#">上一页</a></li>
    <li><span class="thisclass">3</span></li>
    <li><a href="#">下一页</a></li>
    <li class="last-btn"><a href="#">末页</a></li>
</ul>

你可以用更精细的 CSS 来控制：

/* 基础样式和上面类似，这里只展示不同之处 */
/* 首页和末页按钮的特殊样式 */
.pagelist .first-btn a,
.pagelist .last-btn a {
    padding: 6px 10px; /* 可以设置不同的内边距 */
    font-size: 12px;
}
/* 上一页和下一页按钮的特殊样式 */
.pagelist .prev-btn a::before {
    content: '‹ '; /* 使用特殊符号代替文字 */
    font-size: 16px;
}
.pagelist .next-btn a::after {
    content: ' ›'; /* 使用特殊符号代替文字 */
    font-size: 16px;
}
/* 禁用按钮的样式（当没有上一页或下一页时，DedeCMS 会自动加上 disabled 属性） */
.pagelist li.disabled a {
    color: #999;
    background-color: #f2f2f2;
    border-color: #ddd;
    cursor: not-allowed;
}

第四步：修改默认文本

如果你想修改“首页”、“上一页”等默认文字，可以在 DedeCMS 的后台进行操作。

1. 登录 DedeCMS 后台。
2. 进入 系统 -> 系统基本参数 -> 核心设置。
3. 找到 “列表分页样式” 或 “分页样式” 相关的选项。
4. 这里通常有一系列输入框，让你分别设置：
   • 首页: 默认是“首页”
   • 上一页: 默认是“上一页”
   • 下一页: 默认是“下一页”
   • 末页: 默认是“末页”
   • info: 默认是“共 {totalresult} 条记录，当前第 {page}页/共 {totalpage} 页”
5. 修改为你想要的文字，然后点击“保存”。

注意： info 文本中可以使用一些变量,如：

• {totalresult}: 总记录数
• {page}: 当前页码
• {totalpage}: 总页数

总结与最佳实践

1. 定位问题：首先确定你的 pagelist 标签中 listitem 属性的值，以及是否使用了 listitemalt。
2. 检查源码：在浏览器中右键查看分页区域的 HTML 源代码，了解 ul、li、a 和 span 的具体结构。
3. 编写 CSS：
   • 使用一个父级容器（如 .dede_pages）来包裹整个分页器,方便控制位置和样式。
   • 使用 display: inline-block; 让 ul 横向排列 li,这是最现代和推荐的方法。
   • 为 .thisclass（当前页）和 a:hover（鼠标悬停）设置明显的视觉差异。
   • 如果需要特殊样式，优先使用 listitemalt 赋予不同的 class，而不是用复杂的 CSS 选择器去定位。
4. 响应式考虑：如果在小屏幕上分页器会换行，可以考虑使用 Flexbox 布局来替代 float。

/* 使用 Flexbox 的示例 */
.dede_pages .pagelist {
    display: flex;
    justify-content: center; /* 水平居中 */
    list-style: none;
    padding: 0;
}
.dede_pages .pagelist li {
    margin: 0 3px; /* 使用 margin 间距 */
}

通过以上步骤，你就可以随心所欲地定制 DedeCMS pagelist 的样式,使其完美融入你的网站设计。