Drupal中CSS与JavaScript文件加载方式

Drupal中，模块和主题中的CSS文件和JavaScript加载方式与其他库文件加载方式一致。只有显示告诉drupal加载的CSS文件和JavaScript文件，drupal才会加载，而不会加载所有的资源文件，导致前台性能降低。

加载CSS和JS文件的方法

1、定义library

在theme文件夹下创建*.libraries.yml文件，其中*为主题名称，例如beginner.library.yml。

# beginner.libraries.yml
cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

在这个例子中，JavaScript: cuddly-slider.js和CSS cuddly-slider.css 分别位于主题的各自文件夹中。

2、库文件中增加jQuery

Drupal不会在所有页面中加载jQuery，因此如果cuddly-slider依赖jQuery，你必须声明一个dependence，在core 库中包含jQuery。如果其他的库依赖cuddly-slider，声明方式如下：

Beginner/cuddly-slider  #主题名/library名称

注意：不能声明独立的文件作为dependency，必须是一个library。
因此，要使jQuery可用，就必须更新beginner.library.yml如下样式：

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

3、声明dependency

声明dependency时，依赖的library在resource/library中声明。针对core library，resource就是core，除core library之外的就是模块名和主题名。因此，如果new_library依赖core中的jQuery，两个my_library文件，一个my_library在my_theme中声明，另外一个my_library在my_module中声明，那么dependency的声明应该按照如下方式声明：

# beginner.libraries.yml
new_library:
  js:
    js/new_library.js: {}
  dependencies:
    - core/jquery
    - my_module/my_library
- my_theme/my_library

模块的名称和主厅名称提供了一个命名空间为同名的library。

4、将library链接到所有页面

大部分主题会使用一个全局的样式文件，因此全局的css文件需要在激活的主题下的所有文件中加载。Js文件也是类似的。定义方式如下：

# beginner.libraries.yml
global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
global-scripts:
  version: 1.x
  js: 
    js/navmenu.js: {}   

为了能使全局的样式文件和js文件在主题中生效，全局样式文件和全局js文件需要在主题的info.yml文件中体现。注意不要和模块的info.yml文件混淆。

#beginner.info.yml
name: Beginner
type: theme
description: 'A drupal theme.'
core: 10.x
libraries:
  - beginner/global-styling
  - beginner/global-scripts
base theme: stable9
regions:
  header: Header
  content: Content
  sidebar_first: 'Sidebar first'
  footer: Footer

使用方法

1、模块中使用库文件

如果在模块中使用library，可以通过ook_preprocess_HOOK()或者hook_page_attachments()调用。例如：

function fluffiness_page_attachments(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/global-styling';
}

或者

function fluffiness_preprocess_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/global-styling';
}

2、在twig模板中引入库文件

在twig模板中使用库文件，可以通过 attach_library() 函数在任一*.html.twig文件中，例如：

{{ attach_library('fluffiness/cuddly-slider') }}
Some fluffy markup {{ message }}

3、在页面子集中使用库文件

在某些情况下，不需要在所有页面中引入库文件，仅需要在一些页面子集中使用。那么可以通过.theme文件中的THEME_preprocess_HOOK()函数实现, 其中THEME为主题名，HOOK为主题hook。例如，如果只在维护页面加载库文件，HOOK就是maintenance_page，调用函数如下：

function beginner_preprocess_page(&$variables) {
  $variables['page']['#cache']['contexts'][] = 'route';
  $route = "entity.node.preview";
  if (\Drupal::routeMatch()->getRouteName() === $route) {
    $variables['#attached']['library'][] = 'beginner/node-preview';
  }
}