dede如何添加图片字段？-DEDE建站-盈思创科技

在后台管理系统中添加字段：定义字段名、类型、提示信息等。
在前台模板中调用并显示字段内容：修改模板文件，让新添加的图片能够显示出来。

下面我将为你提供详细的图文步骤说明。

（图片来源网络，侵删）

第一步：在后台添加图片字段

我们以修改“文章模型”为例，为文章内容添加一个名为 litpic_more (更多图片) 的图片字段。

进入模型管理

登录你的 DedeCMS 后台。
在左侧菜单栏中,找到并点击 【核心】 -> 模型管理】。

模型列表中,找到你想要修改的模型，【文章】，然后点击右侧的 【字段管理】。

添加新字段

进入字段管理页面后,点击右上角的 【添加新字段】 按钮。
填写字段信息（这是最关键的一步）：
（图片来源网络，侵删）
- 字段名: litpic_more (这是在数据库中存储的字段名，只能使用英文、数字和下划线，不能使用中文。)
- 字段别名: 更多图片 (这是在后台表单中显示的名称，可以使用中文，方便识别。)
- 字段类型: 选择【图片(多图)】，选择这个类型，系统会自动为你生成上传和选择图片的表单。
- 字段提示: 在这里填写提示信息，请上传与文章相关的更多图片”，这个提示会显示在后台表单的字段旁边。
- 默认值: 留空即可。
- 字段排序: 数字，越小越靠前，默认即可。
- 是否为空: 选择【否】，表示这个字段是必填的，如果允许为空，就选【是】。
- 字段长度: 图片类型的字段长度一般不需要修改，保持默认。
- 是否显示在发布页: 选择【是】，这样在后台发布文章时才能看到这个字段。
- 是否在列表页显示: 根据需要选择，如果想在文章列表页就看到缩略图，就选【是】。
- 自动生成目录: 图片字段不需要。
- 内容是否为HTML: 选择【否】。
重要：设置【专用上传】：
- 在字段设置下方,找到 【专用上传】 选项。
- 必须勾选【使用】。
- 选择目录：点击“选择”按钮，为这个图片字段指定一个专门的上传目录，uploads/article_morepics，这样做可以更好地管理图片资源。
- 设置最大宽度/高度：可以设置上传图片的最大尺寸，系统会自动将超过此尺寸的图片进行缩放。
点击 【保存】 按钮。

生成HTML并更新缓存

添加完字段后,系统会提示你“成功”，后台的字段已经添加完毕。
为了让前台模板能够正确识别新字段,你需要进行以下操作：
- 点击顶部菜单栏的 【系统】 -> 【SQL命令行工具】。
- 在“命令行”文本框中输入以下命令，然后点击“查询”：
```
ALTER TABLE `dede_archives` ADD `litpic_more` VARCHAR(255) NOT NULL DEFAULT '';
```
  注意：
  - dede_archives 是文章主表的前缀，如果你的数据库表前缀不是 dede_，请修改成你的实际前缀。
  - litpic_more 是你刚刚添加的字段名。
  - 这个命令的作用是在数据库的 archives 表中增加一个与你字段名对应的 VARCHAR 类型的列，用于存储图片路径信息。
- 执行成功后,再点击 【系统】 -> 【一键更新网站】 -> 更新HTML -> 更新所有文档，这一步是为了让系统重新生成文章页面，使其包含新字段的调用代码。

第二步：在前台模板中调用并显示图片

后台设置已经完成,我们需要修改文章的详细页模板（article_article.htm），让新添加的图片能够显示出来。

打开文章详细页模板

在后台,找到 【模板】 -> 【默认模板管理】，然后点击 【文章列表页模板】 或 页模板】 旁边的 【修改】 按钮，打开 article_article.htm 文件。

使用标签调用字段

在 article_article.htm 文件中，你可以使用 {dede:field.字段名/} 来调用你添加的字段。

直接显示单张图片（如果只上传了一张）

如果你的字段类型是【图片】，而不是【图片(多图)】，可以直接这样调用：

<img src="{dede:field.litpic_more/}" alt="{dede:field.title/}" />

循环显示多张图片（因为我们添加的是【图片(多图)】）

由于我们添加的是“多图”字段，它的值是以分隔的多张图片路径，我们需要使用 {dede:field name='字段名' function='函数名'/} 的形式来处理。

在模板的合适位置（例如文章内容下方），添加以下代码：

<!-- 更多图片 -->
<div class="article-more-pics">
    <h3>更多图片</h3>
    {dede:field name='litpic_more' function='GetImgInfos(@me)'/}
</div>

代码解释：

{dede:field name='litpic_more' ... /}: 调用名为 litpic_more 的字段。

function='GetImgInfos(@me)': 这是关键。GetImgInfos 是 DedeCMS 内置的一个函数，专门用来处理“多图”字段。

它会自动解析分隔的图片路径。
它会生成一个包含 <img> 标签和 <a> 链接的 HTML 结构，方便直接使用。

生成的 HTML 大致如下：

<a href='uploads/article_morepics/pic1.jpg' target='_blank'><img src='uploads/article_morepics/pic1.jpg' width='120' height='90' border='0'/></a>
<a href='uploads/article_morepics/pic2.jpg' target='_blank'><img src='uploads/article_morepics/pic2.jpg' width='120' height='90' border='0'/></a>
...

添加CSS样式（可选）

为了让图片显示得更美观,你可以在模板的 <head> 部分或外部的CSS文件中添加一些样式。

<style>
.article-more-pics {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #eee;
}
.article-more-pics h3 {
    font-size: 16px;
    margin-bottom: 10px;
}
.article-more-pics a {
    margin-right: 10px;
    display: inline-block;
}
.article-more-pics img {
    width: 120px;
    height: 90px;
    object-fit: cover; /* 保持图片比例并填充容器 */
    border: 1px solid #ccc;
}
</style>

后台操作：核心 -> 内容模型管理 -> 字段管理 -> 添加新字段 -> 选择【图片(多图)】 -> 填写信息 -> 勾选专用上传 -> 保存。
数据库操作：系统 -> SQL命令行工具 -> 执行 ALTER TABLE ... 命令。
前台模板：修改 article_article.htm -> 使用 {dede:field name='litpic_more' function='GetImgInfos(@me)'/} 调用多图。
更新网站：系统 -> 一键更新网站 -> 更新所有文档。

完成以上步骤后,你在后台发布文章时，就能看到新添加的“更多图片”字段了，上传图片后，在前台文章页面也能正确显示这些图片。

dede如何添加图片字段？