织梦列表页分页样式如何自定义？-织梦建站-盈思创科技

PHP代码：位于列表模板文件中，用于调用和生成分页的HTML结构。
CSS样式：用于美化分页的显示效果，如颜色、边框、间距等。

下面我将分步讲解如何修改分页样式,从基础到高级。

（图片来源网络，侵删）

第一步：理解织梦分页的PHP调用代码

在你需要显示分页的列表页模板文件中（通常是 list_article.htm），找到类似下面这样的代码：

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

{dede:pagelist ...}：这是织梦的分页标签。
listitem：定义要显示的分页元素，常用的有：
- index：首页
- pre：上一页
- pageno：页码
- next：下一页
- end：尾页
- info：显示总页数等信息，如“共X页”
listsize：显示的页码按钮数量，5 表示当前页码左右各显示2个页码按钮。

注意：织梦默认生成的分页HTML结构可能比较复杂，并且使用了  和 <a> 标签混合，为了更好地控制样式，我们通常建议使用一个更清晰、更现代的HTML结构。

第二步：修改或自定义分页的HTML结构

织梦默认生成的分页HTML可能如下：

<span class="pageinfo">共 <strong>1</strong> 页</span>
<a href="list_1_1.html">首页</a>
<a href="list_1_1.html">上一页</a>
<span class="thisclass">1</span>
<a href="list_1_2.html">2</a>
<a href="list_1_3.html">3</a>
...
<a href="list_1_2.html">下一页</a>
<a href="list_1_12.html">末页</a>

这种结构用  标签包裹了当前页，而其他页码是 <a> 标签，我们可以通过修改织梦的核心文件来让所有页码都使用 <a> 标签，这样CSS写起来更统一。（注意：修改核心文件有风险，请提前备份！）

（图片来源网络，侵删）

修改方法：

打开织梦核心文件：/include/arc.listview.class.php
找到 GetPageListDM 函数（大约在 150 行左右）。

找到生成当前页的代码,通常是这样的：

$listdd .= "<span class=\"thisclass\">".$j."</span>\n";

将其修改为：
```
$listdd .= "<a class=\"thisclass\" href=\"".$purl."/".$j.".".$this->GetFileName()."\">".$j."</a>\n";
```
注意：修改时请仔细核对代码，确保变量名 $purl 和 $this->GetFileName() 与你文件中的其他部分一致，有时可能需要微调URL的生成方式。

修改后,当前页也会变成 <a> 标签，但我们可以通过CSS的 pointer-events: none; 来禁用它的点击事件。

第三步：编写CSS样式来美化分页

这是最关键的一步,我们将使用现代、简洁的样式来美化分页，下面提供一个完整且常用的CSS示例，你可以根据自己网站的风格进行调整。

（图片来源网络，侵删）

将以下CSS代码放入你的列表页模板文件 <head> 标签内的 <style> 标签中，或者放入你的全局CSS文件中。

/* 分页容器样式 */
.dede_pages {
    text-align: center; /* 居中显示 */
    margin: 30px 0;    /* 上下间距 */
    font-size: 14px;
    font-family: Arial, "Microsoft YaHei", sans-serif;
}
/* 分页列表容器 */
.pagelist {
    display: inline-flex; /* 使用 flexbox 布局，方便对齐和间距控制 */
    list-style: none;     /* 移除列表默认的圆点 */
    padding: 0;
    margin: 0;
}
/* 分页列表项样式 */
.pagelist li {
    margin: 0 5px; /* 列表项之间的间距 */
}
/* 所有链接的通用样式 */
.pagelist li a {
    display: block; /* 让 a 标签可以设置宽高和内边距 */
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 3px; /* 圆角 */
    color: #333;
    text-decoration: none; /* 去掉下划线 */
    transition: all 0.2s ease-in-out; /* 添加过渡效果，让变化更平滑 */
}
/* 鼠标悬停时的样式 */
.pagelist li a:hover {
    background-color: #f5f5f5;
    border-color: #999;
    color: #007bff; /* 可以换成你喜欢的主题色 */
}
/* 当前页的样式 */
.pagelist li a.thisclass {
    background-color: #007bff; /* 主题色背景 */
    border-color: #007bff;
    color: #fff; /* 白色文字 */
    cursor: default; /* 显示为默认光标，表示不可点击 */
}
/* 禁用当前页的点击事件（如果第二步修改了核心文件，需要这个） */
.pagelist li a.thisclass {
    pointer-events: none; /* 防止点击 */
}
/* 首页、上一页、下一页、末页的文本样式 */
.pagelist li span {
    display: block;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #999;
    background-color: #f5f5f5;
    cursor: default; /* 显示为默认光标，表示不可点击 */
}

