如何在织梦CMS或dedecms中为内容列表的文章添加hot和new小图标？

在织梦CMS（DedeCMS）中给内容列表文章添加“hot”和“new”小图标，可以增强页面的视觉效果，使用户更容易识别热门或新发布的文章，本文将详细介绍如何通过修改模板文件来实现这一功能。

准备工作

1、备份网站文件：在进行任何修改之前，请务必备份你的网站文件，以防出现意外情况导致数据丢失。

2、FTP工具：准备好一个FTP工具，例如FileZilla，用于上传和下载文件。

3、编辑器：使用一个文本编辑器，如Notepad++、Sublime Text等，以便编辑代码。

步骤一：找到列表模板文件

在织梦CMS后台，通常内容列表页对应的模板文件位于以下路径：

/templets/default/article_article_list.htm

或者，如果你使用的是其他模板风格，路径可能会有所不同，可以通过后台的模板管理功能查看具体的模板文件位置。

步骤二：编辑模板文件

用FTP工具下载并打开article_article_list.htm文件，找到显示文章列表的部分，通常会有类似以下的代码：

{dede:arclist typeid='' orderby='pubdate' row='10'}
    <li>
        [field:title function="cn_substr(@me,16)" /]
        [field:typelink /] [field:writer /] <span class="time">[field:pubdate function="MyDate('md',@me)" /]</span>
    </li>
{/dede:arclist}

在这个基础上，我们需要添加条件判断来显示“hot”和“new”图标。

步骤三：添加条件判断

假设我们将“hot”定义为点击量超过1000的文章，将“new”定义为发布日期在最近7天内的文章，可以在列表项中加入如下代码：

{dede:arclist typeid='' orderby='pubdate' row='10'}
    <li>
        <!标题 >
        [field:title function="cn_substr(@me,16)" /]
        <!类型链接 >
        [field:typelink /] [field:writer /] <span class="time">[field:pubdate function="MyDate('md',@me)" /]</span>
        <!添加hot和new图标 >
        {dede:if condition='[field:click] > 1000'}
            <span class="hoticon">🔥</span>
        {/dede:if}
        {dede:if condition='MyDate('%d',@me) @now <= 7'}
            <span class="newicon">🆕</span>
        {/dede:if}
    </li>
{/dede:arclist}

步骤四：添加CSS样式

为了确保图标显示效果，需要在CSS文件中添加相应的样式，找到你的主题CSS文件，通常位于/templets/default/style/目录中，比如dedecms.css，添加以下样式：

.hoticon {
    color: red; /* 可以根据需要调整颜色 */
    fontsize: 14px; /* 设置图标大小 */
    marginleft: 5px; /* 设置图标与文字之间的距离 */
}
.newicon {
    color: green; /* 可以根据需要调整颜色 */
    fontsize: 14px; /* 设置图标大小 */
    marginleft: 5px; /* 设置图标与文字之间的距离 */
}

步骤五：上传文件并刷新缓存

将修改后的模板文件和CSS文件上传到服务器相应目录，并在后台刷新缓存，然后访问内容列表页，检查是否成功显示了“hot”和“new”图标。

FAQs

Q1：如何更改图标样式？

A1：要更改图标样式，只需在CSS文件中修改.hoticon和.newicon选择器的样式属性即可，你可以更改color属性来改变图标的颜色，更改fontsize属性来改变图标的大小。

Q2：如何定义不同的热门和新发布标准？

A2：热门和新发布的标准是通过条件判断语句中的条件进行定义的，上述示例中，我们定义热门为点击量超过1000的文章，新发布为发布日期在最近7天内的文章，你可以通过修改这些条件来定义自己的标准。

织梦CMS/dedecms给内容列表文章添加hot、new小图标

1. 准备工作

在开始之前，请确保您已经：

登录到织梦CMS后台。

准备好您想要添加的小图标图片文件，例如hot.png和new.png。

2. 修改模板文件

织梦CMS的内容列表通常是由模板文件控制的，以下是在模板中添加hot、new小图标的步骤：

2.1 打开模板文件

在织梦CMS后台，找到并打开您要修改的模板文件，内容列表的模板文件可能位于templets目录下的相应主题文件夹中。

2.2 定位文章内容显示区域

找到模板中用于显示文章列表的区域，这通常是包含<li>标签的列表项。

2.3 添加小图标

以下是一个示例代码，展示如何在文章列表中添加hot和new图标：

<ul class="articlelist">
  {dede:arclist titlelen=30}
  <li>
    {if $arc.arcrank == 1}
    <img src="{dede:global.cfg_templets_skin/}/images/hot.png" alt="热门" class="hoticon" />
    {/if}
    {if $arc.sortid == 2}
    <img src="{dede:global.cfg_templets_skin/}/images/new.png" alt="最新" class="newicon" />
    {/if}
    <a href="{$arc.arcurl}">{$arc.title}</a>
    <!其他内容，如发布时间、作者等 >
  </li>
  {/dede:arclist}
</ul>

2.4 解释代码

{dede:arclist titlelen=30}：这是一个织梦CMS的标签，用于循环遍历文章列表。

{if $arc.arcrank == 1}：如果文章的推荐等级为1（即hot），则显示hot图标。

{if $arc.sortid == 2}：如果文章的分类ID为2（即new），则显示new图标。

<img>标签：用于显示图标图片，src属性指定图标图片的路径，alt属性为图标的替代文本，class属性为图标添加CSS类。

3. 保存并预览

保存修改后的模板文件。

在织梦CMS后台预览或发布文章，查看效果。

4. CSS样式调整（可选）

如果您想要调整图标的位置、大小或样式，可以通过添加CSS样式来实现：

.hoticon, .newicon {
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  verticalalign: middle; /* 垂直居中 */
}

将上述CSS代码添加到模板文件的<style>标签中，或者创建一个单独的CSS文件并在模板中引用。

5. 归纳

通过以上步骤，您可以在织梦CMS的内容列表中为文章添加hot和new小图标，以增强用户体验和内容吸引力。