织梦商品模型图集怎么加？-织梦建站-盈思创科技

直接使用系统自带的“图集”模型（最简单、推荐）
在现有商品模型中手动添加图集字段（更灵活）

使用系统自带的“图集”模型（最简单、推荐）

这是最直接、最官方的方法，织梦CMS本身就内置了一个“图集”模型，你只需要在发布内容时选择它即可。

操作步骤：

进入模型管理
- 登录你的织梦后台。
- 在左侧菜单栏找到 【核心】 -> 模型管理】。
添加或切换模型
- 模型管理页面,你可以看到系统已有的模型，如“文章”、“图片”、“软件”等。
- 如果你还没有图集模型，点击 【增加新模型】。
  - 模型名称：填写 图集 或 商品图集。
  - 模型表：系统会自动生成一个，如 dede_addonimages，无需修改。
  - 字段目录：保持默认即可。
  - 勾选 【启用】。
  - 其他选项可以默认,然后点击 【保存】。
- 如果你已经有图集模型，直接使用即可。
为图集模型添加必要字段（可选但推荐）
- 在 模型管理】 页面，找到你刚刚创建或已有的“图集”模型，点击右侧的 【管理字段】。
- 确保至少有以下字段：
  - title (标题)：系统自带，必须。
  - litpic (缩略图)：系统自带，必须。
  - body (图集内容)：这是图集的核心字段，系统默认可能没有，你需要手动添加。
    - 点击 【增加新字段】。
    - 字段名称：body
    - 字段别名：
    - 字段类型：HTML文本编辑器 (非常重要！)
    - 字段描述：上传图集内容
    - 是否为空：是
    - 默认值：留空
    - 其他：保持默认
    - 点击 【保存】。
发布图集内容
- 在后台,进入 【核心】 -> 【普通文章】（或其他内容发布模块）。
- 点击 【增加顶级栏目】 或在现有栏目中点击 【发布文档】。
- 在发布页面,选择 内容模型 为 “图集”。
- 、上传缩略图。
- 在 ” 编辑器中，不要直接输入文字，你应该会看到一个类似 “图集” 或 “多图上传” 的按钮。
- 点击这个按钮,会弹出一个上传窗口，你可以选择本地的多张图片上传。
- 上传后,系统会自动生成图集的排版，你可以调整图片顺序、设置图片说明等。
- 发布后,在前台模板中，你需要使用 {dede:field.body/} 来调用这个图集。

优点：

操作简单,无需修改代码。
功能完整,自带图集上传和排版功能。

缺点：

图集和商品是分离的两个模型,如果你想在一个商品详情页里同时展示商品文字描述、价格和图集，需要联动调用，比较麻烦。

在现有商品模型中手动添加图集字段（更灵活）

如果你已经有了自己的商品模型（比如叫“product”），并且希望在同一个模型里管理所有商品信息（包括图集），可以手动添加一个图集类型的字段。

操作步骤：

进入模型管理
- 后台 -> 【核心】 -> 模型管理】。
- 找到你的 商品模型（product”），点击右侧的 【管理字段】。
增加新的图集字段
- 点击 【增加新字段】。
- 字段名称：piclist (或你喜欢的名称，如goods_pics)
- 字段别名：商品图集
- 字段类型：多图上传 (这是关键！)
- 字段描述：商品图片图集
- 是否为空：是 (根据你的需求决定)
- 其他选项：
  - 最大上传限制：可以设置一个数字，如 20，表示最多上传20张图。
  - 缩略图选项：可以勾选，但图集字段本身不需要缩略图，所以可以不勾。
- 点击 【保存】。
修改前台模板
- 发布商品时,你会在表单中看到一个“商品图集”的上传区域，上传的图片数据会保存在数据库的 @me 字段中。
- 你需要修改商品详情页的模板文件,通常是 /templets/default/article_article.htm (如果你的商品模型是“product”，并且使用了默认模板)。
- 在模板中,找到你希望显示图集的位置，使用以下代码来调用图集：
```

{dede:field name='piclist' function='GetImgList(@me)'/}

```
- 代码解释：
  - {dede:field name='piclist'}：调用我们刚刚创建的 piclist 字段。
  - function='GetImgList(@me)'：这是一个非常重要的自定义函数。@me 代表字段当前的值（即上传图片时生成的字符串）。GetImgList 函数需要你手动添加到织梦的核心函数文件中，它的作用是将这个字符串解析成一个可循环的图片列表。

