- 后台设置：确保文章有缩略图，并且开启了WAP端的缩略图功能。
- 前台修改：修改WAP列表页的模板文件，让缩略图正确显示出来。
第一部分：后台设置
在修改模板之前,请务必确保你的后台设置是正确的，否则前端无论如何修改都无法显示缩略图。
确认模型字段包含缩略图
- 进入织梦后台 -> 核心 -> 内容模型管理。
- 点击你用于WAP列表的模型（通常是“文章”模型）。
- 检查“字段管理”列表中，是否存在名为 “litpic” 的字段，这是织梦默认的缩略图字段，如果不存在，你需要手动添加一个类型为“图片”的字段，并命名为
litpic，通常默认模型都已包含。
发布文章时上传缩略图
- 在后台发布文章时,确保在“常规选项”中上传了缩略图。
- 关键点：勾选 “远程图片本地化” 和 “自动提取第一个图片为缩略图”，这样能大大提高效率，避免漏传缩略图。
WAP模板设置（非常重要）
这是最容易忽略但至关重要的一步。
- 进入织梦后台 -> 系统 -> 系统基本参数 -> 核心设置。
- 找到 “是否启用WAP网站”，设置为“是”。
- 向下滚动,找到 “WAP模板目录设置”，这里指定了存放WAP模板的文件夹，通常是
/wap/。 - 继续向下,找到 “WAP列表页模板” 和 “WAP文章页模板”，请确保这里指定了正确的模板文件名。
第二部分：前台模板修改
我们来修改WAP列表页的模板文件,使其能够调用并显示缩略图。
定位WAP列表模板文件
WAP模板文件通常位于你网站根目录下的 /templets/ 文件夹中，或者在 /templets/你的默认模板目录/ 中，根据你在后台的设置，找到WAP模板目录（如 /wap/）。
你需要修改的文件是：
list_default_wap.htm或其他你自定义的WAP列表模板文件名。
分析默认的WAP列表标签
打开这个模板文件,你会发现织梦WAP列表的默认调用标签通常是：
{dede:list pagesize='10'}
<li>
<a href="[field:arcurl/]">
[field:title/]
</a>
<span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
</li>
{/dede:list}
这个模板只显示了标题和日期,完全没有调用缩略图。
添加缩略图调用代码
我们需要在 修改后的代码示例： 代码解析： 如果某些文章没有上传缩略图,直接调用 使用织梦默认的缩略图 织梦有一个系统变量 这段代码的逻辑是： 使用CSS占位符（更简洁） 这是一种更现代、更简洁的CSS解决方案。 HTML部分：保持简单，无论有无图都输出一个img标签。 CSS部分：在WAP模板的 这种方法通过CSS来布局,当没有图片时， 如果修改后缩略图仍然不显示,请按以下步骤检查： 通过以上步骤,你应该可以成功地在织梦WAP列表页中完美地显示缩略图了。{dede:list} 循环内部添加一个 <img> 标签来显示缩略图，最常用和推荐的方法是使用 field:picname
{dede:list pagesize='10'}
<li>
<!-- 缩略图部分 -->
<a href="[field:arcurl/]">
<img src="[field:picname/]" alt="[field:title/]" />
</a>
<!-- 标题和日期部分 -->
<a href="[field:arcurl/]">
[field:title/]
</a>
<span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
</li>
{/dede:list}
<img src="[field:picname/]" alt="[field:title/]" />：
[field:picname/]：这是调用文章缩略图地址的核心标签，它会直接输出你在后台上传的图片路径。alt="[field:title/]"：为图片添加 alt 属性，这有助于SEO和无障碍访问，并且当图片加载失败时会显示文字。进阶优化：处理无缩略图的情况
[field:picname/] 可能会显示一个破损的图片图标，为了更好的用户体验，我们可以进行优化。{dede:global.cfg_basehost/} 可以获取网站域名，我们可以结合 cfg_templets_skin 来指定一个默认的缩略图。{dede:list pagesize='10'}
<li>
<a href="[field:arcurl/]">
<!-- 如果有缩略图显示缩略图，否则显示默认图 -->
[field:picname runphp='yes']
if(@me == '') {
@me = "<img src='{dede:global.cfg_basehost/}/templets/{dede:global.cfg_templets_skin/}/images/default_wap.jpg' alt='[field:title/]' />";
} else {
@me = "<img src='{dede:picname/}' alt='[field:title/]' />";
}
[/field:picname]
</a>
<a href="[field:arcurl/]">[field:title/]</a>
<span>[field:pubdate function="MyDate('m-d',@me)"/]</span>
</li>
{/dede:list}
runphp='yes'：开启PHP代码执行。if(@me == '')：判断 picname 字段是否为空。<img> 标签。请确保 /templets/你的模板目录/images/ 下存在 default_wap.jpg 这张图片。
<img src="[field:picname/]" alt="[field:title/]" onerror="this.src='';this.style.display='none';" />
onerror="this.src='';this.style.display='none';"：这是一个内联的JavaScript，如果图片加载失败（通常是因为 src 为空），它会清空 src 并隐藏整个 <img>
<head> 部分或外部CSS文件中，添加样式。/* 在 list_default_wap.htm 的 <style> 标签内添加 */
li {
display: flex; /* 使用flex布局 */
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
li img {
width: 60px; /* 设置一个固定宽度 */
height: 60px; /* 设置一个固定高度 */
margin-right: 10px;
object-fit: cover; /* 保证图片不变形 */
background-color: #f0f0f0; /* 背景色，作为占位 */
}
li a:last-child {
flex: 1; /* 标题链接占据剩余空间 */
font-size: 16px;
color: #333;
text-decoration: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
li span {
font-size: 12px;
color: #999;
margin-left: 5px;
}
<img> 标签隐藏，flex 布局会自动调整，让标题链接占据图片的位置，整体布局依然保持美观。
总结与排查步骤
/templets/wap/ 目录下是否存在你修改的模板文件。src 属性是否指向了一个正确的、可访问的地址，如果地址是 /uploads/allimg/...，但你的网站根目录下没有这个文件夹，那就是路径问题，需要检查后台附件上传设置。
