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

最近在做一些推广站点，首页需要配置一些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使用织梦文档中的缩略图实现。