JavaScript 未在 Drupal 中加载 (8)

Question

我正在 Drupal 中创建我的第一个站点（将现有站点转换为 Drupal 8 CMS）。

我已经加载了 CSS 和脚本库。 CSS 工作正常，但脚本文件不工作。我不确定是脚本文件未加载还是 jQuery 未加载 - 或两者兼而有之。

我是不是做错了什么？

这是调用 .info 文件中的库的代码：

libraries:
  - saq7704/global-styles
  - saq7704/global-scripts

这是库文件中的代码：

global-styles:
  version: 1.x
  css:
    theme:
      css/styles.css: {}

global-scripts:
  version: 1.x
  js: 
    js/scripts.js: {}
    js/responsiveTabs.js: {}
  dependencies:
    - core/jquery

Answer 1

我想知道 CSS 正在加载。因为您必须将您的库显式附加到某个渲染数组（元素、节点、页面等）。在模块的信息文件中声明它们根本不应该做任何事情。

查看Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 module 上的文档。

要在每个页面上加载你的库，你必须使用hook_page_attachments：

<?php

/**
 * Implements hook_page_attachments().
 */
function MYMODULE_page_attachments(array &$attachments) {

  $attachments['#attached']['library'][] = 'saq7704/global-styles';
  $attachments['#attached']['library'][] = 'saq7704/global-scripts';

  // Also have a look at this gem.
  // If you've written your JS file the right way you now could do
  // <code>console.log(settings.MYMODULE.foo);</code> in your JS
  // and guess what it will print ;)
  $attachments['#attached']['drupalSettings']['MYMODULE']['foo'] = 'bar';
}

阅读如何以正确的方式编写 Drupal JS 文件： JavaScript API overview（注意Drupal.behaviors、context 和settings）。那么你的*.libraries.yml 应该看起来像：

global-scripts:
  version: 1.x
  js: 
    js/scripts.js: {}
    js/responsiveTabs.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupalSettings