dede如何添加对联广告？-DEDE建站-盈思创科技

在后台添加广告内容
修改模板文件，调用广告
修改 CSS 样式，实现对联效果

下面我将为你提供详细的图文步骤说明，并附上代码示例,确保你能够顺利完成。

（图片来源网络，侵删）

第一步：在 DedeCMS 后台添加广告

登录后台：使用你的管理员账号登录 DedeCMS 后台。
进入广告管理：在左侧菜单栏中，找到 【核心】 -> 【广告管理】 -> 【广告计划】,点击进入。
添加新广告：点击右上角的 [增加新广告计划] 按钮。
填写广告信息：
（图片来源网络，侵删）
- 广告名称：给广告起一个易于识别的名字，首页对联广告。
- 广告位标识：这里非常重要！这是在模板中调用广告的“钥匙”，我们通常使用 dede_ad_index_left 和 dede_ad_index_right，你需要分别创建两个广告计划，一个给左边，一个给右边。
  - 左侧广告：广告位标识填写 dede_ad_index_left
  - 右侧广告：广告位标识填写 dede_ad_index_right
- ：在这里粘贴你的广告代码，这通常是 JavaScript 代码，或者是 <a> 和 <img> 标签组合的 HTML 代码。
  - 示例代码（图片链接）：
```
<a href="https://www.example.com" target="_blank">
    <img src="/uploads/ad/left_ad.jpg" alt="示例广告" width="120" height="300" />
</a>
```
  - 示例代码（JS代码）：
```
<script type="text/javascript" src="/ad/js/left_ad.js"></script>
```
- 广告类型：根据你的广告内容选择，通常是 代码。
- 有效期：设置广告的展示时间。
- 启用状态：务必勾选 [是],否则广告不会显示。
保存：填写完毕后，点击底部的 [保存] 按钮，重复此步骤，创建右侧的广告计划（广告位标识为 dede_ad_index_right）。

你的广告已经成功添加到数据库中了。

第二步：修改模板文件调用广告

我们需要在网站的首页模板文件中，加入调用广告的代码，DedeCMS 的首页模板通常是 index.htm。

找到模板文件：通过 FTP 或你的主机控制面板，进入网站根目录下的 /templets/default/ 文件夹，找到 index.htm 文件。
编辑模板：用 Dreamweaver、VS Code 等代码编辑器打开 index.htm。
插入调用代码：在 <head> 标签内，加入 CSS 样式（这是为了让广告绝对定位，不占用页面空间），然后在 <body> 标签内的合适位置（通常是顶部，</head> 之后）插入调用广告的代码。

完整的代码修改示例：

（图片来源网络，侵删）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:global.cfg_webname/}</title>
    ... 其他 head 内容 ...
    <!-- 在这里添加对联广告的 CSS 样式 -->
    <style type="text/css">
        /* 对联广告容器样式 */
        .couplet-ad {
            position: fixed; /* 固定定位 */
            top: 100px;     /* 距离顶部的距离 */
            z-index: 9999;  /* 确保广告在最上层 */
            width: 100px;   /* 设置广告宽度 */
            height: 300px;  /* 设置广告高度 */
        }
        .couplet-ad-left {
            left: 0;        /* 左侧广告靠左显示 */
        }
        .couplet-ad-right {
            right: 0;       /* 右侧广告靠右显示 */
        }
        /* 鼠标悬停时关闭按钮显示 */
        .couplet-ad-close {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            background: #333;
            color: #fff;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            font-size: 12px;
        }
        .couplet-ad:hover .couplet-ad-close {
            display: block;
        }
    </style>
