javascript - 在 Drupal 8 中附加或包含一个 js 文件

Question

$description = $this->t('See the <a onclick="drup()">drupal</a> for options.');    

在上面的代码中，drup() 是一个来自 js 文件 drupaljs.js 的 javascript 函数。如何在 drupal 8 模块中包含或附加 js 文件。

以下是代码的目录层次结构:drupal/core/modules/config_translation/src/FormElement/func.module

Answer 1

与Drupal 7相比，Drupal 8只增加了页面需要的javascript。这意味着例如 jQuery 不再自动加载到所有页面上。

要将自定义 javascript 添加到页面，现在有三个不同的步骤:

1. 将 CSS 或 JS 保存到文件中。
2. 定义一个“库”，它可以包含 CSS 和 JS 文件。
3. 将库“附加”到 Hook 中的渲染数组。

要定义一个库，您必须在您的模块中创建一个 *.librairies.yml，其中 * 是您的模块的名称。那么你应该有类似的东西:

cuddly-slider:
version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

正如我所说，jquery 并不总是加载到每个页面上，这意味着如果您需要使用 jQuery，您必须使用 dependencies 键告诉 Drupal 您的库需要它。

根据您需要加载的 Assets ，您需要以不同的方式附加相应的 Assets 库。您可以使用多个 Hook 来加载您的库。如果你想让它加载到某些页面上，你可以使用 hook_page_attachments()。

<?php
function contextual_page_attachments(array &$page) {
  if (!\Drupal::currentUser()->hasPermission('access contextual links')) {
    return;
  }

  $page['#attached']['library'][] = 'contextual/drupal.contextual-links';
}
?>

将其附加到 Twig 模板:

{{ attach_library('contextual/drupal.contextual-links') }}

这里是关于如何以编程方式附加 js 文件的完整文档:https://www.drupal.org/developing/api/8/assets