dede页码标签如何修改样式或功能？

1. 列表页页码：在文章列表、产品列表等页面，用于分页显示。
2. 内容页页码：在文章内容页，用于显示“上一页”、“下一页”、“首页”、“末页”等导航。

我们将分别介绍如何修改这两类标签。

列表页页码标签修改

列表页的页码通常由一个主标签 {dede:pagelist listsize='0' listitem='index pre pageno next end '/} 和一些 CSS 样式组成。

找到并修改页码标签

文件位置：/include/arc.listview.class.php

这个文件是处理列表页分页逻辑的核心文件,我们修改它主要是为了改变页码的 HTML 结构和输出文本。

常用修改点：

• 修改页码显示文本：比如将“首页”改为“Home”，“末页”改为“Last”。
• 修改页码 HTML 结构：给页码链接添加特定的 class，方便用 CSS 美化。
• 修改省略号显示：比如将“...”改为其他符号。

示例：修改页码文本和 HTML 结构

打开 arc.listview.class.php 文件，找到 GetPageListDM 函数（通常在文件末尾），你会看到类似下面的代码：

// ... 其他代码 ...
$listdd = "";
$firstpage = '<a href="'.$listurl.'">'.$maininfo['indexpage']."</a>\r\n";
$prepage.="<a href='".$listpre."'>".$maininfo['prepage']."</a>\r\n";
$nextpage.="<a href='".$listnext."'>".$maininfo['nextpage']."</a>\r\n";
$endpage="<a href='".$listend."'>".$maininfo['endpage']."</a>\r\n";
// ... 其他代码 ...

这里的 $maininfo 数组里存放的就是分页的文本，如 'indexpage' => '首页'，你可以在 GetPageListDM 函数的开头部分找到 $maininfo 的定义，直接修改它。

更推荐的灵活修改方法（通过修改函数）：

为了不破坏核心文件,建议直接修改 GetPageListDM 函数中生成 HTML 的部分，我们想把所有的页码链接都加上一个 class="page-link"：

找到生成页码的 foreach 循环部分（大约在第 600 行之后，不同版本行号可能不同），修改如下：

修改前 (部分代码):

$listdd .= "<a href='".$purl."/$j'>".$j."</a>\r\n";

修改后 (部分代码):

$listdd .= "<a href='".$purl."/$j' class='page-link'>".$j."</a>\r\n";

同样,你可以修改当前页的代码（通常在 else 分支里）： 修改前:

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

修改后:

$listdd .= "<span class='thispage'>".$j."</span>\r\n";

（注意：这里我们同时把 class 名从 thisclass 改为了 thispage，这是一个很好的实践，可以避免和默认样式冲突）

在模板文件中调用页码

在列表页模板文件（list_article.htm）中，使用 {dede:pagelist} 标签来调用分页。

标签语法：

{dede:pagelist listsize='3' listitem='index pre pageno next end '/}

• listsize='3'：显示当前页码前后的页码数量，当前是第 5 页，会显示 2, 3, 4, [5], 6, 7, 8。
• listitem='...'：指定要显示的分页项。
  • index：首页
  • pre：上一页
  • pageno：页码
  • next：下一页
  • end：末页
  • option：下拉跳转框

你可以根据需要组合 listitem 的值，例如只显示上一页、页码、下一页：

{dede:pagelist listitem='pre pageno next' listsize='2' /}

用 CSS 美化页码

在模板的 CSS 文件中，为页码添加样式。

/* 默认的分页容器样式 */
ul.pagenav {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    justify-content: center;
}
/* 页码链接样式 */
.pagenav li {
    margin: 0 5px;
}
.pagenav a, .pagenav span {
    display: block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}
/* 鼠标悬停效果 */
.pagenav a:hover {
    background-color: #f0f0f0;
}
/* 当前页样式 */
.pagenav .thispage {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
}

注意：默认情况下，{dede:pagelist} 输出的是无序列表 <ul>，每个页码是 <li> 中的 <a> 或 <span>，如果你的版本输出的是 <div> 结构，CSS 选择器需要相应调整。

内容页页码标签修改

页的页码（上一篇/下一篇）标签是 {dede:prenext get='pre'/} 和 {dede:prenext get='next'/}，或者合在一起使用 {dede:prenext/}。

找到并修改页码标签

文件位置：/include/arc.archives.class.php

这个文件是处理文章内容的核心文件,找到 GetPreNext 函数。

修改方法：

你可以直接修改 GetPreNext 函数中返回的 HTML 结构，默认的输出可能比较简单，我们可以给它加上更丰富的结构和样式。

示例：修改上一篇/下一篇的 HTML 结构

找到 GetPreNext 函数，找到处理 pre 和 next 的部分。

修改前 (逻辑部分):

if($get=='pre')
{
    $restring = "上一篇：<a href='$mlink'>$pretitle</a> ";
}
else
{
    $restring = "下一篇：<a href='$mlink'>$nexttitle</a> ";
}

修改后 (逻辑部分):

if($get=='pre')
{
    // 如果没有上一篇，则显示提示
    if(empty($mlink)) {
        $restring = '<div class="pre-post"><span>已是最新文章</span></div>';
    } else {
        $restring = '<div class="pre-post"><span>上一篇：</span><a href="'.$mlink.'">'.$pretitle.'</a></div>';
    }
}
else
{
    // 如果没有下一篇，则显示提示
    if(empty($mlink)) {
        $restring = '<div class="next-post"><span>已是最后一篇</span></div>';
    } else {
        $restring = '<div class="next-post"><span>下一篇：</span><a href="'.$mlink.'">'.$nexttitle.'</a></div>';
    }
}

在模板文件中调用页码

页模板文件（article_article.htm）中，使用 {dede:prenext}

标签语法：

{dede:prenext get='pre' /}
{dede:prenext get='next' /}

{dede:prenext/}

/* 上一篇/下一篇容器 */
#prenext {
    margin: 30px 0;
    padding: 15px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}
/* 上一篇和下一篇并排显示 */
#prenext .pre-post, #prenext .next-post {
    display: inline-block;
    margin: 0 20px;
}
样式 */
#prenext span {
    color: #666;
    margin-right: 5px;
}
/* 链接样式 */
#prenext a {
    color: #0056b3;
    text-decoration: none;
}
#prenext a:hover {
    text-decoration: underline;
}
/* 当没有上一篇或下一篇时的样式 */
#prenext span.ishave {
    color: #999;
    font-style: italic;
}