</head>
<body>
    ... 网站其他内容 ...
    <!-- 在这里插入调用广告的代码 -->
    <!-- 左侧对联广告 -->
    {dede:myad name='dede_ad_index_left'/}
    <!-- 右侧对联广告 -->
    {dede:myad name='dede_ad_index_right'/}
    ... 网站其他内容，{dede:include filename="head.htm"/} ...
    <!-- 为了让广告能正确应用样式，我们需要在模板中给广告包裹一个 div -->
    <!-- 这一步通常需要手动修改，因为 {dede:myad} 标签直接输出的是广告内容 -->
    <!-- 更好的做法是修改 include/taglib/myad.lib.php 文件，但为了简单，我们直接在模板里处理 -->
    <!-- 如果你的广告代码是JS，可能不需要这个div，但如果是HTML，推荐加上 -->
    <!-- 你可以尝试直接使用 {dede:myad}，如果样式不对，就需要手动处理 -->
    <!-- 手动处理方式：将 {dede:myad} 输出的代码复制出来，用下面的 div 包裹 -->
    <!--
    <div class="couplet-ad couplet-ad-left">
        <div class="couplet-ad-close">X</div>
        这里放左侧广告的HTML代码
    </div>
    <div class="couplet-ad couplet-ad-right">
        <div class="couplet-ad-close">X</div>
        这里放右侧广告的HTML代码
    </div>
    -->
    <!-- 一个更简单直接的调用方式，并应用样式 -->
    <!-- 左侧广告 -->
    <div class="couplet-ad couplet-ad-left">
        <div class="couplet-ad-close">X</div>
        {dede:myad name='dede_ad_index_left'/}
    </div>
    <!-- 右侧广告 -->
    <div class="couplet-ad couplet-ad-right">
        <div class="couplet-ad-close">X</div>
        {dede:myad name='dede_ad_index_right'/}
    </div>
    <!-- 添加关闭广告的 JavaScript -->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var closeButtons = document.querySelectorAll('.couplet-ad-close');
            closeButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    this.parentElement.style.display = 'none';
                });
            });
        });
    </script>
    ... 网站底部内容 ...
</body>
</html>

代码解释：

CSS 部分：
- position: fixed;：这是实现对联效果的核心，它会让广告相对于浏览器窗口固定,不会随页面滚动而移动。
- top: 100px;：控制广告距离顶部的位置,你可以根据需要调整。
- left: 0; 和 right: 0;：分别让左右两个广告贴在屏幕的左右边缘。
- z-index: 9999;：设置一个很高的层级,确保广告显示在页面所有内容之上。
- .couplet-ad-close 和 hover：实现了鼠标移到广告上时显示关闭按钮的功能。
HTML 部分：
- {dede:myad name='dede_ad_index_left'}：这是 DedeCMS 的广告调用标签，name 属性的值要和你在后台设置的“广告位标识”完全一致。
- 我们用 <div class="couplet-ad couplet-ad-left">> 把广告包裹起来，这样我们之前写的 CSS 样式才能应用上去。
JavaScript 部分：
- 这段代码为每个关闭按钮添加了点击事件，点击后，它会找到它的父元素（即整个广告容器），并将其 display 属性设置为 none,从而实现关闭效果。

第三步：更新并测试

保存模板文件：保存你修改过的 index.htm 文件，并使用 FTP 上传回服务器覆盖原文件。
更新主页：登录 DedeCMS 后台，进入 【生成】 -> 【主页更新】，点击 “更新主页” 按钮，这一步非常重要，DedeCMS 需要重新解析模板文件才能显示新的内容。
清空缓存：如果广告仍然没有显示，可以尝试在后台的 【系统】 -> 【系统基本参数】 -> 【性能选项】 中,清空所有缓存。
访问网站：现在访问你的网站首页，应该就能看到左右两侧的对联广告了,并且鼠标移上去可以关闭。

高级技巧与注意事项

智能关闭：上面的 JS 代码实现了点击关闭，你还可以通过 localStorage 来记录用户是否关闭过广告,这样用户刷新页面后广告也不会再出现。

响应式设计：在移动设备上，对联广告会严重影响用户体验，最好在 CSS 中加入媒体查询，让它在小屏幕上自动隐藏。

/* 在你的 CSS 末尾添加 */
@media screen and (max-width: 768px) {
    .couplet-ad {
        display: none !important; /* 在移动设备上强制隐藏 */
    }
}

广告代码问题：如果广告是 JS 调用的，它内部可能也包含了 position 样式，可能会与你添加的 div 冲突，如果发现样式错乱，可以尝试不包裹 div，直接让 JS 广告自己定位，或者检查 JS 代码,看是否能覆盖其样式。
修改核心文件（不推荐新手）：{dede:myad} 标签会自带一些 div 或 p 标签，导致样式应用困难，你可以修改 /include/taglib/myad.lib.php 文件，找到 $normbody = "<div class=\"".$adname."\">".$adbody."</div>"; 这一行，将其修改为 $normbody = $adbody; 来去除默认的 div,但操作前务必备份原文件。

按照以上步骤，你就可以成功为你的 DedeCMS 网站添加一个功能完善、体验良好的对联广告了。

dede如何添加对联广告？

第一步：在 DedeCMS 后台添加广告

第二步：修改模板文件调用广告

第三步：更新并测试

高级技巧与注意事项

相关文章

目录[+]