首页 > 快速免费建站 > drupal > Drupal8.7.6:使用ViewsSlideshow模块开发轮播图片

Drupal8.7.6:使用ViewsSlideshow模块开发轮播图片

  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”字段,来自定义目标网站的样式,然后通过覆写模板,实现多样化的更炫更酷的效果。