当然可以！织梦CMS的{dede:pagelist}标签非常灵活，完全支持自定义样式，它主要通过两个核心属性来实现：listitem和listsize，以及一个强大的模板功能templet。
（图片来源网络，侵删）
下面我将详细解释如何自定义pagelist的样式，从简单到高级,并提供完整的代码示例。
使用内置属性（最简单）
这是最直接的方法，通过listitem属性来控制要显示哪些分页元素,然后用CSS来美化这些元素。
listitem 属性：控制显示哪些按钮
listitem属性用于指定分页条中要显示的项目，各项目用分隔,可用的项目有：
index: 首页pre: 上一页pageno: 页码next: 下一页end: 末页optionplus: 下拉跳转框info: 页面信息（如“共X页”）
示例代码： 假设你只想显示“首页”、“上一页”、“页码”、“下一页”、“末页”和“跳转框”。
（图片来源网络，侵删）
{dede:pagelist listitem='index|pre|pageno|next|end|optionplus' listsize='5'/}
listsize 属性：控制显示的页码数量
listsize属性用于设置当前页码左右两侧显示的页码数量。
示例代码：
{dede:pagelist listsize='3'/} <!-- 当前页码左右各显示3个页码 -->
内置HTML结构及CSS类名
{dede:pagelist}会生成一个包含特定class的HTML列表，了解这些class是自定义样式的关键。
它生成的HTML结构大致如下：
（图片来源网络，侵删）
<ul class="pagelist">
<li><a href="首页链接">首页</a></li>
<li><a href="上一页链接">上一页</a></li>
<li><span class="thispage">1</span></li> <!-- 当前页，无链接 -->
<li><a href="页码链接">2</a></li>
<li><a href="页码链接">3</a></li>
<li><a href="下一页链接">下一页</a></li>
<li><a href="末页链接">末页</a></li>
<li class="pageliststy">
<select>
<option value="1">第1页</option>
<option value="2">第2页</option>
...
</select>
</li>
</ul>
常用CSS类名：
.pagelist: 整个分页列表的容器。.thispage: 当前页的<span>标签,用于高亮显示当前页。.pageliststy: 下拉跳转框的容器。
基础CSS示例： 在你的CSS文件中添加以下代码,可以快速美化一个默认的分页样式。
/* 分页列表基础样式 */
.pagelist {
display: flex; /* 使用Flex布局，方便对齐 */
list-style: none; /* 移除默认列表符号 */
padding: 0;
margin: 20px 0;
justify-content: center; /* 居中显示 */
}
.pagelist li {
margin: 0 5px; /* 页码之间的间距 */
}
.pagelist a,
.pagelist span {
display: block;
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 3px; /* 圆角 */
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.pagelist a:hover {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
/* 当前页样式 */
.pagelist .thispage {
background-color: #007bff;
color: #fff;
border-color: #007bff;
font-weight: bold;
cursor: default; /* 当前页不可点击 */
}
/* 下拉跳转框样式 */
.pagelist .pageliststy select {
padding: 6px 12px;
border: 1px solid #ddd;
border-radius: 3px;
}
使用templet属性（最强大、最灵活）
如果你对默认生成的HTML结构不满意，或者需要完全不同的设计（比如用<div>代替<ul>，或者加入图标等），templet属性是你的最佳选择。
templet属性允许你指定一个自定义的模板文件,来完全控制分页条的HTML结构。
操作步骤：
-
创建模板文件 在你的织梦模板目录（通常是
/templets/你的模板名/）下，创建一个新的HTML文件，例如命名为pagelist.htm。 -
编写自定义模板 在
pagelist.htm文件中,你可以使用织梦提供的分页变量来构建你想要的HTML结构。可用的分页变量：
@index: 首页链接@pre: 上一页链接@pageno: 当前页码@next: 下一页链接@end: 末页链接@totalpage: 总页数@totalresult: 总记录数@plus: 页码省略号（）
-
在列表页调用模板 在你的列表页模板文件（如
list_article.htm）中，使用templet属性来调用你刚刚创建的模板。{dede:pagelist listitem='index|pre|pageno|next|end|info' listsize='3' templet='pagelist.htm'/}
templet实战示例
假设我们想要一个更现代化的分页样式，使用<div>和图标。
创建模板文件 /templets/你的模板名/pagelist.htm
<!-- 自定义分页模板 -->
<div class="my-custom-pagination">
<!-- 首页 -->
<a href="{@index}" class="page-link">
<i class="fa fa-home"></i> 首页
</a>
<!-- 上一页 -->
<a href="{@pre}" class="page-link {if @pageno==1}disabled{/if}">
<i class="fa fa-chevron-left"></i> 上一页
</a>
<!-- 页码部分 -->
{if @plus}
<!-- 第一页 -->
<a href="{@index}" class="page-link">1</a>
<!-- 省略号 -->
<span class="page-ellipsis">...</span>
{/if}
<!-- 动态页码 -->
<a href="{@link}" class="page-link {if @pageno==@nowpage}active{/if}">{@page}</a>
{if @plus}
<!-- 省略号 -->
<span class="page-ellipsis">...</span>
<!-- 最后一页 -->
<a href="{@end}" class="page-link">{@totalpage}</a>
{/if}
<!-- 下一页 -->
<a href="{@next}" class="page-link {if @pageno==@totalpage}disabled{/if}">
下一页 <i class="fa fa-chevron-right"></i>
</a>
<!-- 末页 -->
<a href="{@end}" class="page-link">
末页 <i class="fa fa-fast-forward"></i>
</a>
<!-- 页面信息 -->
<span class="page-info">共 {@totalpage} 页，到第
<input type="text" name="pageno" value="{@nowpage}" class="page-input" />
页
<button type="submit" class="page-btn">确定</button>
</span>
</div>
编写对应的CSS
在你的CSS文件中,为自定义的模板添加样式。
/* 自定义分页样式 */
.my-custom-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px; /* 元素间距 */
margin: 30px 0;
font-size: 14px;
}
.my-custom-pagination .page-link {
display: inline-flex;
align-items: center;
padding: 8px 12px;
color: #555;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s ease;
}
.my-custom-pagination .page-link:hover:not(.disabled):not(.active) {
background-color: #e9ecef;
border-color: #adb
