Drupal8.7.6自定义主题动态交互效果失效的解决技巧

  用drupal8.7.6开发自定义主题时,静态页中Css、Javascript导入drupal的库文件是必然会遇到的操作之一。下面,白龙网为大家分享一个相关案例及其解决方案。
 
  Css、Javascript通过drupal指定的info.yml文件加载,前端页面解析后,源代码中正常显示了所有Css、Javascript文件,但是前端页面中的轮播图片不能轮播,Tab切换按钮不能切换,即所有使用Javascript实现的动态交互效果都失效了。
 
  变通了下,直接把所有的Css、Javascript文件放到模板文件中,前端页面解析后,轮播图片可以正常轮播,Tab切换按钮可以正常切换了,即所有使用Javascript实现的动态交互效果都正常了。但是,这种玩法是不规范的,一般Css、Javascript文件都是要通过drupal指定的info.yml文件加载的。
 
  基于上述问题,结合审查元素时控制台的Javascript报错提示,基本可以断定是jquery没有加载成功;然后,检查了失去交互效果的轮播图片、Tab切换按钮代码,发现两个模块中都有jquery的调用,而源代码中jquery组件被drupal放到了代码最后、</body>之前。即:轮播图片、Tab切换按钮中的jquery调用在前,而jquery组件及其相关变量的定义在后。
 
  根据程序先定义变量、后使用变量的规则(顺序执行),上述案例中轮播图片、Tab切换按钮中的jquery调用是调用不到jquery组件定义的相关功能的,因为jquery组件在代码最后面,这是轮播图片、Tab切换按钮失去交互效果的根本原因。
 
  找到了原因,解决方案自然就出来了。把轮播图片、Tab切换按钮模块中的Javascript代码提取出来,放到外部的out.js文件中,然后把out.js文件放到jquery.js的后面即可。
 
  另外,模板中的样式提取到外部文件中时,需要去掉<styletype="text/css"></style>;模板中的JS提取到外部文件中时,需要去掉<scripttype="text/javascript"></script>。当Head中布局CSS,body中布局JS时,要按照以下规范去操作,规避异常错误发生。
 
  <head>
 
  <!--组件css-->
 
  <!--自定义css-->
 
  </head>
 
  <body>
 
  <!--组件js-->
 
  <!--自定义js-->
 
  </body>