dede 幻灯片设置-DEDE建站-盈思创科技

第一步：理解 DedeCMS 幻灯片的原理

DedeCMS 的幻灯片功能并不是直接在编辑文章时勾选一个“设为幻灯片”选项,它的核心原理是：

（图片来源网络，侵删）

创建一个专门的模型：你需要创建一个“幻灯片”专用的内容模型，这个模型可以包含标题、图片、链接地址等字段。
创建一个专门的栏目：创建一个用于存放所有幻灯片内容的栏目,并将上一步创建的模型应用到这个栏目上。
添加幻灯片内容：在这个专门的栏目里，添加你想要展示的幻灯片条目（每一条就是一个幻灯片）。
调用标签：在首页模板（或其他页面模板）中，使用 DedeCMS 提供的特定调用标签 {dede:arclist}，并加上幻灯片专用的属性,来将这些内容以幻灯片的形式展示出来。

第二步：创建幻灯片内容模型

这是最关键的一步,它定义了你的幻灯片可以包含哪些信息。

登录后台：用管理员账号登录你的 DedeCMS 后台。
进入频道模型：在左侧菜单栏中，找到并点击 “频道模型” -> “内容模型管理”。
添加新模型：点击右上角的 模型” 按钮。
（图片来源网络，侵删）
填写模型信息：
- 模型名称：填写一个你容易识别的名字，幻灯片 或 focus。
- 模型表前缀：系统会自动生成一个，如 dede_addonfocus,一般不需要修改。
- 模型描述：简单描述一下这个模型的用途，如 “用于首页幻灯片展示”。
- 字段目录：保持默认即可。
- 列表附加字段：暂时留空。
设置字段：这是核心部分，点击 “字段管理” 标签页，然后点击 “添加新字段”。我们需要为幻灯片添加几个基本字段：
- 字段1：图片地址
  - 字段名：imgurl (必须小写,且不能与系统默认字段冲突)
  - ：图片地址
  - 字段类型：多媒体(图片)
  - 其他选项：保持默认，确保“允许为空”是勾选的。
- 字段2：跳转链接
  - 字段名：linkurl
  - ：跳转链接
  - 字段类型：单行文本
  - 其他选项：保持默认，确保“允许为空”是勾选的。
- 字段3：标题
  - title (这个字段通常系统自带，如果没有，可以按上述方法添加，类型为单行文本)
操作：添加完所有需要的字段后，点击页面底部的 “保存” 或 “确定” 按钮。
生成模型：模型创建成功后，系统会提示你“是否生成模型”，点击 “是”，这一步会更新数据库结构,非常重要。
（图片来源网络，侵删）

第三步：创建幻灯片专用栏目

现在我们需要一个地方来存放这些幻灯片内容。

进入栏目管理：在后台左侧菜单，点击 “栏目管理”。
添加顶级栏目：点击右上角的 “添加顶级栏目”。
填写栏目信息：
- 栏目名称：填写 首页幻灯片 或 Focus。
- 栏目目录：填写 focus (小写，不能是中文或特殊符号)。
- 模型：这是关键！ 从下拉菜单中选择你刚刚创建的 “幻灯片” 模型。
- 栏目列表选项：其他选项可以保持默认或根据需要设置。
保存栏目：点击 “确定” 保存。

第四步：添加幻灯片内容

栏目和模型都准备好了,现在可以添加具体的幻灯片了。

管理：在后台左侧菜单，点击 管理” -> “添加文档”。
选择栏目：在添加文档页面，你会看到“选择栏目”部分，点击你刚刚创建的 “首页幻灯片” 栏目。
：
- 输入幻灯片的标题，“网站首页重磅上线”。
- 缩略图：点击上传按钮，选择你准备好的幻灯片图片。注意：这里上传的图片会自动同步到你之前设置的 imgurl 字段中，如果你的模型没有缩略图字段，就需要手动在下方的“自定义字段”部分填写 imgurl 的值。
- 自定义字段：在页面下方找到你自定义的字段（如 imgurl, linkurl）。
  - imgurl：如果上面没自动填，就手动填写图片地址（可以是相对路径或绝对URL）。
  - linkurl：填写这个幻灯片点击后要跳转的网址，https://www.yoursite.com/news/1.html。
