Drupal8引用JavaScript - 向Drupal8模块或者Drupal8主题中添加JavaScript

翻译者:长风Drupal开发

原文链接:https://www.drupal.org/docs/8/api/layout-api

一、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

联系我们

提供基于Drupal的门户网站、电子商务网站、移动应用开发及托管服务

联系电话
137-9572-6015
长按加微信
长风云微信
长按关注公众号
长风云公众号