创建自定义函数 GetImgList

这个函数是方法二能够成功的关键,你需要手动创建它。
用FTP工具连接你的服务器,找到并打开以下文件： /include/extend.func.php (如果这个文件不存在，你就自己创建一个。)
在文件末尾,添加以下PHP代码：

/**
 * 解析织梦多图字段，返回图片列表
 * @param string $imgstr 织梦多图字段内容，格式如：{"pagepic":"1","pics":"|uploads/20251001/123.jpg|uploads/20251001/456.jpg"}
 * @return string 返回一个包含所有图片的HTML列表
 */
function GetImgList($imgstr)
{
    // 如果为空，返回空
    if (empty($imgstr)) {
        return '';
    }
    // 使用正则表达式匹配所有图片路径
    // 正则表达式会匹配 "uploads/..." 这样的路径
    preg_match_all('/"([^"]+\.jpg|[^"]+\.png|[^"]+\.gif|[^"]+\.webp)"/i', $imgstr, $matches);
    $images = $matches[1]; // 获取所有图片路径
    if (empty($images)) {
        return '';
    }
    // 构建HTML输出
    $html = '<div class="goods-gallery">';
    $html .= '<div class="main-image">';
    $html .= '<img src="' . $images[0] . '" alt="商品主图">';
    $html .= '</div>';
    $html .= '<div class="thumbnail-list">';
    foreach ($images as $image) {
        $html .= '<img src="' . $image . '" alt="商品缩略图">';
    }
    $html .= '</div>';
    $html .= '</div>';
    return $html;
}

注意：上面的正则表达式可能需要根据你实际数据库中存储的图片路径格式进行微调。{dede:field name='piclist'/} 输出的原始字符串是一个JSON格式，包含了一些描述信息和图片路径，上面的正则表达式是提取路径的一种常用方法。

添加CSS样式

为了让图集看起来美观,你需要在你的CSS文件中添加一些样式，在 /templets/default/style/dedecms.css 中添加：

.goods-gallery {
    display: flex;
    margin-top: 20px;
}
.main-image {
    flex: 3;
    margin-right: 10px;
}
.main-image img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}
.thumbnail-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.thumbnail-list img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #eee;
}
/* 可以添加一些简单的JS来实现点击缩略图切换主图的功能 */

优点：

非常灵活,可以将图集作为商品的一个属性。
所有商品信息都在一个模型内,管理方便。

缺点：

需要手动修改模板和PHP代码,对新手有一定门槛。
需要自己处理图片的显示逻辑和样式。

总结与建议

特点	使用自带图集模型	手动添加图集字段
易用性	⭐⭐⭐⭐⭐ (非常简单)	⭐⭐ (需要代码能力)
灵活性	⭐⭐ (图集独立，联动复杂)	⭐⭐⭐⭐ (完全自定义)
适用场景	单独展示图片集合，或作为商品的一个附属栏目。	需要在商品详情页内无缝集成图集功能。
推荐度	强烈推荐给新手	推荐给有二次开发需求的用户

给你的建议：

如果你的需求只是为商品增加一个图片展示区,并且不希望太复杂，请优先使用方法一。
如果你正在开发一个功能强大的商城,需要对商品详情页进行精细化的控制，并且希望所有商品数据都统一管理，那么方法二更适合你。

希望这个详细的教程能帮助你成功为织梦商品模型添加图集功能！

织梦商品模型图集怎么加？

使用系统自带的“图集”模型（最简单、推荐）

操作步骤：

在现有商品模型中手动添加图集字段（更灵活）

操作步骤：

总结与建议

相关文章

目录[+]