article_article.htm文件中。，2. 在循环体内添加以下代码：，，“html，{dede:field name='litpic'/}，“，，3. 保存文件并更新缓存。，，这样，文章列表页就会显示缩略图了。在DedeCMS（织梦内容管理系统）中，为文章列表页添加缩略图能够显著提升页面的视觉效果和用户体验，本文将详细讲解如何在DedeCMS的文章列表页中添加缩略图，包括步骤、代码示例以及常见问题解答。
准备工作
1、备份网站文件：在进行任何修改之前，务必备份你的DedeCMS网站文件，以防万一出现问题可以迅速恢复。
2、图片上传：确保每篇文章都有相应的缩略图，并且这些图片已经上传到服务器的指定目录中。
步骤一：修改模板文件
找到DedeCMS模板文件夹中的article_article.htm文件，这个文件通常位于/templets/default/目录下。
1、打开article_article.htm文件：使用文本编辑器（如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像素的缩略图，根据你的需求进行调整即可。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1228336.html
