跳转到主要内容
长风 提交于 3 October 2018

翻译者:长风Drupal开发

翻译地址:长风http://www.5188jxt.com/technology/drupal8-include-javascript.html

原文链接:https://www.drupal.org/docs/8/api/javascript-api/add-javascript-to-your-theme-or-module

一、Drupal8引用JavaScript的前提

有一个在Drupal8中可以正常运行的模块或者主题。

二、Drupal8引用JavaScript基本步骤

这里有两个基本步骤向你的drupal8主题或者drupal8模块来添加Javascript  1、定义一个library 2、添加这个library到一个实体

 

1、定义一个library 在Drupal8主题或者Drupal8模块的根目录创建一个*.libraries.yml的文件,例如example.libraries.yml,内容如下: example: version: 1.x js: js/example.js: {}

备注: 1、根元素exmple通常是模块或者主题的名字,也可以是你想用的其他任何名字, 2、定义library的版本 3、使用js元素 引用JavaScript 4、在JavaScript后面的{}中,你可以定义一些属性,例如 external:bool(告诉Drupal8这个js是不是外部的资源) header:bool(告诉Drupal8是否在header中加载脚本,而不是footer); minified:bool(告诉Drupal8是否需要压缩脚本); preprocess:bool(告诉Drupal8是否需要预处理);

 

三、引用js文件

根据你在Drupal8开发中的实际需求,可以有不同的方式引用library。library总是通过Drupla8模块或者Drupal8主题进行注册的, module: hook_element_info_alter() module: hook_page_attachments() theme: template_preprocess_HOOK() twig: {{ attach_library(‘example/example’) }} hook_page_attachments() 和template_preprocess_HOOK()都是相似的,如下:

 

function example_preprocess_node__page(array &$variables) : void { // Theme name: 'example', library name: 'example'.  $variables['#attached']['library'][] = 'example/example'; }

hook_element_info_alter()的例子如下,如果你希望在所有radio按钮的地方加载libarary, function d8_theme_element_info_alter(array &$info) : void { if (!isset($info['radio'])) { $info['radio']['#attached']['library'][] = 'example/example'; } }

四、引用依赖

如果你的Drupal8 JavaScript依赖于其他的资源,比如jQuery或者Drupal settings,你可以使用依赖属性 

 

example: version: 1.x js: js/example.js: {} dependencies: - core/jquery - core/drupalSettings