Drupal8.7.6默认主题下,使用内容类型+视图区块开发轮播图片时,轮播效果始终无法实现,或者费了很大的劲实现了,结果却不尽人意。白龙网研究发现,借助第三方模块ViewsSlideshow可以轻松实现文字、图片、视图等内容的轮播。
一、下载模块与依赖库
要实现轮播效果,需要ViewsSlideshow模块与libraries8.x-3.0-beta1模块配合使用。
1.ViewsSlideshow模块地址:
https://www.drupal.org/project/views_slideshow
2.libraries8.x-3.0-beta1模块地址:
https://www.drupal.org/project/libraries/releases/8.x-3.0-beta1
二、安装启用模块
为了兼容性,首先要确保Viewsslideshow模块、libraries8.x-3.0-beta1模块是8.X版本的,因为测试用的Drupal是8.7.6版本。
1.解压两个模块
分别解压viewsslideshow模块、Libraries模块至:/modules;
2.上传轮播插件
创建/libraries/jquery.cycle文件夹(用于放slideshow效果的js库,注意字母全部小写);到jQuerycycle插件页面(https://github.com/malsup/cycle/blob/master/jquery.cycle.all.js)下载jquery.cycle.all.js后,把jquery.cycle.all.js上传至/libraries/jquery.cycle/目录;
3.分别启用模块
在“管理->扩展”菜单下启用Viewsslideshow和ViewsSlideshow:Cycle模块;这样在views的FORMAT里就增加了一项“Slideshow”。
三、新建内容类型添加轮播字段
模块已经安装并成功启用,轮播插件已经上传完毕,接下来就要创建内容类型、增加数据源了。
1.新建内容类型
依次点击“管理–>结构–>内容类型–>添加内容类型”(admin/structure/types/add),添加一个“轮播图片”的内容类型:
名称是新建内容类型的名字,可以使用中文、英文、数字和空格,如果输入的是中文,需要手动编辑一下它的机读名称,机读名称必须由英文小写、数字或者下划线组成;
描述是让用户在添加内容的时候知道这是一个什么样的内容类型,选填即可。
2.添加图片字段
确认“轮播图片”内容类型需要图片字段,在内容类型列表页面里的管理字段”中,删除不需要的Body字段;接着添加一个图片字段,图片字段的配置依据个人需求选择。
3.上传轮播内容
在“轮播图片”内容类型中上传4篇文章,每篇文章是一张图片,为实现轮播图提供数据。
四、配置视图并输出轮播图
通过上面3步的操作,准备工作已经完毕,接下来就是输出轮播图片了。
1.新建视图区块
依次点击“管理–>结构–>Views–>Addnewview”(admin/structure/views/add),新建一个视图区块:
去掉“Createapage”前面的勾,勾选“Createablock”,这样就创建一个block类型的view。另外,如果打算通过views来创建一个page来放置这个轮播图片区块,也可以勾选“Createapage”,不过通常很少这样做。
2.配置轮播视图
点击“ContinueandSave”,保存并继续配置views;在format中点击“Unformattedlist”,在弹出的菜单中,把默认的Unformattedlist改为Slideshow,其他配置保持默认,保存即可;
3.删除轮播标题
由于需求是输出轮播图片,因此“内容:标题”字段可以删除;点击“内容:标题”,然后点击弹出层下的“移除”按钮,这个字段就删除了;
4.增加图片字段
在“Field”中添加所需的轮播图片字段,保存并去掉label,其它选择根据实际需要设置;保存之后,即可在当前views的底部看到一个轮播图片的预览效果了;
5.放置视图区块
保存这个views后,会生成一个viewsblock;然后到block布局页面,把这个轮播图片视图区块放置到指定的区域;重建缓存后,轮播图片效果就实现了。
此外,可以在field中添加一个“ Customtext”字段,来自定义目标网站的样式,然后通过覆写模板,实现多样化的更炫更酷的效果。