Drupal 10 怎么向页面添加 JS 和 CSS?
发布于
以前在 Drupal 7 中添加 JS 和 CSS 非常简单,直接调用 drupal_add_js()
和 drupal_add_css()
函数就行了。Drupal 8 开始好像要先定义资源库(Library),然后再加载库,过程麻烦了许多,试了几次也没有成功。希望有大牛能够给个示例,谢谢!
1 个回答
从 Drupal 8 开始,向页面中添加 JS 和 CSS 的方式麻烦了很多,造成了很差的开发体验。
以通过模块添加 JS 和 CSS 为例,大体的流程从原本的简单调用 drupal_add_js()
和 drupal_add_css()
变成了以下多个步骤:
- 在主题或模块下创建 JS 或 CSS 文件。目录结构可以自行组织,在第 2 步引用正确的路径即可,如
mytheme/js/xxx.js
mytheme/css/xxx.css
mymodule/js/xxx.js
mymodule/css/xxx.css
- 在
mymodule.libraries.yml
或mytheme.libraries.yml
文件中定义资源库,包含 1 中的 JS/CSS 文件 - 选择合适的方法将 2 中的资源库添加到页面
声明资源库 *.libraries.yml
在模块或主题的根目录下创建 *.libraries.yml
文件(注意新建和修改后需要清空缓存才能生效),以下为内容示例:
global-assets:
js:
js/global.js: {}
js/global.min.js: { minified: true }
https://example.com/xxx.js: { external: true }
css:
base:
css/base/base.css: {}
component:
css/component/form.css: {}
theme:
css/main.css: {}
dependencies:
- core/jquery
向页面添加资源库
定义资源库后,可以通过多种方法将资源库添加到页面
- 通过
#attach
属性将资源库添加到渲染(render)数组,如:hook_page_attachments()
hook_preprocess_HOOK()
hook_form_alter()
- 其它等等
- Twig 模板:
{{ attach_library('mymodule/global-assets') }}
示例:
添加到所有页面
function mymodule_page_attachments(array &$attachments) {
$attachments['#attached']['library'][] = 'mymodule/library_name';
}
添加到指定页面
function mymodule_preprocess_maintenance_page(&$variables) {
$variables['#attached']['library'][] = 'mymodule/library_name';
}
添加到表单
$form['#attached']['library'][] = 'mymodule/library_name';
添加到渲染数组
$build['#attached']['library'][] = 'mymodule/library_name';