织梦如何调用自定义banner？

使用自定义模型（最推荐、最灵活）

这种方法适用于需要从后台管理多个banner图片、标题、链接等内容的场景，它创建了一个专门用于banner的“数据模型”，让你可以在后台像管理文章一样管理banner内容。

步骤 1：创建自定义模型

1. 登录织梦后台，进入【核心】 -> 【内容模型管理】。
2. 点击【增加新模型】。
3. 模型名称：填写 Banner 或 幻灯片。
4. 表前缀：保持默认的 dede_ 或系统自动生成的即可，dede_banner。
5. 字段列表：这是最关键的一步，点击【添加新字段】，为你的banner添加必要的字段：
   • 图片：字段名 img，数据类型选择 图片(上传)，用于存放banner的图片地址。
   • 链接：字段名 url，数据类型选择 单行文本，用于存放点击banner后跳转的网址。
   • 字段名 title，数据类型选择 单行文本，用于存放鼠标悬停时显示的标题。
   • 排序：字段名 sortrank，数据类型选择 数字，用于控制banner的显示顺序。
6. 填写完所有字段后,点击【保存】，模型创建成功。

步骤 2：创建自定义栏目

1. 进入【栏目】 -> 【添加栏目】。
2. 栏目名称：填写 Banner管理 或 首页幻灯片。
3. 栏目类型：选择【封面】。
4. ：选择你刚刚创建的 Banner模型。
5. 勾选【启用】。
6. 点击【确定】，这个栏目现在就成了一个专门用来存放banner数据的“仓库”。

步骤 3：在后台添加banner内容

1. 】 -> 【发布Banner内容】 (这里的“发布Banner内容”是你创建的栏目名称)。
2. 点击【增加新内容】。
3. 在发布页面,你会看到刚才为模型添加的字段（图片、链接、标题等）。
4. 上传或填写banner信息：
   • 图片：点击上传，选择你的banner图片。
   • 链接：输入目标网址，如 https://www.example.com。
   • 输入banner的标题。
   • 排序：填写一个数字，数字越小，显示越靠前，可以都填 0。
5. 点击【确定】发布，重复此步骤，添加所有你的banner。

步骤 4：在前台模板中调用banner

你的banner数据已经存放在数据库里了,接下来在前台模板（通常是 index.htm）中调用它们。

1. 打开你的首页模板文件 index.htm。
2. 在你希望显示banner的位置（<div id="banner-box">）添加以下代码：

<div id="banner-box">
    {dede:arclist typeid='你的Banner栏目ID' row='5' orderby='sortrank'}
        <a href="[field:url/]" title="[field:title/]">
            <img src="[field:img/]" alt="[field:title/]">
        </a>
    {/dede:arclist}
</div>

代码解释：

• typeid='你的Banner栏目ID'：这是核心参数，你需要将 '你的Banner栏目ID' 替换成你在【步骤2】中创建的“Banner管理”栏目的实际ID，你可以在【栏目管理】中查看每个栏目的ID。
• row='5'：表示调用5条banner记录，根据你的实际数量修改。
• orderby='sortrank'：按照我们设置的“排序”字段进行排序，确保banner按你设定的顺序显示。
• [field:url/]：调用当前banner的“链接”字段。
• [field:title/]：调用当前banner的“标题”字段。
• [field:img/]：调用当前banner的“图片”字段。

CSS样式补充：

为了让多个banner图片能以幻灯片的形式展示（而不是垂直堆叠），你需要添加一些CSS样式。

/* 在你的CSS文件中添加 */
#banner-box {
    position: relative;
    width: 100%; /* 或固定宽度，如 1200px */
    height: 400px; /* 或固定高度 */
    overflow: hidden;
}
#banner-box a {
    display: block; /* 让a标签充满父容器 */
    width: 100%;
    height: 100%;
}
#banner-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形，覆盖整个区域 */
}

直接在模板中调用（最简单、适用于少量静态图片）

如果你的网站banner是固定的,很少更换，或者不想通过后台管理，可以直接在模板中写死HTML代码。

1. 打开首页模板 index.htm。
2. 找到banner显示区域。
3. 直接写入HTML和图片路径。

<div id="banner-box">
    <a href="https://www.example.com/page1">
        <img src="/uploads/images/banner1.jpg" alt="第一个Banner">
    </a>
    <a href="https://www.example.com/page2">
        <img src="/uploads/images/banner2.jpg" alt="第二个Banner">
    </a>
</div>

优缺点：

• 优点：极其简单，无需任何后台配置。
• 缺点：每次更换banner图片或链接都需要修改模板文件，不够灵活，不便于非技术人员操作。

总结与建议

对于绝大多数网站,强烈推荐使用方法一（自定义模型），它虽然前期设置步骤多一些，但一旦搭建完成，后续的管理和维护会非常方便，完全符合CMS系统的设计理念。

希望这个详细的教程能帮到你！如果在操作过程中遇到任何问题，可以随时提问。