织梦文章分页代码怎么用？-织梦建站-盈思创科技

核心概念

分页,默认情况下，分页链接（如 第1页 2 3 下一页）是显示在文章内容正文之后的，但很多时候，我们希望它像很多新闻网站一样，能悬浮在文章内容右侧，方便用户阅读时随时点击。

（图片来源网络，侵删）

要实现这个效果,我们需要：

修改文章内容模板 (article_article.htm)：将分页代码从正文后面移动到我们想要的位置。
修改PHP文件 (/include/arc.archives.class.php)：织梦默认的分页函数会生成一个包含分页链接和文章页数的div，我们需要修改它，让这个div可以方便地被定位。
添加CSS样式：让这个分页div能够悬浮并美化。

第一步：修改文章内容模板 (`article_article.htm`)

这是最直观的一步,你需要登录织梦后台，找到 模板 -> 默认模板管理 -> 页模板，然后修改 article_article.htm 文件。

找到默认的分页代码：在模板文件中，搜索类似下面这样的代码：
```
{dede:pagebreak/}
```
这就是织梦的分页标签,默认情况下，它会被放在文章内容的末尾。
（图片来源网络，侵删）
移动分页代码到目标位置：假设我们想把分页器放在文章内容的右侧，我们可以这样做：
- 方案A：放在文章标题下方 将 {dede:pagebreak/} 标签移动到 {dede:field.title/} 标题的后面，或者其他你希望它出现的位置。
- 方案B：放在文章内容的右侧（推荐） 这需要一个稍微复杂的布局，通常使用 float 或 flex 布局。
示例代码（推荐方案）：
（图片来源网络，侵删）
```
<div class="article-content-wrapper">
    
    <div class="article-main">
        {dede:field.body/}
        
    </div>
    
    <div class="article-page-nav">
        {dede:pagebreak/}
    </div>
</div>

<div class="article-footer">
    {dede:include filename="article_extend.htm"/}
</div>
```
说明：
- 我们用一个新的 div .article-content-wrapper 包裹了正文和分页器，方便整体控制。
- 左侧的 .article-main 用于放置文章正文 {dede:field.body/}。
- 右侧的 .article-page-nav 专门用来放置分页标签 {dede:pagebreak/}。

第二步：修改PHP文件 (`/include/arc.archives.class.php`)

默认情况下,{dede:pagebreak/} 会生成类似这样的HTML结构：

<div class="pageNav">
    <a href="...">上一页</a> <span class="pageinfo">共 <strong>3</strong> 页</span> <a href="...">下一页</a>
</div>

这个 div.pageNav 是我们定位的关键，但为了更好的样式控制，我们给它加一个独一无二的ID或更具体的class。

打开文件：用FTP或服务器文件管理器，打开 /include/arc.archives.class.php。
找到分页生成函数：搜索 GetPagebreak 函数（大约在560行左右，不同版本行号可能不同）。
修改代码：找到生成 <div class="pageNav"> 的那一行，将其修改为 class="article-page-nav" 或直接加上ID。在 GetPagebreak 函数中，找到类似这样的代码：
```
$pagestr .= "<div class=\"pageNav\">\r\n";
```
修改为：
```
// 给分页导航添加一个特定的class，方便CSS定位
$pagestr .= "<div class=\"article-page-nav\">\r\n";
```
修改后,保存文件。
更新缓存：回到织梦后台，点击 系统 -> 一键更新网站 -> 更新HTML，选择你的文档，然后更新，这样修改才会生效。

第三步：添加CSS样式

我们通过CSS来控制分页器的位置和外观。

找到CSS文件：通常在 /templets/你的模板目录/style/ 目录下，文件名为 dedecms.css 或 main.css。

添加CSS代码：在CSS文件的末尾添加以下样式：

/* 文章内容分页器样式 */
.article-content-wrapper {
    display: flex; /* 使用Flex布局 */
    gap: 20px;     /* 正文和分页器之间的间距 */
    margin-bottom: 30px;
}
.article-main {
    flex: 1; /* 让正文占据所有可用空间 */
}
/* 右侧悬浮分页导航样式 */
.article-page-nav {
    /* 控制分页器宽度和位置 */
    width: 120px;
    position: sticky; /* 关键：实现滚动时吸附效果 */
    top: 20px;        /* 距离页面顶部的距离 */
    align-self: flex-start; /* 与顶部对齐 */
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}
/* 织梦默认分页链接的样式，可以覆盖或继承 */
.article-page-nav a {
    color: #333;
    text-decoration: none;
    margin: 0 2px;
}
.article-page-nav a:hover {
    color: #0066cc;
    text-decoration: underline;
}
.article-page-nav .pageinfo strong {
    color: #0066cc;
    font-weight: bold;
}

保存并更新：保存CSS文件，然后同样在后台更新一下网站缓存。

总结与最终效果

完成以上三步后,你的文章页分页效果就会变成：

文章正文内容占据左侧大部分空间。
分页链接（上一页、下一页、页数等）固定在文章内容的右侧。
当用户向下滚动页面时,这个分页器会“粘”在屏幕的右侧，方便随时翻页。

最终模板 (article_article.htm) 结构参考：

{dede:include filename="head.htm"/}
<body>
    <div class="main">
        <!-- 你的网站头部、面包屑等 -->
        <div class="article-content-wrapper">
            <div class="article-main">
                <h1>{dede:field.title/}</h1>
                <div class="article-info">...</div>
                {dede:field.body/}
            </div>
            <div class="article-page-nav">
                {dede:pagebreak/}
            </div>
        </div>
        <!-- 文章底部信息 -->
        <div class="article-footer">
            {dede:include filename="article_extend.htm"/}
        </div>
    </div>
    {dede:include filename="footer.htm"/}
</body>
</html>

通过这种方式,你可以完全控制织梦文章分页的显示位置和样式，打造出更专业、更用户友好的阅读体验。

核心概念

第一步：修改文章内容模板 (article_article.htm)

第二步：修改PHP文件 (/include/arc.archives.class.php)

第三步：添加CSS样式

总结与最终效果

相关文章

目录[+]

第一步：修改文章内容模板 (`article_article.htm`)

第二步：修改PHP文件 (`/include/arc.archives.class.php`)