织梦首页banner图动态配置实现的一种方式

2020-06-24

最近在做一些推广站点,首页需要配置一些banner,功能要求后台可以动态配置。

最初是用广告模块实现的,但是每次加新的banner的时候,就需要重新修改index.htm。对于不懂代码的管理员来说,不是很人性化。所以重新找了实现方式。虽然不是很完美,但是还是实现了。

1、后台创建一个轮播图的内容模型

新增一个字段:链接地址(url) 

2、后台创建一个轮播图的栏目和子栏目

栏目采用刚才创建的轮播图的内容模型,选择隐藏栏目,高级选项中的各个模板改为默认的article对应的模板(不然新增文档时会提示找不到模板) 。

如果需要归类的轮播图多的话,可以增加子栏目,细分到各个地方的栏目,比如首页轮播图、右侧轮播图等等。

3、在轮播图栏目下新增轮播图的文档

上传的缩略图就是我们之后要用到的banner

 

4、修改index.htm文件,编写调用轮播图的代码

代码用的就是普通的织梦article标签,逻辑也比较简单。

调用单张图代码如下

{dede:arclist typeid='51' row='1'}    <a href="[field:litpic/]" target="_blank"><img src="[field:litpic/]" /></a>{/dede:arclist}

 如果要是轮播的话,则要用一些轮播插件。我们用的是swiper这个插件,使用文档:https://www.swiper.com.cn/usage/index.html

循环调用轮播图的html代码如下:

<div class="swiper-container">
	<div class="swiper-wrapper">
		{dede:arclist typeid='51'}		<div class="swiper-slide">
			<a href="[field:url/]" target="_blank"><img src="[field:litpic/]" /></a>
		</div>
		{/dede:arclist}	</div>

	<!-- 如果需要导航按钮 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div></div>


总结:整体思路是用织梦现有的栏目、内容模型、文档组成的。banner使用织梦文档中的缩略图实现。


上一篇: 26年风雨兼程,北斗卫星导航系统背后的非凡和不易

下一篇: 关于美股搜索引擎——Elastic第三篇

版权所有 2018-2020

备案号:皖ICP备18025011号-2