dede文章内容页分页

1. 后台操作：如何在编辑文章时插入分页符。
2. 前台模板：如何修改模板文件，让分页符生效并生成分页导航。

后台操作：插入分页符

这是实现分页的第一步,也是最关键的一步，当你的文章内容很长，希望将其分成多个页面显示时，就需要在后台编辑器中插入分页符。

操作步骤：

1. 登录 DedeCMS 后台：使用你的管理员账号登录。

2. 进入文章编辑：在“核心” -> “内容发布” -> “普通文章” 中，找到你需要分页的文章，点击“编辑”。

3. 使用编辑器分页按钮：

   • 在文章编辑器中,将光标定位到你希望结束的地方。
   • 找到编辑器工具栏上的 分页符 按钮，它通常看起来像一个带有数字“1/2”或两条水平线的图标。
   • 点击这个按钮，编辑器会自动在当前位置插入一个特殊代码 {dede:pagebreak/}，这个代码就是分页的标记。
   • 继续输入第二页的内容。
   • 如果需要分更多页,就在第二页结束的地方再次点击 分页符 按钮，插入第二个 {dede:pagebreak/}，以此类推。

4. 更新文章：点击“更新”或“保持”按钮，保存你的修改。

重要提示：

• 分页符 {dede:pagebreak/} 必须在 HTML 源码模式 下直接输入，或者通过编辑器的按钮插入，不要直接在可视化模式下输入这些字符。
• 确保分页符前后的内容都足够,形成一个完整的页面。

前台模板修改：调用和美化分页

后台插入分页符后,前台页面默认是不会自动显示分页导航的，你需要修改文章内容页的模板文件，来调用并展示这些分页。

涉及的模板文件：

页的模板文件通常位于你的模板目录下,路径为： /templets/你的模板名称/article_article.htm

修改步骤：

1. 找到并打开模板文件：使用 FTP 或主机管理面板，找到并下载 article_article.htm 文件。

2. 显示区域：在这个文件中，找到显示文章正文内容的地方，通常会有类似这样的代码：

   <div class="article-content">
       {dede:field.body/}
   </div>

3. 添加分页标签：DedeCMS 提供了一个专门的标签 {dede:pagebreak/} 来用于生成分页导航，你需要将这个标签放在 {dede:field.body/} 的后面。

   修改后的代码示例：

   <div class="article-content">
       {dede:field.body/}
       {dede:pagebreak/}
   </div>

   • {dede:field.body/}：会自动解析文章内容，并根据你插入的 {dede:pagebreak/} 标记，将内容分割成多个部分。
   • {dede:pagebreak/}：会根据分割后的部分，生成一个页码导航（首页 1 2 3 下一页 末页）。

4. 保存并上传模板文件：修改完成后，保存文件并上传到服务器原来的位置。

5. 更新文章缓存：

   • 在后台,进入“系统” -> “系统设置” -> “系统基本参数”。
   • 在左侧菜单找到“性能选项”，点击进入。
   • 点击右上角的“更新系统缓存”按钮。
   • 回到文章列表页,选中你刚刚修改的文章，点击“更新”按钮，重新生成 HTML 页面。

访问你的文章内容页,就应该能看到分页效果了。

高级与美化：自定义分页样式

默认的分页样式可能比较简陋,通常是一行文字链接，你可以通过 CSS 和修改标签属性来美化它。

自定义分页标签属性

{dede:pagebreak/} 标签支持一些属性，让你可以控制分页的显示方式。

• listsize：显示的页码链接数量。listsize='5' 表示当前页码前后各显示 5 个页码。
• listitem：控制显示哪些导航元素，可选值有：
  • index：首页
  • pre：上一页
  • pageno：页码
  • next：下一页
  • end：末页

示例：一个更美观的分页标签

{dede:pagebreak listitem='index,prenext,list,option' listsize='3'/}

这个标签会显示：首页、上一页、页码列表（当前页前后各3个）、下一页、末页，以及一个跳转下拉框。

通过 CSS 美化分页

为了更好地控制样式,我们可以将分页导航包裹在一个 div 中，并给它一个特定的 class，然后编写 CSS。

第一步：修改模板 给 {dede:pagebreak/} 加上 div 包裹。

<div class="article-content">
    {dede:field.body/}
</div>
<!-- 分页导航 -->
<div class="dede_pages">
    <ul class="pagelist">
        {dede:pagebreak listitem='index,prenext,list,option'/}
    </ul>
</div>

这里我给分页容器加了 dede_pages 类，内部的列表加了 pagelist 类，这是 DedeCMS 默认的类名，你也可以自定义。

第二步：编写 CSS

在你的模板的 CSS 文件（style.css）中，添加以下样式来美化分页。

/* 分页容器 */
.dede_pages {
    text-align: center;
    margin: 30px 0;
    font-size: 14px;
    color: #999;
}
/* 分页列表 */
.pagelist {
    display: inline-block; /* 让 ul 水平排列 */
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagelist li {
    float: left; /* 让列表项水平排列 */
    margin: 0 5px;
}
.pagelist a {
    display: block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}
.pagelist a:hover {
    background-color: #f8f8f8;
    border-color: #999;
}
/* 当前页样式 */
.pagelist .thisclass {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    cursor: default;
}
/* 上一页/下一页 首页/末页 样式 */
.pagelist .epages {
    border: none;
}
/* 跳转下拉框样式 */
.pagelist select {
    margin-left: 10px;
    padding: 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

通过以上 CSS，你可以轻松地将默认的文字链接变成一个现代化的、用户友好的分页组件。

常见问题与解决方法

1. 问题：后台插入了分页符，前台 {dede:pagebreak/} 也加了，但文章内容还是显示在一页，没有分页。 原因：

   • 最常见：没有更新文章缓存，请务必执行“更新系统缓存”和“更新选中文档HTML”。
   • 模板问题：检查 article_article.htm 文件中 {dede:pagebreak/} 的位置是否正确，是否在 {dede:field.body/} 之后。
   • 权限问题：确保模板文件有写入权限，或者服务器正确解析了模板标签。

2. 问题：分页导航显示出来了，但点击“下一页”后，内容没变，还是第一页的内容。 原因：这通常是 DedeCMS 的 URL 重写（伪静态）规则问题，请检查你的文章分页规则是否在后台的“栏目管理” -> “更改” -> “高级选项” -> “列表命名规则” 中设置正确，或者尝试暂时关闭伪静态功能，看是否正常。

3. 问题：我想自定义分页的文字，比如把“下一页”改成“更多内容”。 原因：DedeCMS 默认的分页标签不支持直接修改文字，你需要修改 DedeCMS 的核心文件来实现，不推荐，因为升级后会失效，一个更好的方法是使用 jQuery 在前端替换掉这些文字，或者直接使用上面的 CSS 方法，通过 :after 伪元素来添加内容（但替换原有文字仍需 JS）。

掌握了以上流程,你就可以灵活地为 DedeCMS 网站的长篇文章实现美观且功能完善的分页效果了。