dede arcpagelist 样式

arcpagelist 标签主要用于*列表页（list_.php）**，用于生成分页导航栏，"首页 1 2 3 4 5 下一页 末页" 这样的效果，它的样式定制主要分为两步：

1. 修改模板标签：在列表页模板文件中，给 arcpagelist 标签添加自定义的 class 或 id 属性，以便在 CSS 中进行选择。
2. 编写 CSS 样式：在网站的 CSS 文件中，为这个 class 或 id 编写样式，控制分页的显示效果。

第一步：修改列表页模板文件

默认情况下,arcpagelist 标签可能看起来很简单，我们需要给它一个“钩子”，也就是一个 class 或 id，这样 CSS 才能找到它。

找到你当前使用的列表页模板文件,通常位于 /templets/default/list_*.php 路径下（ 代表栏目ID）。

找到类似下面这行代码：

{dede:arcpagelist/}

我们给它添加一个 class 属性，推荐使用 class，因为它可以复用。

添加一个通用的 Class (推荐)

这是最常用和最灵活的方法,我们给分页列表添加一个 class="dede-pages"。

<div class="dede-pages">
    {dede:arcpagelist/}
</div>

这样做的好处是,你可以给分页容器添加一些外部的边距、对齐方式等，同时内部的分页链接也可以单独控制。

直接给标签添加 Class

你也可以直接给 arcpagelist 标签本身添加 class。

{dede:arcpagelist class='mypagination'/}

两种方法都可以,但第一种（用 div 包裹）更利于布局和样式控制，下面我们以第一种方法为例进行讲解。

第二步：编写 CSS 样式

你的 HTML 结构变成了这样：

<div class="dede-pages">
    <span class="pageinfo">共 <strong>3</strong> 页</span>
    <a href="list_1.html">首页</a>
    <a href="list_1.html">上一页</a>
    <a href="list_1.html" class="thisclass">1</a>
    <a href="list_2.html">2</a>
    <a href="list_3.html">3</a>
    <a href="list_2.html">下一页</a>
    <a href="list_3.html">末页</a>
</div>

我们就可以在 CSS 文件（通常是 /templets/default/style/dedecms.css 或你自定义的 CSS 文件）中编写样式了。

基础样式：清除默认样式并设置容器

清除 <a> 标签的下划线，并设置分页容器的字体、大小等。

/* 清除链接下划线 */
.dede-pages a, .dede-pages span {
    text-decoration: none;
}
/* 设置分页容器的整体样式 */
.dede-pages {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #333;
    padding: 10px 0;
    text-align: center; /* 让分页居中显示 */
}

设置分页链接的样式

给所有分页链接（<a> 标签）设置统一的样式，如背景色、内边距、边框等。

/* 分页链接的通用样式 */
.dede-pages a {
    display: inline-block; /* 让 a 标签可以设置宽高和内边距 */
    margin: 0 3px;         /* 链接之间的外边距 */
    padding: 5px 10px;     /* 内边距，让链接看起来有“块”的感觉 */
    border: 1px solid #ddd; /* 边框 */
    color: #666;           /* 文字颜色 */
    border-radius: 3px;    /* 圆角边框 */
    transition: all 0.3s;  /* 平滑过渡效果 */
}
/* 鼠标悬停时的效果 */
.dede-pages a:hover {
    background-color: #f8f8f8;
    border-color: #999;
    color: #333;
}

设置当前页的样式

当前页的链接 <a> 会带有 class="thisclass"，我们可以通过这个选择器来突出显示当前页。

/* 当前页的样式 */
.dede-pages a.thisclass {
    background-color: #007bff; /* 背景色 */
    color: #ffffff;           /* 文字颜色 */
    border-color: #007bff;    /* 边框颜色 */
    cursor: default;          /* 鼠标样式为默认，表示不可点击 */
}
/* 也可以给当前页的链接去掉悬停效果 */
.dede-pages a.thisclass:hover {
    background-color: #007bff;
    border-color: #007bff;
}

设置“首页”、“末页”等文本的样式

“首页”、“上一页”、“下一页”、“末页”这些文本我们希望用特殊的符号（如 ）或者不同的样式来表示。

/* “首页”、“末页”等文本的样式 */
.dede-pages .pageinfo {
    margin-right: 10px;
    color: #999;
}
/* 如果想用特殊符号，可以直接在模板里修改，或者在CSS里用伪元素，但最简单的是直接改模板 */
/* 在模板里把“首页”改成 « */

完整的 CSS 样式示例

下面是一个比较完整和美观的分页样式示例,你可以直接复制到你的 CSS 文件中使用。

/* ==================== 分页页码样式 ==================== */
/* 分页容器 */
.dede-pages {
    display: flex;            /* 使用 Flexbox 布局，非常灵活 */
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 30px 0;
}
/* 分页链接（首页、上一页、页码、下一页、末页） */
.dede-pages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-width: 36px;
    margin: 0 4px;
    padding: 0 8px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
/* 鼠标悬停在页码链接上 */
.dede-pages a:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #0056b3;
}
/* 当前页码样式 */
.dede-pages a.thisclass {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
    cursor: default;
}
/* 当前页码的悬停效果（可选，通常不需要） */
.dede-pages a.thisclass:hover {
    background-color: #007bff;
    border-color: #007bff;
}
/* 页面信息（如“共X页”） */
.dede-pages .pageinfo {
    margin: 0 10px;
    color: #6c757d;
    font-size: 14px;
}
/* 首页、上一页、下一页、末页 的特殊样式（可选） */
.dede-pages a.first,
.dede-pages a.prev,
.dede-pages a.next,
.dede-pages a.last {
    padding: 0 12px;
    font-weight: bold;
    color: #0056b3;
}

高级技巧：使用 Bootstrap 或其他前端框架

如果你的网站使用了 Bootstrap、Element UI、Ant Design 等前端框架，你可以直接利用它们提供的分页组件样式，这样更美观且更规范。

以 Bootstrap 为例：

1. 确保引入了 Bootstrap 的 CSS 和 JS 文件。
2. 修改模板，将 arcpagelist 的输出包裹在 Bootstrap 的分页 ul 结构中。

<!-- 在列表页模板中 -->
<nav aria-label="Page navigation">
  <ul class="pagination">
    {dede:arcpagelist listitem="info,index,end,pre,next,pageno" listsize="5"}
  </ul>
</nav>

注意：arcpagelist 默认输出的不是 ul > li 结构，为了配合 Bootstrap，你可能需要修改 include/arc.archives.class.php 文件中的 GetPageListDM 函数，让其输出符合 Bootstrap 规范的 HTML，这是一个比较深入的定制，需要一定的 PHP 和 DedeCMS 底层知识。

通过以上步骤,你就可以完全自定义 DedeCMS arcpagelist 的外观，使其与你的网站设计风格完美融合。