dede单页面图片如何添加与管理？-DEDE建站-盈思创科技

创建一个纯图片展示的独立页面（作品集、画廊）

这是最直接的理解,你希望网站有一个页面，my-works.html，这个页面上只展示一系列图片，没有多余的文字内容。

解决方案：使用“独立页面”功能

DedeCMS 的“独立页面”功能非常适合创建这种内容固定、结构单一的页面。

操作步骤：

登录后台：进入 DedeCMS 后台管理。
进入栏目管理：在左侧菜单找到 栏目管理 -> 添加栏目。
创建独立页面栏目：
- 栏目名称：填写一个你想要的名称，我的作品集”。
- 栏目类型：务必选择“独立页面”，这是最关键的一步。
- 栏目目录：填写目录名，my-works，这会生成 my-works.html 的文件名。
- 其他选项可以根据需要填写,如是否生成HTML、列表模板等。
- 点击“确定”保存。
：
- 栏目创建成功后,点击 内容管理 -> 添加文档。
- 在“选择栏目”时，选择你刚刚创建的“我的作品集”。
- 填写页面标题,我的摄影作品”。
- 来源：选择“原创”或其他。
- 这里是核心,点击编辑器中的 图片 图标，上传并插入你想要展示的所有图片。
  - 你可以一张一张上传插入。
  - 也可以使用编辑器的“多图上传”功能，一次性选择多张图片上传，然后在内容中插入图片列表。
- 填写完毕后,点击“保存”或“生成HTML”。
访问页面：
- 前台访问你设置的页面路径,http://你的域名/my-works.html，就能看到你插入的图片了。

优点：

简单直接,适合内容固定的展示页。
管理方便,在后台直接编辑即可。

缺点：

如果图片很多,每次更新都需要重新编辑整个页面，不够灵活。

在文章页面内，只展示一张或多张图片（作为文章主体）

这种情况是文章内容本身就是图片,或者文章的重点是图片。

解决方案：与普通文章一样，直接在内容中插入图片

这和场景一的后半部分操作类似,但栏目类型不同。

操作步骤：

创建普通栏目：
- 进入 栏目管理 -> 添加栏目。
- 栏目名称：图片新闻”。
- 栏目类型：选择“文章栏目”。
- 设置其他选项,并指定一个列表模板和文章模板。
添加文章：
- 进入 内容管理 -> 添加文档，选择你刚创建的“图片新闻”栏目。
- 填写文章标题,2025年度最美风景TOP10”。
- 在编辑器中,使用 图片 功能上传并插入你的图片，你可以对图片进行排版、添加说明文字等。
- 缩略图：你也可以单独设置一张文章的缩略图，用于在列表页展示。
效果：
- 访问这篇文章的详情页（http://你的域名/a/2025/0102/123.html），页面主体就是你插入的图片。

优点：

灵活,每篇文章可以有自己的图片组合。
可以利用 DedeCMS 强大的文章管理功能（如分类、标签、评论等）。

实现一个图片列表页，点击图片后在新页面中放大查看（画廊效果）

这是最常见的需求,类似于一个图片画廊，列表页是缩略图，点击后进入详情页看大图。

这需要结合栏目、文章和自定义模板来实现。

核心思路：

创建一个专门的图片栏目。
每一张图片都作为一篇文章里放大图，缩略图设置成小图。
修改列表模板，让它只显示缩略图。
修改文章详情模板，让它只显示大图。

详细步骤：

创建图片栏目：
- 栏目管理 -> 添加栏目。
- 栏目名称：产品图片库”。
- 栏目类型：选择“文章栏目”。
- 列表目录：products。
- 列表模板：选择一个默认的列表模板，或者复制一个进行修改（推荐修改）。
- 文章模板：选择一个默认的文章模板，或者复制一个进行修改（推荐修改）。
- 缩略图：勾选“启用缩略图”，并设置好缩略图宽度和高度（200x150）。
批量添加图片文章：
- 这是最繁琐的一步,你需要为每一张图片都创建一篇文章。
- 进入 内容管理 -> 添加文档，选择“产品图片库”栏目。
- 可以写图片的名称,如“产品图 - 01”。
- 缩略图：上传并设置这张图片的小图（200x150）。
- 在编辑器中上传并插入这张图片的大图。
- 重复此步骤,直到所有图片都添加完毕。
修改列表模板 (list_products.htm)：
- 进入 模板 -> 默认模板管理，找到你刚刚创建的“产品图片库”栏目，点击其“列表模板”后面的 修改。
- 打开模板文件,找到类似 {dede:list} 的标签。
- 默认的列表模板可能包含标题、摘要等，我们只需要缩略图和链接。
- 替换为类似以下代码：
```
<ul class="product-list">
{dede:list pagesize='12'}
    <li>
        <a href="[field:arcurl/]">
            <img src="[field:picname/]" alt="[field:title/]" />
        </a>
    </li>
{/dede:list}
</ul>
<div class="dede_pages">{dede:pagelist listsize='4'/}</div>
```
- 代码解释：
  - {dede:list}：循环列出文章。
  - [field:picname/]：调用文章的缩略图地址。
  - [field:title/]：调用文章标题，用作 alt 属性，有利于SEO。
  - [field:arcurl/]：调用文章的详情页链接。
  - {dede:pagelist/}：调用分页。
修改文章详情模板 (article_products.htm)：
- 同样在 默认模板管理 中，找到“产品图片库”栏目的“文章模板”，点击 修改。
- 打开模板文件,删除默认的标题、发布时间等所有内容，只保留核心的图片输出代码：
```
<div class="article-content">
    <img src="{dede:field name='body'/}" alt="{dede:field.title/}" />
</div>
```
- 代码解释：
  - {dede:field name='body'/}：这个标签会直接输出文章正文中的所有内容，因为我们正文里只放了一张大图，所以这里就直接显示了那张大图。

添加CSS样式：

在你的网站CSS文件中,为上述模板添加一些样式，让页面更好看。

/* 列表页样式 */
.product-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.product-list li {
    width: 200px;
}
.product-list img {
    width: 100%;
    height: auto;
    border: 1px solid #eee;
}
/* 详情页样式 */
.article-content {
    text-align: center;
    margin: 50px 0;
}
.article-content img {
    max-width: 100%;
    height: auto;
}

完成效果：

访问 http://你的域名/products/，你会看到一个缩略图列表。
点击任意一张缩略图,会跳转到该图片的详情页，并显示大图。

总结与推荐

需求场景	推荐方法	优点	缺点
创建一个固定的纯图片展示页	使用“独立页面”功能	极其简单，管理方便，适合内容不常变的页面。	更新麻烦，图片多时编辑效率低。
就是图片	使用“文章栏目”，直接在内容中插入图片	灵活，可利用DedeCMS所有文章功能。	每张图都是一篇文章，如果图片量巨大，管理会很累。
实现图片画廊（列表->详情）	创建“文章栏目”，每张图为一篇文章，并自定义模板	功能强大，体验好，适合大量图片的展示和管理。	设置较复杂，需要手动为每张图创建文章。

对于绝大多数“单页面图片”的需求，场景一和场景三是最常见的，如果你的图片不多且固定，用场景一；如果你有很多图片，希望用户能浏览，用场景三。

dede单页面图片如何添加与管理？

创建一个纯图片展示的独立页面（作品集、画廊）

解决方案：使用“独立页面”功能

在文章页面内，只展示一张或多张图片（作为文章主体）

实现一个图片列表页，点击图片后在新页面中放大查看（画廊效果）

总结与推荐

相关文章

目录[+]