织梦列表页如何实现上一页下一页功能？

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

标签属性说明

• listitem: 控制显示哪些分页项目，这是实现“上一页/下一页”的关键。

  • index: 首页
  • pre: 上一页
  • next: 下一页
  • last: 末页
  • pageno: 页码
  • info: 显示“共X页”等提示信息
  • 你可以根据需要自由组合,listitem="pre,next" 就只显示上一页和下一页。

• listsize: 显示的页码按钮数量。listsize="5" 表示在当前页码左右各显示2个页码按钮，总共5个，这个属性主要影响 pageno 的显示效果。

• liststyle: 定义分页的样式，通常使用CSS类名来控制。liststyle="style2"，你可以在CSS文件中找到 .style2 的定义来修改其样式。

自定义“上一页/下一页”的显示文本和样式

默认的“上一页/下一页”文字可能不符合你的设计需求，我们可以通过修改模板和CSS来完全自定义它。

步骤1：修改模板，使用更灵活的标签

为了更好地控制每个分页元素的样式,我们可以不使用 listitem 一次性输出所有内容，而是分别调用 pre 和 next。

在 list_article.htm 中，将原来的 {dede:pagelist} 替换为以下代码：

<div class="dede_pages">
    <ul class="pagelist">
        <!-- 上一页 -->
        {dede:pagelist listitem="pre" listsize="0"}
            <li class="pre"><a href="[field:link/]">上一页</a></li>
        {/dede:pagelist}
        <!-- 页码 -->
        {dede:pagelist listitem="index,pageno,next,last" listsize="5" liststyle="style"}
        <!-- 下一页 -->
        {dede:pagelist listitem="next" listsize="0"}
            <li class="next"><a href="[field:link/]">下一页</a></li>
        {dede:pagelist}
    </ul>
</div>

代码解释：

• 我们用三个独立的 {dede:pagelist} 标签分别处理“上一页”、“页码”和“下一页”。
• listsize="0" 表示不显示页码按钮，只输出当前项（pre 或 next）。
• [field:link/] 是织梦模板中的变量，代表该分页链接的URL。
• 我们给“上一页”和“下一页”的 li 元素分别添加了 pre 和 next 类名，方便后续用CSS进行样式控制。

步骤2：使用CSS进行样式美化

在你的CSS文件（通常是 /templets/default/style/dedecms.css 或 /templets/default/style.css）中添加以下样式：

/* 分页容器整体样式 */
.dede_pages {
    text-align: center;
    margin: 20px 0;
    font-size: 14px;
}
.dede_pages ul {
    display: inline-block; /* 让ul在一行内显示 */
    list-style: none;
    padding: 0;
    margin: 0;
}
.dede_pages li {
    float: left; /* 让li在一行内显示 */
    margin: 0 5px;
}
.dede_pages li a {
    display: block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}
.dede_pages li a:hover {
    background-color: #f8f8f8;
    border-color: #ccc;
}
/* 当前页码样式 */
.dede_pages .thisclass {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
/* 上一页/下一页特殊样式 */
.dede_pages .pre a,
.dede_pages .next a {
    padding: 6px 15px; /* 可以让按钮更长一点 */
}
/* 禁用状态的样式（当在第一页时，上一页不可点；在最后一页时，下一页不可点） */
.dede_pages .disabled a {
    color: #ccc;
    cursor: not-allowed;
    border-color: #eee;
    background-color: #fff;
}
.dede_pages .disabled a:hover {
    background-color: #fff;
    border-color: #eee;
}

常见问题与解决方案

如何隐藏“首页”和“末页”？

在 {dede:pagelist} 标签中，不要在 listitem 属性里加入 index 和 last 即可。

只显示上一页、页码和下一页：

{dede:pagelist listitem="pre,pageno,next" listsize="5" /}

如何自定义“上一页/下一页”的文字？

直接修改模板中的文字即可,比如把“上一页”改成“«”，“下一页”改成“»”。

<li class="pre"><a href="[field:link/]">&laquo;</a></li>
<li class="next"><a href="[field:link/]">&raquo;</a></li>

如何处理“上一页/下一页”在边界时（第一页/最后一页）的禁用状态？

织梦默认会为当前不可点击的页码（如第一页的“上一页”）自动添加一个 disabled 类，我们上面的CSS代码已经处理了这种情况（.disabled a），它会将链接变为灰色并禁用鼠标指针。

“上一页/下一页”不显示，或者样式错乱？

• 检查标签是否写错：确保 {dede:pagelist} 标签拼写正确，并且没有被其他代码注释掉。
• 检查CSS冲突：检查你的全局CSS是否有影响 li 或 a 标签样式的规则，导致分页布局错乱，使用浏览器开发者工具（按F12）检查元素，可以快速定位是哪个CSS规则在起作用。
• 检查缓存：修改模板或CSS后，请清空织梦后台的“生成” -> “HTML更新”中的缓存，或者直接全站更新一次。

最佳实践（推荐代码）

结合以上所有内容,这里是一个推荐使用的、灵活且易于维护的最终版本。

模板代码 (list_article.htm):

<!-- 分页导航 -->
<div class="pagination-container">
    <div class="pagination">
        {dede:pagelist listitem="pre,next" listsize="0"}
            <a class="page-link page-pre" href="[field:link/]" aria-label="Previous">
                <span aria-hidden="true">&laquo; 上一页</span>
            </a>
        {/dede:pagelist}
        {dede:pagelist listitem="index,pageno,last" listsize="5" liststyle="page-numbers"}
        {dede:pagelist listitem="pre,next" listsize="0"}
            <a class="page-link page-next" href="[field:link/]" aria-label="Next">
                <span aria-hidden="true">下一页 &raquo;</span>
            </a>
        {/dede:pagelist}
    </div>
</div>

CSS 代码 (添加到你的样式文件中):

/* 分页容器 */
.pagination-container {
    text-align: center;
    margin: 30px 0;
}
.pagination {
    display: inline-flex; /* 使用flex布局更灵活 */
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.pagination > li {
    margin: 0;
}
.pagination > li > a {
    position: relative;
    float: left;
    padding: 10px 15px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}
.pagination > li > a:hover {
    background-color: #f8f8f8;
    z-index: 2;
    color: #0056b3;
}
/* 当前页 */
.pagination > .thisclass > a {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #007bff;
    border-color: #007bff;
}
/* 禁用状态 */
.pagination > .disabled > a {
    color: #999;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.pagination > .disabled > a:hover {
    background-color: #fff;
}
/* 上一页/下一页特殊样式 */
.pagination .page-pre span,
.pagination .page-next span {
    padding: 0 5px;
}
/* 页码样式（如果liststyle="page-numbers"） */
.pagination .page-numbers {
    margin: 0 5px;
}

这个版本使用了更现代的 flex 布局，并为“上一页/下一页”添加了图标，样式也更接近当前流行的设计趋势，你可以根据自己网站的主题色轻松修改 #007bff 等颜色值。