时间戳

首页 > 解决方案 > JavaScript 未在 Drupal 中加载 (8)

javascript - JavaScript 未在 Drupal 中加载 (8)

问题描述

我在 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

标签： javascriptjquerydrupallibraries

解决方案

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

查看有关将样式表 (CSS) 和 JavaScript (JS) 添加到 Drupal 8 模块的文档。

要将您的库加载到您必须使用的每个页面上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 概述（注意Drupal.behaviors和）。那么你应该更好地看起来像：contextsettings*.libraries.yml

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

推荐阅读