织梦网页滚动图上传步骤是什么？-织梦建站-盈思创科技

上传图片并保存到织梦后台：将你的图片文件添加到网站的图库或指定栏目中。
调用代码并放到模板文件中：在需要显示滚动图的页面（如首页）模板里,插入织梦的调用代码。

下面我将为你提供最常用、最标准的两种方法,并附上详细步骤和代码。

（图片来源网络，侵删）

使用系统自带的“图集”功能（最常用、最推荐）

这种方法的好处是图片和内容关联性强，管理方便,适合滚动图链接到具体文章或内容页的场景。

第一步：创建图集内容

登录织梦后台：使用你的管理员账号登录。
进入“添加文档”：
- 在顶部菜单栏，找到 “核心” -> 发布” -> “添加文档”。
- 在左侧的栏目列表中，选择一个已经存在的栏目（首页焦点图”栏目，如果这个栏目不存在，请先创建一个，模型选择“图集”）。注意： 滚动图本身不是一篇文章,所以我们用一个专门的栏目来存放它们。
填写文档信息：
（图片来源网络，侵删）
- 可以随便写，首页滚动图1”,主要是为了在后台管理时能区分。
- TAG标签：可以不填。
- 缩略图：这个不是滚动图的大图,可以留空或上传一张小图。
- 图集：这是最关键的一步！点击 “图集” 右边的 “增加一个图集” 按钮。
上传图片：
- 在弹出的图集上传窗口中，点击 “上传新图片” 或 “选择本地图片”。
- 选择你电脑上准备好的滚动图图片（建议尺寸统一，如 1920x500 像素）。
- 上传完成后,你可以在列表中看到图片。
- 设置图片描述和跳转链接（非常重要！）：
  - 鼠标悬停在图片上，会看到 “修改” 或 “编辑” 图标。
  - 点击编辑，在弹出的窗口中，你可以为这张图片填写：
    - ：图片的标题。
    - 图片描述：鼠标悬停在图片上时显示的文字。
    - 跳转网址：这是用户点击图片后要去的链接！ 可以是网站内的文章链接，也可以是外部链接（如 https://www.example.com）。
- 设置好所有图片后，点击窗口底部的 “保存” 按钮。
发布文档：
- 返回到添加文档页面，确保所有信息无误后，点击底部的 “发布” 或 “保存” 按钮。

第二步：在首页模板中调用图集

图片已经保存在后台了,我们需要在首页模板文件里把它调用出来显示出来。

找到首页模板文件：
（图片来源网络，侵删）
- 进入后台的 “模板” -> “模板管理”**。
- 在左侧选择你当前使用的模板风格。
- 找到并点击 “index.htm”（首页模板），然后点击 “修改”。
插入调用代码：
- 在模板文件中，找到你想要放置滚动图的位置（通常是 <head> 标签之后，<body> 内部的顶部）。
- 将以下代码复制并粘贴到该位置。
```
{dede:arclist typeid='你的栏目ID' row='5' titlelen='30'}
<li>
    <a href="[field:arcurl/]" target="_blank">
        <img src="[field:litpic/]" alt="[field:title/]" />
        <span>[field:title/]</span>
    </a>
</li>
{/dede:arclist}
```
代码解释和修改：
- typeid='你的栏目ID'：这是必须修改的地方！将 '你的栏目ID' 替换成你在第一步中创建的“首页焦点图”栏目的ID，你可以在后台“栏目管理”中查看每个栏目的ID。
- row='5'：表示调用5张图片，如果你的滚动图有8张，就改成 row='8'。
- [field:litpic/]：调用文章的缩略图，因为我们是在图集里上传的,织梦会自动将第一张图或你设置的缩略图作为这里显示的图片。
- [field:arcurl/]：调用文章的链接地址，因为我们为图集里的每张图片都设置了跳转链接,所以这里的链接会指向你设置的链接。
- [field:title/]：调用文章的标题，这里用作图片的 alt 属性和图片上方的文字说明。
添加必要的CSS和JS：
- 上面只是调出了图片列表，要让它变成可以滚动的效果，你还需要引入一个滚动图插件（如 jQuery Slick, Swiper, Bootstrap Carousel 等）的CSS和JS文件,并编写相应的HTML结构。
- 这部分稍微复杂，通常模板开发者会已经做好，你可以直接在模板里找到类似 {dede:include filename='head.htm'/} 这样的标签，确保 head.htm 文件里已经引入了滚动图所需的CSS和JS。
保存并更新首页：
- 修改完 index.htm 后，点击“保存”。
- 到后台的 “生成” -> “更新主页HTML”，点击“开始生成”,这样首页就会显示你新上传的滚动图了。

