图片集模板的核心在于循环调用和图片字段的处理，整个过程可以分为以下几个步骤：
（图片来源网络，侵删）
第一步：创建图集文章
在写模板之前,你必须先在后台创建一个“图集”类型的文章。
- 登录 DedeCMS 后台。
- 管理」->「普通文章」->「增加普通文章」。
- 关键步骤：在文章编辑页面的右侧，找到「自定义字段」区域。
- 点击「添加新字段」，创建一个名为
picurls的字段，类型选择「多文本文本框」，这个字段将用来存储所有图片的地址和描述信息。 - 编辑框中,点击「图片集图标」或「插入图片」按钮，上传你的图片并填写图片说明，DedeCMS 会自动将图片信息整理成特定格式，并填充到
picurls字段中。 - 填写文章标题、栏目等信息后，发布文章。
你的数据库里就有了这张图集文章,并且包含了所有图片信息。
第二步：理解图片数据格式
DedeCMS 存储图集数据的核心是 picurls 字段，当你通过后台插入图片时，picurls 字段里存储的数据格式通常是 JSON 格式。
一个典型的 picurls 字段内容如下：
（图片来源网络，侵删）
[
{
"url": "/uploads/allimg/230101/1-2301011G5190-50-lp.jpg",
"text": "这是一张图片的描述1"
},
{
"url": "/uploads/allimg/230101/1-2301011G5190-51-lp.jpg",
"text": "这是另一张图片的描述2"
},
{
"url": "/uploads/allimg/230101/1-2301011G5190-52-lp.jpg",
"text": "最后一张图片的描述3"
}
]
注意：如果你的图集是单张大图模式（比如文章内容里直接插入了一张大图），picurls 字段可能为空，或者只包含一张图片的信息，模板需要能兼容这两种情况。
第三步：编写模板文件
图片集模板通常有两个关键文件：
- 列表页模板：
list_栏目ID.htm或list_imagelist.htm，用于显示多个图集的缩略图列表。 - 内容页模板：
article_imagelist.htm，用于展示单个图集的所有图片。
我们重点讲解内容页模板 article_imagelist.htm 的写法，这是最核心的部分。
页模板 (article_imagelist.htm)
这个模板的结构和普通文章类似,但内容部分会循环调用 picurls 里的图片。
（图片来源网络，侵删）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">{dede:field.title/}_我的网站</title>
<meta name="keywords" content="{dede:field.keywords/}" />
<meta name="description" content="{dede:field.description function='html2text(@me)'/}" />
</head>
<body>
<h1>{dede:field.title/}</h1>
<div class="info">
<span>发布时间：{dede:field.pubdate function="MyDate('Y-m-d H:i:s',@me)"/}</span>
<span>来源：{dede:field.source/}</span>
<span>点击：{dede:field.click/}</span>
</div>
<!-- 文章简介/正文部分 (可选) -->
<div class="intro">
{dede:field.body/}
</div>
<!-- ======== 核心部分：图片集展示 ======== -->
<div class="pics_box">
<!--
使用[field:picurls/]获取图片集的JSON数据。
然后使用PHP的json_decode函数将其转换为PHP数组。
最后使用{dede:loop}标签来循环这个数组。
-->
{dede:field name='picurls' function='json_decode(@me, true)'/}
{dede:loop}
<!--
在循环内部，[field:url/] 是图片地址。
[field:text/] 是图片描述。
-->
<div class="pic_item">
<img src="[field:url/]" alt="[field:text/]" />
<p class="pic_desc">[field:text/]</p>
</div>
{/dede:loop}
</div>
<!-- 文章底部信息 -->
<div class="dede_pages">
<ul>
{dede:pagebreak/}
</ul>
</div>
<!-- 上一篇/下一篇 -->
<div class="prenext">
<p>上一篇：{dede:prenext get='pre'/}</p>
<p>下一篇：{dede:prenext get='next'/}</p>
</div>
</body>
</html>
代码解析：
{dede:field name='picurls' function='json_decode(@me, true)'/}：这是最关键的一句。{dede:field name='picurls'}：获取picurls字段的原始内容（即那段JSON字符串）。function='json_decode(@me, true)'：对获取到的内容执行json_decode函数，将其从JSON字符串转换为PHP数组。true参数表示返回关联数组，这样我们就可以用url和text作为键来访问数据。
{dede:loop}：{dede:loop}标签通常用于循环一个数组，当它前面跟了一个被function处理过的数组时，它会自动循环这个数组的每一个元素。[field:url/]和[field:text/]：在{dede:loop}循环内部，这两个标签会分别指向当前循环元素的url和text键的值。
瀑布流/多图列表展示样式
上面的代码只是把图片垂直排列,为了让它看起来更美观，比如做成瀑布流或者多图列表，我们需要添加一些CSS样式。
在 <head> 标签内添加 <style> 部分：
<style>
.pics_box {
display: flex; /* 使用弹性布局 */
flex-wrap: wrap; /* 允许换行 */
justify-content: space-between; /* 两端对齐 */
gap: 10px; /* 图片之间的间距 */
}
.pic_item {
width: calc(25% - 10px); /* 假设每行4张，减去间距 */
margin-bottom: 10px;
border: 1px solid #eee;
box-sizing: border-box; /* 保证边框不会撑大容器 */
}
.pic_item img {
width: 100%;
height: auto;
display: block;
}
.pic_desc {
padding: 5px;
font-size: 12px;
text-align: center;
margin: 0;
}
</style>
这样,你的图集就会以每行4张图片的网格形式展示了。
列表页模板 (list_imagelist.htm)
列表页的写法和普通文章列表页几乎一样,主要是调用缩略图 [field:litpic/]。
{dede:list pagesize='12'}
<div class="list_item">
<a href="[field:arcurl/]">
<img src="[field:litpic/]" alt="[field:title/]" />
<h2>[field:title/]</h2>
</a>
<p class="intro">[field:description function='cn_substr(@me, 100)'/]...</p>
</div>
{/dede:list}
<!-- 分页 -->
<div class="dede_pages">
<ul>
{dede:pagebreak/}
</ul>
</div>
第四步：高级技巧与注意事项
兼容单张大图模式
如果用户没有使用“插入图片集”功能，而是直接在文章内容里上传了一张大图，picurls 字段可能是空的，这时，我们应该显示文章内容里的第一张图。
可以使用 {dede:field.body/} 结合正则表达式来提取第一张图。
<div class="pics_box">
<!-- 判断 picurls 是否为空 -->
{dede:if field='picurls' is='notnull'}
<!-- 如果不为空，按图集方式显示 -->
{dede:field name='picurls' function='json_decode(@me, true)'/}
{dede:loop}
<div class="pic_item">
<img src="[field:url/]" alt="[field:text/]" />
<p class="pic_desc">[field:text/]</p>
</div>
{/dede:loop}
{else}
<!-- 如果为空，则从文章内容中提取第一张图 -->
{dede:field.body function='str_replace(array("src=\"/","src=\"../"), "src=\"http://www.yourdomain.com/", @me)'/}
{dede:preg match='/<img.*?src=[\'|\"](.+?)[\'|\"].*?[\/]?>/is' field=@me}
<div class="pic_item">
<img src="[field:0/]" alt="{dede:field.title/}" />
</div>
{/dede:preg}
{/dede:if}
</div>
这段代码稍微复杂,它使用了 {dede:if} 条件判断和 {dede:preg} 正则表达式标签，可以更健壮地处理各种情况。
调用缩略图
列表页调用的 [field:litpic/] 是系统自动生成的，你也可以在自定义字段中设置一个专门的缩略图字段，以获得更灵活的控制。
使用图集模型专用标签
DedeCMS 也提供了一些专门为图集设计的标签，虽然不如上面的方法灵活，但有时更简单。
{dede:field name='imgurls'}：这个标签和picurls类似，但更通用。{dede:imglist}：这个标签专门用于循环imgurls字段，但它期望的数据格式可能和picurls的JSON格式不同。对于现代版本的DedeCMS，推荐使用上面介绍的json_decode+{dede:loop}的方法，因为它更可靠、更灵活。
写好 DedeCMS 图片集模板的关键在于：
- 理解数据：知道图片信息存储在
picurls字段中，并且是JSON格式。 - 核心代码：掌握
{dede:field name='picurls' function='json_decode(@me, true)'}这句“魔法”代码，它将JSON字符串变成了可供循环的数组。 - 循环输出：使用
{dede:loop}标签遍历数组，并用[field:url/]和[field:text/]获取每张图片的信息。 - 美化样式：用CSS控制图片的布局，实现瀑布流、网格等效果。
- 考虑兼容性：编写健壮的模板，能同时处理图集模式和单张大图模式。
希望这份详细的教程能帮助你掌握 DedeCMS 图片集模板的写法！
