页分页样式如何自定义?

99ANYc3cd6
预计阅读时长 30 分钟
位置: 首页 织梦建站 正文

页的分页是由一个叫 arc.archives.class.php 的类文件来控制的,要修改样式,主要有两种方法:

织梦内容页面 分页样式
(图片来源网络,侵删)
  1. 直接修改核心文件(不推荐,但最直接)
  2. 覆盖类文件中的方法(推荐,更安全、更灵活)

我会重点讲解方法二,因为它在升级织梦后不会丢失你的修改。


直接修改核心文件(arc.archives.class.php

这种方法简单粗暴,但缺点是当你升级织梦版本时,这个文件会被覆盖,导致你的修改丢失。

操作步骤:

  1. 找到文件/include/arc.archives.class.php

    织梦内容页面 分页样式
    (图片来源网络,侵删)
  2. 找到方法: 在这个文件中,找到 GetPageBreakDM 方法(大约在第700行左右,不同版本行号可能不同)。

  3. 修改代码: 你会看到类似下面这样的代码(这是织梦默认的分页HTML代码):

    // 这是 GetPageBreakDM 方法中的核心代码片段
    $PageList = "";
    if($this->PageNo != 1)
    {
        $PageList .= "<a href='".$purl."/$prepagenum'>上一页</a> ";
    }
    else
    {
        $PageList .= "<span class=\"pagepre\">上一页</span> ";
    }
    $totalpage = ceil($this->TotalResult / $this->PageSize);
    for($i=1;$i<=$totalpage;$i++)
    {
        if($i==$this->PageNo)
        {
            $PageList .= "<span class=\"pageitem\">".$i."</span> ";
        }
        else
        {
            $PageList .= "<a href='".$purl."/".$i."'>".$i."</a> ";
        }
    }
    if($this->PageNo!=$totalpage)
    {
        $PageList .= "<a href='".$purl."/".$nextpagenum."'>下一页</a> ";
    }
    else
    {
        $PageList .= "<span class=\"pagenxt\">下一页</span> ";
    }
    $PageList .= "<span class=\"pageinfo\">共 <strong>".$totalpage."</strong> 页</span>";
  4. 自定义HTML结构: 你可以按照自己的需求,直接修改 $PageList 的拼接逻辑,换成你想要的HTML结构,可以加上 ulli 标签,方便CSS控制。

为什么不推荐? 因为每次织梦官方发布新版本并升级时,你都需要重新修改这个文件,非常麻烦。

织梦内容页面 分页样式
(图片来源网络,侵删)

覆盖类文件中的方法(强烈推荐)

这种方法是创建一个新的类文件来继承并覆盖织梦原有的分页方法,实现“插件式”修改,非常安全。

操作步骤:

第1步:创建新的分页类文件

在你的织梦网站根目录下,创建一个新文件,/include/extend/arc.archives.class.php

注意:这个文件名和路径可以自定义,但为了管理方便,建议放在 extend 文件夹下。

第2步:在新文件中编写自定义分页类

打开你刚刚创建的 /include/extend/arc.archives.class.php 文件,将下面的代码完整复制进去。

<?php
if(!defined('DEDEINC')) exit('Request Error!');
// 引入核心的档案类文件
require_once(DEDEINC.'/arc.archives.class.php');
// 创建一个新的类,继承自默认的档案类
class MyArchives extends Archives
{
    /**
     * 重写 GetPageBreakDM 方法
     * 这个方法负责生成内容页的分页HTML
     */
    function GetPageBreakDM($style = 0)
    {
        $prepage = $nextpage = '';
        $prepagenum = $this->PageNo - 1;
        $nextpagenum = $this->PageNo + 1;
        if($prepagenum < 1) $prepagenum = 1;
        if($nextpagenum > $this->TotalPage) $nextpagenum = $this->TotalPage;
        // 上一页
        if($this->PageNo != 1)
        {
            $prepage.="<li><a href='".$this->GetCurUrl()."-$prepagenum'>上一页</a></li>\r\n";
        }
        else
        {
            $prepage.="<li class='disabled'><a href='javascript:void(0);'>上一页</a></li>\r\n";
        }
        // 下一页
        if($this->PageNo != $this->TotalPage)
        {
            $nextpage.="<li><a href='".$this->GetCurUrl()."-$nextpagenum'>下一页</a></li>\r\n";
        }
        else
        {
            $nextpage.="<li class='disabled'><a href='javascript:void(0);'>下一页</a></li>\r\n";
        }
        // 页码
        $listdd = "";
        $totalpage = ceil($this->TotalResult / $this->PageSize);
        $totalpage = $totalpage == 0 ? 1 : $totalpage;
        // 获取当前页码URL
        $purl = $this->GetCurUrl();
        // 动态获取分页参数,兼容不同URL模式
        $geturl = 'page';
        if($this->PageNo > 1) {
            $purl .= '-'.$this->PageNo;
        }
        // 获取数字页码列表
        $total_list = 5; // 显示的页码数量
        $start_i = $this->PageNo - floor($total_list / 2);
        if($start_i <= 1) $start_i = 1;
        if($start_i + $total_list > $totalpage) $start_i = $totalpage - $total_list + 1;
        if($start_i < 1) $start_i = 1;
        for($i = 1; $i <= $totalpage; $i++)
        {
            if($i >= $start_i && $i <= ($start_i + $total_list - 1))
            {
                if($i == $this->PageNo)
                {
                    $listdd.="<li class='active'><a href='javascript:void(0);'>".$i."</a></li>\r\n";
                }
                else
                {
                    $listdd.="<li><a href='".$purl."-".$i."'>".$i."</a></li>\r\n";
                }
            }
        }
        $plist = '';
        if($this->TotalPage > 1)
        {
            $plist = "<ul class='pagination'>".$prepage.$listdd.$nextpage."</ul>";
        }
        return $plist;
    }
}
?>

代码解析:

  1. require_once(DEDEINC.'/arc.archives.class.php');:引入织梦原有的核心类。
  2. class MyArchives extends Archives:创建一个新类 MyArchives,它继承自 Archives(即核心类)。
  3. function GetPageBreakDM($style = 0):重写了父类中的 GetPageBreakDM 方法。
  4. HTML结构:我们使用了 Bootstrap 3 的分页组件结构 <ul class='pagination'><li>,这是一种非常流行且易于使用的结构。
    • class='disabled':用于禁用状态的“上一页/下一页”按钮。
    • class='active':用于高亮显示当前页码。
  5. 逻辑:逻辑与原版基本一致,只是将拼接的HTML字符串换成了符合Bootstrap风格的 lia

第3步:在内容页模板中调用新的分页类

你需要告诉织梦内容页使用你新创建的 MyArchives 类,而不是默认的 Archives 类。

  1. 找到模板文件: 打开你的内容页模板文件,通常位于 /templets/你的模板目录/ 下,文件名为 article_article.htm 或类似名称。

  2. 找到分页调用代码: 在模板中,找到调用分页的代码,通常是这样的:

    {dede:pagebreak/}

    或者

    <div class="dede_pages">
        <ul class="pagelist">
            {dede:pagebreak/}
        </ul>
    </div>
  3. 替换调用代码: 将 {dede:pagebreak/} 替换为下面的PHP代码:

    <div class="dede_pages">
        <?php
        $arc = new MyArchives($aid);
        echo $arc->GetPageBreakDM();
        ?>
    </div>

    注意:如果你的模板里已经有了一个 dede_pagesdiv,你可以直接把PHP代码放进去,或者直接替换 {dede:pagebreak/}

第4步:添加CSS样式

为了让分页看起来更美观,你需要在你的CSS文件中添加一些样式,你可以直接在你的模板CSS文件(如 style.css)中添加以下Bootstrap风格的分页样式。

.dede_pages {
    text-align: center;
    margin: 20px 0;
}
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 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 > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #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;
}

通过方法二,你实现了:

  1. 安全性:修改与核心文件分离,升级织梦不受影响。
  2. 灵活性:你可以随心所欲地修改 /include/extend/arc.archives.class.php 中的HTML结构和逻辑,实现任何你想要的分页样式(比如去掉 ul,改成 div,或者使用其他UI框架如FontAwesome的图标等)。
  3. 标准化:采用了业界广泛使用的Bootstrap分页结构,样式成熟且易于扩展。

更新你的网站缓存,访问一篇有多页的内容文章,你就能看到新的分页样式了!

-- 展开阅读全文 --
头像
计算机二级C语言和Office如何高效备考?
« 上一篇 02-09
织梦列表页如何直接调用body内容?
下一篇 » 02-09

相关文章

取消
微信二维码
支付宝二维码