CSS代码解释：

.pagelist: 使用 inline-flex 可以让所有页码按钮在同一行内对齐，并且可以轻松控制间距。
.pagelist li a: 为所有可点击的页码按钮设置了统一的边框、内边距、圆角和颜色。
.pagelist li a:hover: 鼠标放上去时，按钮会有一个背景色和边框色的变化，提升用户体验。
.pagelist li a.thisclass: 这是当前页的样式，我们给它一个醒目的背景色和白色文字，并设置 cursor: default 让它看起来不可点击，如果你修改了核心文件，记得加上 pointer-events: none。
.pagelist li span: 如果你没有修改核心文件，织梦会用  来显示当前页和“共X页”等信息，这里的样式是为了让  和 <a> 看起来风格一致，但颜色更灰，表示不可点击。

第四步：完整示例（推荐）

将以上三步结合起来,你可以在你的 list_article.htm 模板中这样写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:field.title/}_{dede:global.cfg_webname/}</title>
    <style>
        /* 将上面第三步的CSS代码放在这里 */
        .dede_pages { text-align: center; margin: 30px 0; font-size: 14px; }
        .pagelist { display: inline-flex; list-style: none; padding: 0; margin: 0; }
        .pagelist li { margin: 0 5px; }
        .pagelist li a { display: block; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; color: #333; text-decoration: none; transition: all 0.2s ease-in-out; }
        .pagelist li a:hover { background-color: #f5f5f5; border-color: #999; color: #007bff; }
        .pagelist li a.thisclass { background-color: #007bff; border-color: #007bff; color: #fff; cursor: default; pointer-events: none; }
        .pagelist li span { display: block; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; color: #999; background-color: #f5f5f5; cursor: default; }
    </style>
</head>
<body>
    <!-- 你的网站头部 -->
    <!-- 列表内容 -->
    <ul>
        {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}
    </ul>
    <!-- 分页样式区域 -->
    <div class="dede_pages">
        <ul class="pagelist">
            {dede:pagelist listitem="info,index,end,pre,next,pageno" listsize="5" /}
        </ul>
    </div>
    <!-- 你的网站底部 -->
</body>
</html>

总结与建议

优先使用CSS：在修改核心文件之前，先尝试用CSS的 not() 选择器或其他技巧来处理默认的  标签，虽然复杂，但更安全。
备份文件：如果决定要修改 /include/arc.listview.class.php 文件，务必提前备份！
响应式设计：如果你的网站是响应式的，可以考虑在小屏幕上隐藏“首页”、“末页”等按钮，只保留“上一页”、“下一页”和页码，以节省空间。
简化标签：listitem="info,index,end,pre,next,pageno" 中的 info、index、end 有时会让分页显得臃肿，你可以根据需要去掉一些，例如只保留 listitem="pre,next,pageno"。

通过以上步骤,你就可以轻松地自定义织梦列表页的分页样式，使其与你的网站整体风格保持一致，并提升用户体验。

织梦列表页分页样式如何自定义？

第一步：理解织梦分页的PHP调用代码

第二步：修改或自定义分页的HTML结构

第三步：编写CSS样式来美化分页

第四步：完整示例（推荐）

总结与建议

相关文章

目录[+]