织梦系统|推荐图标 织梦系统DedeCMS列表页实现为推荐文章添加专属推荐图标

让推荐文章在列表页"闪闪发光" ✨

场景再现：
最近在帮朋友打理一个文学网站，后台用的正是经典的织梦系统（DedeCMS），他突然问我："能不能让编辑推荐的文章在列表里有个小图标？就像杂志里的‘主编推荐’那样显眼？" 🤔 这需求太合理了！今天就把这个实用技巧分享给大家~

准备工作 🛠️

1. 确认字段：登录后台，检查文章模型是否已有flag推荐标记字段（通常自带）
2. 准备图标：找个醒目的🔥或⭐️图标，建议尺寸20x20像素，存到/images目录

三步实现魔法 ✨

步骤1：修改列表模板

找到你的列表页模板（通常是list_article.htm输出代码附近添加：

[field:flag runphp='yes']
if(stristr(@me,'c')) echo "<img src='/images/hot_icon.gif' class='recommend-ico' />";
[/field:flag]

小贴士：这里的'c'对应后台推荐选项的「推荐」标记，可根据需要改成'a'(头条)、'b'(特荐)等

步骤2：添加CSS样式

在模板CSS文件里加入：

.recommend-ico {
    vertical-align: middle;
    margin-left: 5px;
    animation: pulse 1s infinite alternate; /* 添加心跳动画 */
}
@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

效果升级：这个动画会让图标轻微跳动，实测点击率提升明显哦！🎯

步骤3：后台操作指南

发布文章时，记得勾选「属性」中的「推荐」选项（就是那个小旗子🚩标志）

进阶玩法 🚀

1. 多类型图标：不同推荐属性显示不同图标

   [field:flag runphp='yes']
   if(stristr(@me,'a')) echo "<img src='/images/top_icon.png' />";
   elseif(stristr(@me,'c')) echo "<img src='/images/recommend_icon.png' />";
   [/field:flag]

2. 移动端适配：

   

   @media (max-width: 768px) {
    .recommend-ico { 
        width: 16px;
        margin-left: 3px;
    }
   }

常见问题 ❓

Q：为什么图标不显示？
A：检查三点：①文件路径是否正确 ②是否勾选推荐属性 ③清除缓存

Q：能改成文字标签吗？
A：把<img>标签换成<span class="tag">推荐</span>即可

最后更新：2025年8月
这个技巧虽然简单，但能让优质内容获得更多关注，下次可以试试给不同推荐级别设计不同颜色的图标，用户反馈说像开盲盒一样有趣呢！🎁 有更好玩的想法欢迎交流~