dede pagelist 调用

pagelist 标签是 DedeCMS 中用于生成文章列表分页导航的核心标签，它可以在列表模板（list_*.htm）和文章内容页模板（article_*.htm）中使用，以显示“上一页”、“下一页”、“页码”等导航链接。

基本语法

pagelist 标签的基本语法非常简单，通常放在列表循环 {dede:list} 之后,或者文章内容页的底部。

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

常用参数说明

pagelist 标签的强大之处在于其丰富的参数,可以灵活控制分页导航的显示样式。

常用场景示例

示例1：最常用的分页导航（显示首页、上一页、页码、下一页、末页）

这是最经典和最常见的用法,适合大多数列表页。

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

• listitem='index pre pageno next end'：显示完整的导航元素。
• listsize='4'：当前页码左右各显示 4 个页码，总共最多显示 9 个页码（如果总页数足够）。
• style='book'：使用系统默认的 book 样式。

示例2：简洁的分页导航（只显示上一页、下一页和当前页码）

如果列表项很多，但页面空间有限,可以使用这种简洁样式。

<div class="dede_pages">
    <ul class="pagelist">
        {dede:pagelist listitem='pre pageno next' listsize='2' style='book'}
    </ul>
</div>

示例3：带跳转框的分页导航

适合页数非常多的列表,用户可以直接输入页码跳转。

<div class="dede_pages">
    <ul class="pagelist">
        {dede:pagelist listitem='index pre pageno next end option' listsize='3' style='book'}
    </ul>
</div>

• listitem 中加入了 option,就会自动生成一个下拉选择框。

示例4：显示详细的分页信息

在某些场景下，你可能想告诉用户总共有多少条数据,当前是第几页。

<div class="dede_pages">
    <ul class="pagelist">
        {dede:pagelist listitem='info' listsize='0' style='book'}
    </ul>
</div>

• listitem='info'：只显示信息文本。
• listsize='0'：不显示页码列表,因为信息里已经包含了页码信息。

示例5：在文章内容页中使用

页（article_*.htm）中，pagelist 通常用于显示“上一篇/下一篇”的链接，这时，listitem 参数可以省略,因为默认就包含这些项。

<div class="dede_pages">
    <ul class="pagelist">
        {dede:pagelist listitem='pre next' style='book'}
    </ul>
</div>
```页，`{dede:pagelist}` 会自动识别上下文，生成当前文章的上一篇和下一篇链接。
---
### 四、自定义样式（重点）
`pagelist` 生成的 HTML 结构是固定的，但样式可以通过 CSS 来自定义，`style` 参数在这里起到了关键作用。
#### 1. 默认样式分析
当你使用 `style='book'` 时，DedeCMS 会调用其默认的 CSS 样式，我们来看一下它生成的 HTML 结构：
```html
<div class="dede_pages">
    <ul class="pagelist">
        <li><a href="...">首页</a></li>
        <li><a href="...">上一页</a></li>
        <li><span class="thisclass">1</span></li> <!-- 当前页 -->
        <li><a href="...">2</a></li>
        <li><a href="...">3</a></li>
        <li><a href="...">下一页</a></li>
        <li><a href="...">末页</a></li>
        <li><select>...</select></li> <!-- 如果包含option -->
    </ul>
</div>

• 所有链接都被包裹在 <li> 标签内。
• 当前页 使用 <span class="thisclass"> 标签，而不是 <a> 标签，这是 CSS 样式化的关键。
• 下拉框 <select> 也被包裹在 <li> 中。

如何自定义 CSS

你可以通过两种方式来自定义样式：

修改默认 CSS 文件（不推荐，升级会覆盖）

编辑 /dede/templets/style/dedecms.css 文件，找到 .pagelist 相关的样式进行修改。

在模板文件中覆盖样式（推荐）

在你的列表模板文件（如 /templets/default/list_article.htm）中，通过 <style> 标签或引入外部 CSS 文件的方式,直接覆盖默认样式。

示例：创建一个现代化的分页样式

假设你想要一个类似 Bootstrap 的分页样式。

<!-- 在你的 list_*.htm 文件中，</head> 标签之前加入以下 CSS -->
<style>
    /* 重置默认样式 */
    .dede_pages ul, .dede_pages li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /* 使用 Bootstrap 风格的类名，或者你自己的类名 */
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
    }
    .pagination > li {
        display: inline;
    }
    .pagination > li > a,
    .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
    }
    .pagination > li:first-child > a,
    .pagination > li:first-child > span {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .pagination > li:last-child > a,
    .pagination > li:last-child > span {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .pagination > .thisclass {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }
    .pagination > .disabled > a,
    .pagination > .disabled > span {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }
</style>
<!-- 在你的分页代码处，给 ul 添加一个自定义的 class -->
<div class="dede_pages">
    <ul class="pagination">
        {dede:pagelist listitem='index pre pageno next end' listsize='4' style='book'}
    </ul>
</div>

解释：

1. 我们编写了一段 CSS，将 .pagelist 内的 <ul> 和 <li> 样式化成了我们想要的分页效果。
2. 关键点在于，我们保留了 DedeCMS 生成的 class="thisclass"，并为其设置了特殊的背景色和文字颜色,以突出显示当前页。
3. 在 {dede:pagelist} 标签外层的 <ul> 上，我们添加了 class="pagination"，这样我们编写的 CSS 就能正确应用。

常见问题与解决方案

Q1: 为什么我的分页不显示？

• 原因1：标签位置错误。 确保在列表模板 {dede:list} 循环结束后调用,或者在文章内容页底部调用。
• 原因2：文章数量不足。 如果你的文章总数少于每页显示的数量（[listsize]），系统可能不会生成分页，请确保文章总数 > 每页显示数。
• 原因3：pagesize 参数冲突。 在 {dede:list} 标签中有一个 pagesize 参数（每页显示数量），不要和 pagelist 的 listsize 搞混。

Q2: 如何实现 AJAX 无刷新分页？

pagelist 默认是生成分页链接的，点击会刷新整个页面，要实现 AJAX 无刷新分页,需要更复杂的开发：

1. 引入 JS 库：如 jQuery。
2. 修改模板：给分页链接 <a> 添加一个特定的 class，如 page-link。
3. 编写 JS 代码：监听 class="page-link" 的点击事件，阻止默认跳转，然后用 AJAX 请求新页面的内容，最后用 JS 更新页面内容区域。 这是一个前端开发技巧，超出了 pagelist 标签本身的范畴,是实现高级功能的基础。

Q3: 分页的 URL 是 /list/1.html 这种形式，如何修改？

这涉及到 DedeCMS 的伪静态规则设置。pagelist 标签本身不负责生成 URL 的形式，它只是调用系统函数来获取分页链接。 你需要去后台的“系统” -> “系统基本参数” -> “核心设置” 中，修改“是否使用伪静态”选项，并确保你的服务器（如 Apache 或 Nginx）已经配置了对应的伪静态规则。pagelist 的 tagname 参数可以用来指定伪静态中的变量名，tagname='page' 可能会让 URL 变成 /list/1_1.html 这样的形式（具体取决于你的伪静态规则）。

希望这份详细的指南能帮助你完全掌握 DedeCMS pagelist 标签的使用！