dede5.7列表分页如何实现？

DedeCMS 的列表分页主要涉及三个核心部分：

1. 列表模板文件：用于定义列表内容的 HTML 结构。
2. 分页代码：一个固定的模板标签,用于生成分页的链接。
3. 后台设置：在后台配置列表每页显示的数量等参数。

下面我们分步进行详细说明。

第一步：创建列表模板文件

列表模板文件通常位于你模板目录下的 list_*.htm 文件。list_article.htm 就是文章列表的模板。

这个文件里包含了两个主要部分：

1. 循环：使用 {dede:list} 标签来循环输出文章列表。
2. 分页代码：使用 {dede:pagelist} 标签来显示分页导航。

循环 ({dede:list})

这个标签用于从数据库中获取数据并循环显示,它有两个最常用的属性：

• pagesize：设置每页显示的文章数量。注意：这个属性会覆盖后台的全局设置，优先级更高，len`：设置文章标题的显示长度。

示例代码：

{dede:list pagesize='10' titlelen='30'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
    </li>
{/dede:list}

代码解释：

• {dede:list pagesize='10' titlelen='30'}：开始一个循环，每页显示 10 条文章，标题最多显示 30 个字符。
• [field:arcurl/]：文章的链接地址。
• [field:title/]：文章的标题。
• [field:pubdate function="MyDate('Y-m-d',@me)"/]：文章的发布日期，这里使用了一个函数 MyDate 来格式化日期为 年-月-日 的格式。
• {/dede:list}：循环结束。

分页导航 ({dede:pagelist})

这个标签就是生成分页链接的核心，它有很多属性,可以让你自定义分页的样式。

常用属性：

• listsize：显示的页码链接数量，默认为 3（即当前页码前、后各显示 3 个页码）。
• listitem：定义要显示的分页项目，用 分隔，常用值有：
  • info：显示总页数、总条数等信息。
  • index：显示首页链接。
  • pre：显示上一页链接。
  • next：显示下一页链接。
  • pageno：显示页码数字。
  • endpage：显示尾页链接。
• template：指定分页的样式模板文件,这是实现自定义样式的关键！
• option：与 template 配合使用,给模板传递参数。

第二步：自定义分页样式

默认的分页样式可能不符合你的网站设计，最灵活、最推荐的方式是使用自定义模板。

使用 listitem 快速调整

如果你只需要调整默认样式的显示内容，可以直接在 {dede:pagelist} 标签里使用 listitem 属性。

示例代码：

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

这个例子会显示：信息、首页、尾页、上一页、下一页、页码数字。

创建自定义分页模板（强烈推荐）

如果你想完全控制分页的 HTML 结构和 CSS 类名，以便用 CSS 美化,就需要创建自定义模板。

操作步骤：

1. 创建模板文件： 在你的模板目录下（/templets/default/），创建一个新的 HTML 文件，比如命名为 my_pagination.htm。

2. 编写模板内容： 在 my_pagination.htm 文件中，使用 DedeCMS 提供的占位符来构建分页的 HTML 结构。

   my_pagination.htm 文件内容示例：

   <div class="pagination">
       <!-- 首页 -->
       <a href="{dede:global name='indexpage'/}" class="page-link">首页</a>
       <!-- 上一页 -->
       <a href="{dede:prepage/}" class="page-link">上一页</a>
       <!-- 页码数字 -->
       <span class="page-numbers">
           {dede:pagelist listitem='pageno' template=''}
       </span>
       <!-- 下一页 -->
       <a href="{dede:nextpage/}" class="page-link">下一页</a>
       <!-- 尾页 -->
       <a href="{dede:global name='endpage'/}" class="page-link">尾页</a>
       <!-- 信息 -->
       <span class="page-info">
           共 {dede:global name='totalresult'/} 条记录，第 <strong>{dede:global name='nowpage'/}</strong>/ <strong>{dede:global name='totalpage'/}</strong> 页
       </span>
   </div>

   占位符解释：

   • {dede:global name='indexpage'/}：首页链接。
   • {dede:prepage/}：上一页链接。
   • {dede:nextpage/}：下一页链接。
   • {dede:global name='endpage'/}：尾页链接。
   • {dede:global name='totalresult'/}：总记录数。
   • {dede:global name='nowpage'/}：当前页码。
   • {dede:global name='totalpage'/}：总页数。
   • {dede:pagelist listitem='pageno' template=''}：专门用于输出页码数字，这里我们把它单独拿出来放在一个 <span> 里方便控制样式。

3. 在列表模板中调用自定义模板： 回到你的列表模板文件（如 list_article.htm），在需要显示分页的地方，使用 template 属性来调用你刚刚创建的模板。

   示例代码：

   <!-- 列表内容循环 -->
   {dede:list pagesize='10'}
       <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">
       {dede:pagelist listitem='index,pre,next,endpage' template='my_pagination.htm'/}
   </div>

   注意：这里我们在 {dede:pagelist} 的 listitem 中只选择了 index,pre,next,endpage，因为我们把页码数字放在了自定义模板的 {dede:pagelist listitem='pageno'} 里，你也可以把所有项目都放在 listitem 中，然后在自定义模板里全部处理,选择哪种方式取决于你的结构需求。

4. 添加 CSS 样式： 给你的分页容器和链接添加 CSS 样式,使其看起来美观。

   CSS 示例：

   .pagination {
       display: flex;
       justify-content: center;
       align-items: center;
       list-style: none;
       padding: 20px 0;
       gap: 5px;
   }
   .pagination a.page-link,
   .pagination .page-numbers span,
   .pagination .page-info {
       padding: 5px 10px;
       border: 1px solid #ddd;
       border-radius: 3px;
       text-decoration: none;
       color: #333;
   }
   .pagination a.page-link:hover {
       background-color: #f0f0f0;
   }
   .pagination .page-numbers span.current {
       background-color: #007bff;
       color: white;
       border-color: #007bff;
   }
   .pagination .page-info {
       border: none;
       padding: 0 10px;
   }

第三步：后台全局设置

虽然可以在模板中用 pagesize 覆盖,但你也可以在后台设置一个默认值。

1. 登录 DedeCMS 后台。
2. 进入 系统 -> 系统基本参数 -> 核心设置。
3. 找到 “列表每页显示记录数” 这一项，设置你想要的默认值（20）。
4. 保存设置。

这个设置只对没有在模板中指定 pagesize 的 {dede:list} 标签生效。

总结与最佳实践

1. 基本分页：在 list_*.htm 中使用 {dede:list} 和 {dede:pagelist} 即可实现。
2. 自定义样式：强烈推荐使用自定义模板（template 属性）的方式，它将 HTML 结构与样式分离,更易于维护和美化。
3. 结构清晰：自定义模板时，给分页容器和链接添加有意义的 CSS 类名（如 .pagination, .page-link, .current），方便后续的 CSS 样式编写。
4. 调试：如果分页不显示或样式错乱，请检查：
   • 模板文件路径是否正确。
   • {dede:pagelist} 标签的属性是否写错。
   • 自定义模板中的占位符是否使用正确。
   • 后台是否已生成对应的列表 HTML 文件（分页是在生成时计算好的，不是实时计算的）。

通过以上步骤，你就可以在 DedeCMS 5.7 中完美地实现和自定义列表分页功能了。