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

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

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

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

织梦首页banner图动态配置实现的一种方式_第1张图片

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

织梦首页banner图动态配置实现的一种方式_第2张图片

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

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

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

织梦首页banner图动态配置实现的一种方式_第3张图片

织梦首页banner图动态配置实现的一种方式_第4张图片

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

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

 织梦首页banner图动态配置实现的一种方式_第5张图片

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

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

调用单张图代码如下

{dede:arclist typeid='51' row='1'}
    
{/dede:arclist}

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

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

{dede:arclist typeid='51'}
{/dede:arclist}

 

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

你可能感兴趣的:(网站建设)