要实现多个缩略图,主要有两种方法：
- 修改数据库和程序文件（硬核方法）：直接修改
dede_archives表，增加新的缩略图字段，并修改相关的模板和PHP处理文件，这种方法功能强大，但修改点较多,升级困难。 - 利用附加表/自定义模型（推荐方法）：这是更标准、更灵活、更安全的方式，我们创建一个新的自定义模型，将多个缩略图存储在附加表中，这样不会影响核心程序,升级无忧。
下面我将详细介绍第二种推荐方法，因为它更符合 DedeCMS 的设计理念,且易于维护。
利用自定义模型实现多个缩略图 (推荐)
这种方法的核心思想是：
- 创建一个自定义的数据模型，它包含主表（
dede_archives）和附加表。 - 在附加表中添加多个字段来存储缩略图地址（
pic1,pic2,pic3）。 - 在后台发布文章时,通过自定义表单来上传或填写这些缩略图。
- 在前台模板中,通过调用这些附加表字段来显示多图。
创建自定义模型
- 登录DedeCMS后台 -> 核心 -> 内容模型管理。
- 点击 [增加新模型]。
- 模型名称：填写一个你喜欢的名字，多图文章模型”。
- 表前缀：保持默认的
dede_即可。 - 字段列表：暂时不用管,我们先创建模型。
- 填写完信息后，点击 [保存]。
创建成功后，系统会自动为你生成一个主表（dede_addonarticle 是默认的文章附加表，新模型会生成自己的附加表，如 dede_addon多图文章模型）和一套基本的字段。
为模型添加多图字段
现在我们需要向新创建的模型的附加表中添加缩略图字段。
-
回到 内容模型管理，找到你刚刚创建的“多图文章模型”，点击后面的 [字段管理]。
-
点击 [增加新字段]。
-
我们来添加三个缩略图字段,重复此操作三次。
-
添加第一个缩略图字段 (pic1)
（图片来源网络，侵删）- 字段名：
pic1(必须为英文字母或数字,小写) - 字段类型：
多媒体(图片)(选择这个类型,系统会自动生成上传按钮) - 字段提示：
缩略图1(在后台表单中显示的提示文字) - 默认值：留空
- 是否为空：
是(允许为空) - 其他选项：保持默认即可。
- 点击 [保存]。
- 字段名：
-
添加第二个缩略图字段 (pic2)
- 字段名：
pic2 - 字段类型：
多媒体(图片) - 字段提示：
缩略图2 - 点击 [保存]。
- 字段名：
-
添加第三个缩略图字段 (pic3)
- 字段名：`
pic3 - 字段类型：
多媒体(图片) - 字段提示：
缩略图3 - 点击 [保存]。
- 字段名：`
-
设置栏目并选择模型
- 进入 [栏目管理]。
- 选择一个你想要使用“多图文章模型”的栏目，点击 [更改]。
- 在栏目设置中，找到 模型” 选项，将其从“普通文章”改为你刚刚创建的 “多图文章模型”。
- 保存栏目设置。
在前台模板中调用多个缩略图
最关键的一步来了，你需要修改你当前使用的内容页模板（通常是 article_article.htm）和列表页模板（通常是 list_artlist.htm）来显示这些新添加的缩略图。
页模板 (article_article.htm)**
在你想显示多图的地方（例如文章内容下方）,添加以下代码：
<div class="multi-pics">
<h3>相关图片</h3>
<ul>
{dede:field name='pic1'/}
{dede:field name='pic2'/}
{dede:field name='pic3'/}
</ul>
</div>
直接 为了生成正确的 代码解释： *列表页模板 ( 在列表页中，你可能想在文章摘要旁边显示一张或多张缩略图，同样使用 你想在列表项中显示 为了让多图显示得更美观,你可以添加一些CSS样式。 在模板的 通过以上五个步骤，你就成功地实现了在 DedeCMS 中为文章添加多个缩略图的功能。 这种方法的优点： 注意事项： 希望这个详细的教程能帮到你！{dede:field name='pic1'/} 输出的是图片的完整路径（如 /uploads/202510/01/xxx.jpg），而不是 <img>
<img> 标签，我们需要使用 DedeCMS 的全局函数 GetImgUrl,修改如下：<div class="multi-pics">
<h3>相关图片</h3>
<ul>
<!-- 检查字段是否为空，不为空才显示 -->
<li>
[field:pic1 runphp='yes']
if(@me != '') @me = '<img src="'.GetImgUrl(@me).'" alt="缩略图1" />';
else @me = '';
[/field:pic1]
</li>
<li>
[field:pic2 runphp='yes']
if(@me != '') @me = '<img src="'.GetImgUrl(@me).'" alt="缩略图2" />';
else @me = '';
[/field:pic2]
</li>
<li>
[field:pic3 runphp='yes']
if(@me != '') @me = '<img src="'.GetImgUrl(@me).'" alt="缩略图3" />';
else @me = '';
[/field:pic3]
</li>
</ul>
</div>
[field:pic1 runphp='yes']：启用PHP运行模式。if(@me != '')：判断 pic1 字段的值是否为空。@me = '<img src="'.GetImgUrl(@me).'" alt="缩略图1" />'：如果不为空，则将 @me（当前字段的值）用 <img> 标签包裹起来。GetImgUrl() 函数会自动处理路径,确保路径正确。else @me = ''：如果为空，则将 @me 设为空字符串,即不显示任何东西。[/field:pic1]：结束PHP运行模式。list_artlist.htm 或 `list_.htm`)**GetImgUrl 函数。pic1 作为封面图：{dede:list pagesize='10'}
<li>
<!-- 显示第一张缩略图 -->
[field:pic1 runphp='yes']
if(@me != '') @me = '<div class="list-pic"><img src="'.GetImgUrl(@me).'" alt="'.@me.'" /></div>';
else @me = '<div class="list-pic"><img src="/images/default.jpg" alt="默认图片" /></div>'; // 可以设置一个默认图
[/field:pic1]
<div class="list-content">
<a href="[field:arcurl/]">[field:title/]</a>
<p>[field:description function='cn_substr(@me,100)'/]...</p>
</div>
</li>
{/dede:list}
CSS 样式美化
<head> 部分或外部的CSS文件中添加：.multi-pics {
margin-top: 20px;
padding: 10px;
border: 1px solid #eee;
}
.multi-pics h3 {
font-size: 16px;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.multi-pics ul {
list-style: none;
display: flex; /* 使用flex布局让图片并排 */
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /* 图片间距 */
}
.multi-pics ul li {
/* 根据需要设置图片大小 */
width: 200px;
height: 150px;
overflow: hidden;
}
.multi-pics ul li img {
width: 100%;
height: 100%;
object-fit: cover; /* 保证图片不变形 */
}
/* 列表页样式 */
.list-pic {
float: left; /* 或者使用 flex 布局 */
margin-right: 10px;
width: 120px;
height: 90px;
overflow: hidden;
}
.list-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.list-content {
overflow: hidden; /* 清除浮动 */
}
runphp='yes' 功能在某些被严格安全限制的主机上可能被禁用，如果遇到问题，可以尝试在后台开启相关功能或寻找替代方案（如使用自定义函数）。
