如何在Dedecms文章列表页中添加缩略图？

在DedeCMS（织梦内容管理系统）中，为文章列表页添加缩略图能够显著提升页面的视觉效果和用户体验，本文将详细讲解如何在DedeCMS的文章列表页中添加缩略图，包括步骤、代码示例以及常见问题解答。

准备工作

1、备份网站文件：在进行任何修改之前，务必备份你的DedeCMS网站文件，以防万一出现问题可以迅速恢复。

2、图片上传：确保每篇文章都有相应的缩略图，并且这些图片已经上传到服务器的指定目录中。

步骤一：修改模板文件

找到DedeCMS模板文件夹中的article_article.htm文件，这个文件通常位于/templets/default/目录下。

1、：使用文本编辑器（如Notepad++）打开article_article.htm文件。

2、查找列表循环代码：搜索以下代码段，这是生成文章列表的核心部分。

    {dede:arclist row='10'}
        ...
    {/dede:arclist}

3、添加缩略图标签：在循环内部添加获取缩略图的标签，假设你的缩略图字段名为litpic，你可以这样修改：

    {dede:arclist row='10'}
        <li>
            <a href="[field:arcurl/]">
                <img src="[field:litpic function='thumb(150,150)'/]" alt="[field:title/]">
                <span>[field:title/]</span>
            </a>
        </li>
    {/dede:arclist}

在这个例子中，[field:litpic function='thumb(150,150)'/]表示获取缩略图并生成一个150×150像素的缩略图。

步骤二：调整CSS样式

为了确保缩略图在页面上显示良好，你需要调整CSS样式，找到模板文件夹中的styles.css文件，并进行如下修改：

/* List item */
.listitem {
    float: left;
    width: 20%; /* 根据需要调整宽度 */
    padding: 10px;
    boxsizing: borderbox;
}
/* Thumbnail image */
.listitem img {
    width: 100%;
    height: auto;
    display: block;
    objectfit: cover; /* 保持图片比例 */
}
/* List item text */
.listitem span {
    display: block;
    margintop: 5px;
    textalign: center;
}

步骤三：检查和测试

完成上述步骤后，保存所有修改并刷新你的DedeCMS文章列表页，你应该能看到每篇文章前面都带有一个缩略图。

FAQs

Q1: 如果缩略图没有显示怎么办？

A1: 请确保以下几点：

1、确认缩略图字段名是否正确。

2、检查图片路径是否正确，确保图片已上传到服务器。

3、查看浏览器控制台是否有报错信息，帮助定位问题。

4、确保CSS样式正确应用，可以通过检查浏览器开发者工具来确认。

Q2: 如何更改缩略图的尺寸？

A2: 你可以通过修改thumb()函数的参数来调整缩略图的尺寸。

[field:litpic function='thumb(200,200)'/]

这将生成一个200×200像素的缩略图，根据你的需求进行调整即可。