在drupal9环境下,白龙网之前曾使用过内容类型+VIEW视图、引入bootstrap框架等方法开发轮播图,具体可翻阅《Drupal8.7.6:使用ViewsSlideshow模块开发轮播图片》。今天,给大家分享下如何使用bootstrap_barrio主题+Bootstrap_simple_carousel模块快速开发轮播图。
一、配置bootstrap_barrio主题
bootstrap_barrio是drupal9的一个主题,自带bootstrap框架,可以辅助一些依赖bootstrap的drupal模块实现对应特效。
1、到drupal官网下载bootstrap_barrio_5.5.4主题,或者复制该主题的链接地址。
2、通过“管理->扩展->安装新模块”或者“管理->外观->安装新主题”任意一种方法安装bootstrap_barrio_5.5.4主题。
3、然后,在“管理->外观”中就可以看到bootstrap_barrio_5.5.4的图标了,并且在本地/htdocs/themes/目录下也出现了bootstrap_barrio主题文件夹,说明bootstrap_barrio安装成功。
4、在“管理->外观”中找到bootstrap_barrio图标,点击“安装并设置为默认主题”。
至此,bootstrap_barrio主题安装成功,并成为drupal的默认主题。即:实现轮播图效果的环境已经搭建成功了。可以打开前端页面体验下。
二、配置bootstrap_simple_carousel模块
bootstrap_simple_carousel是依赖于bootstrap的轮播图模块,安装启用之后以区块的形式存在于drupal系统中。
1、到drupal官网下载bootstrap_simple_carousel模块或者复制模块的链接地址,在“管理->扩展”中安装并启用bootstrap_simple_carousel;然后,bootstrap_simple_carousel会以实体类型的形式出现在“管理->结构”中。
2、通过“管理->扩展”或者“管理->配置”找到bootstrap_simple_carousel,点击配置/设置,命名“Interval”,勾选、Wrap、Pause_on_hover、Indicators、Controls、Assets,配置Bootstrap_image_type、Imagestyle。
3、在“管理->结构”中打开Bootstrap_simple_carousel_items,点击“Add_element”按钮,分别添加轮播图需要的图片,并配置好图片的标题、描述、链接、状态、权重等信息;需要说明的是,这里新建的Bootstrap_simple_carousel_items项目是一个区块,可以放置到twig模板的任意区域。
4、把Bootstrap_simple_carousel_items区块放到“管理->结构->区块布局”中指定的区域。
重建缓存后,该轮播区块就可以打印到前端了。