当前位置：首页 > 问答 > 正文

织梦系统内容列表织梦系统dedecms内容列表文章添加hot和new小图标的方法解析

柴韶丽
问答
2025-08-02 16:30:44
4

🔥 织梦系统内容列表添加hot和new小图标全攻略

最新动态 📢：截至2025年8月，织梦系统（DedeCMS）依然是许多站长喜爱的内容管理系统之一，虽然官方更新放缓，但社区依然活跃，各种实用技巧层出不穷，今天我们就来聊聊如何在内容列表页给文章添加醒目的hot和new小图标，让网站内容更吸睛！

🛠️ 准备工作

在开始之前，确保你已经：
✅ 熟悉织梦系统后台操作
✅ 掌握基础的HTML和CSS知识
✅ 备份网站数据（重要！）

📌 方法一：手动修改模板文件

1️⃣ 找到列表模板文件

通常位于 /templets/default/ 或你的自定义模板目录下，list_article.htm（文章列表模板）。

2️⃣ 添加判断逻辑

在循环输出文章列表的位置（一般是 {dede:list} 标签内），加入以下代码：

织梦系统内容列表织梦系统dedecms内容列表文章添加hot和new小图标的方法解析

{dede:list pagesize='10'}
  <li>
    <a href="[field:arcurl/]">[field:title/]</a>
    <!-- 判断是否为24小时内的新文章 -->
    [field:pubdate runphp='yes']
      if(time() - @me < 86400) @me = "<span class='new-icon'>NEW</span>";
      else @me = "";
    [/field:pubdate]
    <!-- 判断是否为热门文章（点击量大于1000） -->
    [field:click runphp='yes']
      if(@me > 1000) @me = "<span class='hot-icon'>HOT</span>";
      else @me = "";
    [/field:click]
  </li>
{/dede:list}

3️⃣ 添加CSS样式

在模板的CSS文件（如 style.css）中添加样式：

.new-icon {
  display: inline-block;
  background: #FF4500;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
}
.hot-icon {
  display: inline-block;
  background: #FF0000;
  color: white;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 5px;
}

🎨 方法二：使用Font Awesome图标库

如果你想让图标更美观，可以使用流行的 Font Awesome 图标库。

1️⃣ 引入Font Awesome

在模板的 <head> 部分添加：

织梦系统内容列表织梦系统dedecms内容列表文章添加hot和new小图标的方法解析

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

2️⃣ 修改模板代码

将之前的 span 标签替换为Font Awesome图标：

[field:pubdate runphp='yes']
  if(time() - @me < 86400) @me = "<i class='fas fa-bolt new-icon'></i>";
  else @me = "";
[/field:pubdate]
[field:click runphp='yes']
  if(@me > 1000) @me = "<i class='fas fa-fire hot-icon'></i>";
  else @me = "";
[/field:click]

3️⃣ 调整CSS

.new-icon {
  color: #FFA500;
  margin-left: 5px;
}
.hot-icon {
  color: #FF0000;
  margin-left: 5px;
}

💡 小贴士

✨ 自定义图标：你可以用任意图片替代文字或Font Awesome图标，只需修改HTML代码即可。
✨ 调整判断条件：比如将“热门文章”的标准改为评论数（[field:click] 换成 [field:feedback]）。
✨ 缓存问题：修改模板后，记得更新系统缓存，否则可能看不到效果。

通过以上方法，你可以轻松在织梦系统的内容列表页添加 hot 和 new 小图标，让访客一眼识别热门和新发布的内容。🎯 快去试试吧，让你的网站更加生动有趣！

织梦系统内容列表织梦系统dedecms内容列表文章添加hot和new小图标的方法解析

如果你有更好的方法或疑问，欢迎在评论区交流~ 😊

本文由柴韶丽于2025-08-02发表在【云服务器提供商】，文中图片由（柴韶丽）上传，本平台仅提供信息存储服务；作者观点、意见不代表本站立场，如有侵权，请联系我们删除；若有图片侵权，请您准备原始证明材料和公证书后联系我方删除！
本文链接：https://vps.7tqx.com/wenda/517570.html