生成HTML：填写完毕后，点击 “确定” 保存，系统会提示你“是否生成HTML”，点击 “是”。

重复此步骤,添加所有你想要展示的幻灯片。

第五步：在首页模板中调用幻灯片

最后一步,将我们添加好的幻灯片内容显示在首页上。

找到首页模板：通过 FTP 或主机文件管理器，进入 DedeCMS 的模板目录 templets/default/，找到你的首页模板文件，通常是 index.htm。
添加调用代码：在你希望显示幻灯片的位置（通常是页面顶部）,插入以下代码：

<!-- 幻灯片调用开始 -->
<div id="focusBox">
    <div class="pic">
        <ul>
            {dede:arclist typeid='你的幻灯片栏目ID' row='5' titlelen='30'}
            <li>
                <a href="[field:linkurl/]" target="_blank">
                    <img src="[field:imgurl/]" alt="[field:title/]" />
                </a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="text">
        <ul>
            {dede:arclist typeid='你的幻灯片栏目ID' row='5' titlelen='30'}
            <li>
                <a href="[field:linkurl/]" target="_blank">[field:title/]</a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="num">
        <ul>
            {dede:arclist typeid='你的幻灯片栏目ID' row='5' titlelen='30'}
            <li><a href="[field:linkurl/]" target="_blank">[field:global.autoindex/]</a></li>
            {/dede:arclist}
        </ul>
    </div>
</div>
<!-- 幻灯片调用结束 -->

代码解释：

typeid='你的幻灯片栏目ID'：这是最重要的属性，你需要将 '你的幻灯片栏目ID' 替换成你创建的“首页幻灯片”栏目的实际 ID，你可以在“栏目管理”中鼠标悬停在栏目名称上查看链接，或直接在数据库 dede_arctype 表中查找。
row='5'：表示调用 5 条幻灯片内容,根据你的需要修改。
[field:imgurl/]：调用自定义的 imgurl 字段,即图片地址。
[field:linkurl/]：调用自定义的 linkurl 字段,即跳转链接。
[field:title/]：调用文章标题。
[field:global.autoindex/]：用于生成序号 (1, 2, 3...),常用于制作幻灯片的数字按钮。

添加 CSS 和 JavaScript：幻灯片效果（如自动轮播、切换动画）需要 CSS 样式和 JavaScript 来实现，你需要准备好幻灯片插件的 CSS 和 JS 文件，并在 index.htm 的 <head> 部分引入它们,并编写相应的样式。

第六步：常见问题与解决方法

问题：调用出来的幻灯片图片不显示。
- 原因：
  1. typeid 写错了。
  2. imgurl 字段没有填写正确的图片路径。
  3. 图片路径是相对路径,但模板位置和图片位置不匹配。
- 解决：仔细检查 typeid 和 imgurl 的值，建议图片使用绝对路径（如 /uploads/images/xxx.jpg）。
问题：幻灯片没有样式,就是一堆图片堆在一起。
- 原因：没有引入 CSS 样式文件，或者 CSS 样式写错了。
- 解决：确保在 <head> 中正确引入了幻灯片组件的 CSS 文件，并检查 CSS 选择器是否与 HTML 结构匹配。
问题：点击幻灯片没有反应,或者跳转错误。
- 原因：linkurl 字段为空,或者填写了错误的链接地址。
- 解决：回到后台的“内容管理”，检查每条幻灯片条目的 linkurl 字段是否填写正确。
问题：想用更简单的办法,不想创建模型和栏目。
- 替代方案：如果你的幻灯片数量很少，且不常更换，可以考虑直接在模板里写死 HTML 和图片链接，但这不符合 DedeCMS 的设计理念,不利于后期维护和更新。

设置 DedeCMS 幻灯片是一个系统性的工作，主要分为 “后台准备” 和 “前端调用” 两大部分。

后台准备：创建模型 -> 创建栏目 -> 添加内容。
前端调用：在模板中使用 {dede:arclist} 标签调用内容，并配合 CSS/JS 实现效果。

虽然步骤看起来多一些，但一旦设置完成，后续管理起来会非常方便，你只需要在后台的“首页幻灯片”栏目里添加或修改内容,首页的幻灯片就会自动更新。

dede 幻灯片设置