Drupal 10手动加载OwlCarousel2库失败求助（不使用官方模块）

问题说明 #

在Drupal 10站点中手动加载OwlCarousel2库（未使用官方模块），完成配置后轮播功能无法正常生效。

已完成操作 #

1. mytheme.libraries.yml配置 #

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
owlcarousel2:
  css:
    theme:
      /libraries/OwlCarousel2/dist/assets/owl.carousel.min.css: {}
      /libraries/OwlCarousel2/dist/assets/owl.theme.default.min.css: {}
  js:
    /libraries/OwlCarousel2/dist/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

2. global.js代码 #

/**
 * @file
 * Global utilities.
 *
 */
(function ($) {
/**
* @file
* Javascript, modifications of DOM.
*
* Manipulates links to include jquery load funciton
*/

Drupal.behaviors.mytheme = {
  attach: function (context, settings) {
      
  $(document).ready(function() {
    
    // Instantiate OwlCarousel2 plugin 
    $(".owl-carousel").owlCarousel();
    
  });
  
  }
}

}(jQuery));

3. HTML结构 #

<div class="owl-carousel">
  <div> My Content </div>
  <div> My Content </div>
  <div> My Content </div>
  <div> My Content </div>
</div>

问题排查与解决方法 #

1. 库依赖与加载顺序问题 #

原因：global-styling未依赖owlcarousel2，导致global.js可能在OwlCarousel2的JS之前加载，调用owlCarousel()时插件未定义。

解决：修改mytheme.libraries.yml，给global-styling添加owlcarousel2依赖，确保库先加载：

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
  dependencies:
    - mytheme/owlcarousel2  # 添加此依赖

owlcarousel2:
  css:
    theme:
      /libraries/OwlCarousel2/dist/assets/owl.carousel.min.css: {}
      /libraries/OwlCarousel2/dist/assets/owl.theme.default.min.css: {}
  js:
    /libraries/OwlCarousel2/dist/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

2. Drupal Behaviors写法错误 #

原因：在attach方法内嵌套$(document).ready是冗余的（Drupal Behaviors的attach本身会在DOM就绪和AJAX加载后触发），且未限制作用域，可能导致重复初始化或初始化时机错误。

解决：修正global.js，使用once()确保元素只初始化一次，并基于context限制选择器：

/**
 * @file
 * Global utilities.
 */
(function ($) {

Drupal.behaviors.mythemeOwlCarousel = {
  attach: function (context, settings) {
    // 针对当前context内的.owl-carousel元素，仅初始化一次
    $(".owl-carousel", context).once('owlCarouselInit').owlCarousel({
      // 可添加轮播配置选项，根据需求调整
      items: 1,
      loop: true,
      margin: 10,
      nav: true
    });
  }
};

}(jQuery));

3. 库文件路径验证 #

原因：如果/libraries/OwlCarousel2/路径不正确，会导致资源加载失败（浏览器Network标签出现404错误）。

解决：

• 确认站点根目录下存在libraries/OwlCarousel2/dist/文件夹，且包含owl.carousel.min.js、owl.carousel.min.css、owl.theme.default.min.css文件。
• 若OwlCarousel2放在主题内的libraries文件夹，路径需改为libraries/OwlCarousel2/...（去掉开头的斜杠）。

4. 清除Drupal缓存 #

原因：Drupal会缓存库配置和聚合后的JS/CSS，修改文件后缓存未更新会导致修改不生效。

解决：

• 后台操作：进入配置 > 性能 > 清除所有缓存。
• 命令行操作：执行drush cr（需安装Drush）。

内容的提问来源于stack exchange，提问作者cnario