Drupal 10 怎么向页面添加 JS 和 CSS？

从 Drupal 8 开始，向页面中添加 JS 和 CSS 的方式麻烦了很多，造成了很差的开发体验。

以通过模块添加 JS 和 CSS 为例，大体的流程从原本的简单调用 drupal_add_js() 和 drupal_add_css() 变成了以下多个步骤：

1. 在主题或模块下创建 JS 或 CSS 文件。目录结构可以自行组织，在第 2 步引用正确的路径即可，如
   • mytheme/js/xxx.js 
   • mytheme/css/xxx.css
   • mymodule/js/xxx.js
   • mymodule/css/xxx.css
2. 在 mymodule.libraries.yml 或 mytheme.libraries.yml 文件中定义资源库，包含 1 中的 JS/CSS 文件
3. 选择合适的方法将 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

向页面添加资源库

定义资源库后，可以通过多种方法将资源库添加到页面

1. 通过 #attach 属性将资源库添加到渲染（render）数组，如：
   1. hook_page_attachments()
   2. hook_preprocess_HOOK()
   3. hook_form_alter()
   4. 其它等等
2. 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';