dede数字排序样式如何自定义？

1. 获取排序参数：通过URL获取用户当前的排序方式（如 orderby=click 表示按点击量排序）。
2. 应用样式：根据当前的排序参数，为对应的排序链接添加高亮、颜色或图标等样式。

第一步：获取排序参数

在DedeCMS中,排序参数通常通过URL传递， /plus/list.php?tid=1&orderby=click&orderway=desc

• orderby: 排序依据
  • senddate: 按发布时间
  • click: 按点击量
  • hot: 按热度
  • lastpost: 按最后评论时间
  • scores: 按评分
  • rand: 随机排序
• orderway: 排序顺序
  • desc: 降序（从高到低）
  • asc: 升序（从低到高）

在DedeCMS的模板文件（通常是 list_artlist.htm 或 article_list.htm）中，我们可以使用 {dede:global name='orderby'/} 和 {dede:global name='orderway'/} 来获取这两个值。

第二步：实现数字排序样式

我们将通过几种常见的方式来展示样式,从简单到复杂。

纯CSS高亮（推荐）

这是最常用、最简洁的方法，通过给当前选中的排序链接添加一个特定的CSS类，然后用CSS来定义这个类的样式。

修改模板文件

找到你的列表模板文件,找到排序的HTML代码，通常是这样的结构：

<div class="sort-box">
    <span>排序：</span>
    <ul>
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=senddate">默认</a></li>
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=click">点击</a></li>
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=scores">评分</a></li>
    </ul>
</div>

我们需要修改它,为每个 <a> 标签增加 class 属性，并使用条件判断来决定是否添加高亮类（active）。

<div class="sort-box">
    <span>排序：</span>
    <ul>
        <!-- 默认排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=senddate" 
               class="{dede:if var='orderby' value='senddate'}active{/dede:if}">默认</a></li>
        <!-- 点击量排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=click" 
               class="{dede:if var='orderby' value='click'}active{/dede:if}">点击</a></li>
        <!-- 评分排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=scores" 
               class="{dede:if var='orderby' value='scores'}active{/dede:if}">评分</a></li>
    </ul>
</div>

代码解释： {dede:if var='orderby' value='click'}active{/dede:if} 是一个条件判断。

• 它会检查当前 orderby 的值是否等于 click。
• 如果相等,则在该 <a> 标签内输出 active 这个字符串，<a class="active">。
• 如果不相等,则不输出任何东西，<a> 标签没有 active 类。

添加CSS样式

在你的CSS文件（如 style.css）中，定义 .active 类的样式。

/* 排序容器基础样式 */
.sort-box ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.sort-box li {
    margin-right: 15px;
}
.sort-box a {
    text-decoration: none;
    color: #666;
    padding: 5px 10px;
    border-radius: 3px;
    transition: all 0.3s ease;
}
/* 高亮样式：当链接处于激活状态时 */
.sort-box a.active {
    background-color: #007bff; /* 背景色 */
    color: #ffffff;           /* 文字颜色 */
    font-weight: bold;        /* 文字加粗 */
}
/* 鼠标悬停效果 */
.sort-box a:hover {
    background-color: #f0f0f0;
}
.sort-box a.active:hover {
    background-color: #0056b3;
}

效果： 当用户点击“点击”排序时，该链接会变成蓝色背景、白色文字，并且加粗，非常直观。

显示排序方向（升序/降序图标）

除了高亮当前项,我们还可以在排序链接旁边显示一个图标（如 ↑↓）来表示当前的排序顺序。

修改模板文件

我们可以在方法一的基础上进行扩展,在 active 的链接里加入图标。

<div class="sort-box">
    <span>排序：</span>
    <ul>
        <!-- 默认排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=senddate" 
               class="{dede:if var='orderby' value='senddate'}active{/dede:if}">
               默认
               {dede:if var='orderby' value='senddate'}
                 <i class="sort-icon">{dede:if var='orderway' value='desc'}↓{else}↑{/dede:if}</i>
               {/dede:if}
            </a></li>
        <!-- 点击量排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=click" 
               class="{dede:if var='orderby' value='click'}active{/dede:if}">
               点击
               {dede:if var='orderby' value='click'}
                 <i class="sort-icon">{dede:if var='orderway' value='desc'}↓{else}↑{/dede:if}</i>
               {/dede:if}
            </a></li>
        <!-- 评分排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=scores" 
               class="{dede:if var='orderby' value='scores'}active{/dede:if}">
               评分
               {dede:if var='orderby' value='scores'}
                 <i class="sort-icon">{dede:if var='orderway' value='desc'}↓{else}↑{/dede:if}</i>
               {/dede:if}
            </a></li>
    </ul>
</div>

代码解释：

• 我们增加了内嵌的条件判断 {dede:if var='orderby' value='click'}。
• 如果该链接是激活状态,则再判断一次 orderway 的值。
• orderway 是 desc（降序），则显示 。
• orderway 是 asc（升序），则显示 。
• 我们用 <i class="sort-icon"> 包裹这个图标，方便用CSS控制样式。

添加CSS样式

/* 图标样式 */
.sort-icon {
    font-size: 12px;
    margin-left: 5px;
    font-style: normal; /* 让斜体不倾斜 */
    font-weight: normal;
}

效果： 当用户点击“点击”排序时，链接会高亮，并且旁边会出现一个 图标，表示当前是降序排列，如果再次点击，会变成升序，图标变为 。

使用图标字体（如Font Awesome）

使用图标字体比纯文字符号更美观、更灵活。

引入图标字体库 在你的网站 <head> 标签内引入Font Awesome（或其他图标库）。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

修改模板文件

将方法二中的箭头文本替换为Font Awesome的图标类。

<div class="sort-box">
    <span>排序：</span>
    <ul>
        <!-- 点击量排序 -->
        <li><a href="{dede:global name='phpurl'/}/list.php?tid={dede:field.id/}&orderby=click" 
               class="{dede:if var='orderby' value='click'}active{/dede:if}">
               点击
               {dede:if var='orderby' value='click'}
                 <i class="fas fa-sort-amount-{dede:if var='orderway' value='desc'}down{else}up{/dede:if}"></i>
               {/dede:if}
            </a></li>
        <!-- ... 其他排序项类似 ... -->
    </ul>
</div>

代码解释：

• fas 是Font Awesome的样式前缀。
• fa-sort-amount-down 表示降序（从大到小）的图标。
• fa-sort-amount-up 表示升序（从小到大）的图标。
• 我们通过 {dede:if} 动态拼接出完整的图标类名。

添加CSS样式

/* 可以微调图标的颜色和位置 */
.sort-box a.active i {
    color: #ffffff; /* 图标颜色与文字保持一致 */
}

效果： 会显示非常漂亮的矢量图标，而不是简单的箭头，视觉效果更佳。

总结与最佳实践

推荐组合使用： 在实际开发中，最推荐的是 “方法一 + 方法三” 的组合，即使用CSS高亮当前项，并用图标字体显示排序方向，这样既能清晰地标识当前状态，又能提供专业美观的视觉反馈。

<!-- 模板代码示例 -->
<li><a href="..." class="{dede:if var='orderby' value='click'}active{/dede:if}">
    点击
    {dede:if var='orderby' value='click'}
      <i class="fas fa-sort-amount-{dede:if var='orderway' value='desc'}down{else}up{/dede:if}"></i>
    {/dede:if}
</a></li>
<!-- CSS代码示例 -->
.sort-box a.active { background: #007bff; color: #fff; }
.sort-box a.active i { color: #fff; margin-left: 5px; }

通过以上方法,你就可以灵活地在DedeCMS中实现各种样式的数字排序功能了。