您现在的位置是:首页 > cms教程 > Discuz教程Discuz教程

Discuz添加自定义模板广告的方法

半梦2025-07-04Discuz教程已有人查阅

导读在做Discuz中广告的时候碰到个大问题,现在我需要做一个轮播的通屏广告位,调用广告图片的代码应该是以下代码:我需要把图片地址放在li的背景图片中,来适应所有显示器的宽度,让图片居中。

在做Discuz中广告的时候碰到个大问题,现在我需要做一个轮播的通屏广告位,调用广告图片的代码应该是以下代码:
<ul>
<li style="background:url(图片地址) no-repeat center top;"><a href="#"></a></li>
</ul>
我需要把图片地址放在li的背景图片中,来适应所有显示器的宽度,让图片居中。而且广告位中不能放置默认图片,还需要客户来添加广告图片。这种,那么使用默认的广告位模板代码就不能实现了。
按照DZ自带的广告位做法,从后台的广告位中添加自定义广告(运营->站点广告-> 添加自定义广告位 )在广告位中选择图片类型传入图片后,前台使用<!--{ad/custom_1}-->可以调用出刚才传的广告图片前台调用后的广告代码为:
<div style="float: left; width: 图片宽度px; ">
<a href="#" target="_blank"><img src="图片地址" height="350" border="0"></a>
</div>
之前的想法是改变DZ中自定义广告位的模板代码,找了很多文件,都没有找到对应的地方。后来高手给我提供了一个方法,完美解决了这个问题。
1、在后台中进入门户->模块模板,选择添加图片模块,提交
2、输入模板名称和模板代码
按照上面我需要的效果,我把代码改成了如下样式
<ul>
[loop]
<li style="background:url("{pic}") no-repeat center top;"><a href="{url}" target="_blank" alt="{title}"></a></li>
[/loop]
</ul>
在输入框上DZ提供了常用的标签,根据需要更改自己的模板代码,需要注意一点的是,之后插入图片的时候,图片的标题是必须输入的,如果没有输入会提示标题长度不正确。而添加位置需要输入什么内容是根据你调用了哪些标签决定的。所以为了不弹出标题报错,我们必须需要加入{title}标签。
3、点击提交之后我就建好了一个自定义的模块模板,在列表中可以看到我们刚才添加的模板。
接下来就是要调用这个模板了,进入门户->模块管理,选择数据调用。在模块分类中选择图片模块,点击添加调用。在弹出的编辑模块窗口中按照你的需要填写相关内容,需要注意的是显示样式这一项要选择刚才新建好的模板名称,点击确定。
4、新建好后在模块列表中就会显示出刚才新增的模块,添加图片点击右边的数据,在弹出的模块数据中选择添加,按照提示加入你的图片就可以了。
5、到这一步广告模板已经建立好了,接下来我们就需要把广告放到页面中了。
调用方法是点击模块列表中该模块右边的内部调用/外部调用,把代码放到htm文件对应的地方就大功告成了!

本文标签:

很赞哦! ()

相关源码

  • (PC+WAP)蓝色钢材加工建筑装修施工材料网站模板下载为钢材加工企业设计的PbootCMS响应式模板,采用PC+WAP双端适配技术,数据实时同步。简洁大气的蓝色工业风格设计,突出钢材加工行业特性,其他制造业用户更换图文内容即可快速应用。查看源码
  • (PC+WAP)压缩机离心风机红色机械设备营销型网站pbootcms模板基于PbootCMS开发的压缩机/离心风机专用模板,助力机械设备企业构建高效营销平台;模板可编辑压缩机参数表、风机性能曲线等专业展示模块查看源码
  • (自适应)绿色农业机械设备农场网站源码下载为现代农业机械领域打造的响应式网站模板,采用PbootCMS内核开发,数据实时同步后台管理。通过简洁大气的视觉设计,有效展示农机产品技术参数与应用场景,帮助客户快速建立专业数字化形象。查看源码
  • (自适应)WordPress主题SEO自媒体博客资讯模板RabbitV2.0Rabbit v2.0主题专注于网站搜索引擎优化需求,为博客、自媒体及资讯类网站提供专业的SEO技术解决方案。该主题从架构设计到功能实现均围绕搜索引擎优化理念展开。查看源码
  • (自适应)蓝色沙盘复古建筑模型制作网站模板源码下载为建筑沙盘模型企业设计的响应式网站模板,通过三维空间展示技术结合产品参数可视化,有效提升模型作品的线上呈现效果与客户咨询转化率。查看源码
  • (自适应)营销型健身器材产品设备类pbootcms模板网站为健身器材企业打造的营销型网站模板,基于PbootCMS开源内核开发。采用HTML5响应式架构,PC与移动端数据实时同步,适配多终端展示场景。查看源码
分享笔记 (共有 篇笔记)
验证码:

本栏推荐