使用“自定义”模型（更灵活，适合链接到外部网址）

如果你的滚动图只是几张宣传图，链接都是外部网址，不想创建一堆“图集”文章,可以使用这种方法。

第一步：创建一个专门用于滚动图的栏目

进入后台 “核心” -> “频道模型” -> 模型管理”。
点击 “增加一个新模型”。
模型名称：填写“自定义滚动图”。
模型表前缀：保持默认，如 dede_addonarticle。
字段列表：点击下一步,进入字段管理。
添加新字段：
- 点击 “添加新字段”。
- 字段名称：picurl (小写,不能用大写)
- 字段类型：选择“多媒体”（图片类型）
- 字段说明：填写“滚动图地址”
- 保存。
- 再次点击 “添加新字段”。
- 字段名称：linkurl
- 字段类型：选择“单行文本”
- 字段说明：填写“跳转链接”
- 保存。
完成字段添加后，点击“保存”,这样你就创建了一个新的模型。
创建栏目：
- 进入 “栏目管理”。
- 点击“增加顶级栏目”。
- 栏目名称：首页轮播图”。
- 模型：选择你刚刚创建的“自定义滚动图”。
- 其他选项根据需要填写，确定”。

第二步：添加滚动图内容

像方法一一样，进入 “核心” -> “内容发布” -> “添加文档”。
选择你刚刚创建的“首页轮播图”栏目。
随便写一个，如“图一”。
在下方，你会看到新添加的字段：“滚动图地址”和“跳转链接”。
- 点击“滚动图地址”旁边的“上传”或“选择”按钮,上传你的图片。
- 在“跳转链接”输入框中,填写图片要跳转到的网址。
点击“发布”。
重复以上步骤,添加所有你需要的滚动图。

第三步：在首页模板中调用

调用这种自定义模型的图片，需要使用 {dede:sql} 或 {dede:arclist} 结合附加字段的方式，推荐使用 {dede:arclist}。

{dede:arclist typeid='你的自定义栏目ID' row='5' addfields='picurl,linkurl'}
<li>
    <a href="[field:linkurl/]" target="_blank">
        <img src="[field:picurl/]" alt="滚动图" />
    </a>
</li>
{/dede:arclist}

代码解释：

typeid='你的自定义栏目ID'：替换成你创建的“首页轮播图”栏目的ID。
addfields='picurl,linkurl'：关键！ 告诉织梦在查询时，除了默认字段，还要查询我们自定义的 picurl 和 linkurl 字段。
[field:picurl/]：调用我们上传的图片地址。
[field:linkurl/]：调用我们填写的跳转链接。

同样，你也需要为这个列表添加滚动图插件所需的CSS和JS结构,并更新首页。

总结与建议

特性	方法一 (图集)	方法二 (自定义模型)
优点	系统完美集成，管理规范，适合链接站内文章。	灵活，字段自定义，适合链接外部网址，无需创建“文章”。
缺点	如果只是几张外部链接图，会显得有些“重”，需要创建多个文章。	需要手动创建模型和字段，对新手稍复杂。
推荐场景	大多数情况，特别是滚动图内容是网站自己的文章时。	滚动图是固定的几张广告图，链接多为外部网址。

对于绝大多数用户，强烈推荐使用方法一（图集），因为它更符合织梦的设计理念,也更容易管理和维护。

希望这个详细的教程能帮助你成功上传并设置织梦的滚动图！如果在操作中遇到任何问题,可以随时提问。

织梦网页滚动图上传步骤是什么？