add css and js to theme

发表于

drupal8以asset library形式来管理css和js.
asset library在themes/theme_name/theme_name.libraries.yml文件中定义.
asset library是按照顺序加载的，所以请确保自定义的asset library放到theme_name.libraries.yml最后.

前提条件

  1. 创建文件themes/theme_name/css/styles.css
  2. 创建文件themes/theme_name/js/custom.js
  3. 在themes/theme_name/theme_name.libraries.yml中定义新的asset library
    1
    2
    3
    4
    5
    6
    custom:
      css:
        theme:
          css/styles.css: {}
      js:
        js/custom.js: {}

站点全页面添加css和js(无条件)

在themes/theme_name/theme_name.info.yml中引用前提条件中定义的asset library

1
2
libraries:
  - 'bootstrap/custom'

站点满足某个条件添加css和js(有条件)

通常情况会根据route信息来加载相应的css和js。
举例：想只在preview画面时引入自定义css和js,可以在themes/theme_name/theme_name.theme中添加以下hook

1
2
3
4
5
function THEME_page_attachments_alter(array &$page) {
    if (\Drupal::routeMatch()->getRouteName() === 'entity.node.preview') {
      $page['#attached']['library'][] = 'bootstrap/custom';
    }
  }

hook_page_attachments_alter

指定模板内添加css和js

1
2
3
4
function THEME_preprocess_menu_local_action(array &$variables) {
    // We require Modernizr's touch test for button styling.
    $variables['#attached']['library'][] = 'bootstrap/custom';
  }

添加可配置的js

当js中需要用到php中的信息时，会用到可配置js功能。
举例：想在页面渲染前，添加php信息到drupalSettings，可以在themes/theme_name/theme_name.theme中添加以下hook

1
2
3
4
5
function bootstrap_page_attachments_alter(&$data, &$context1 = NULL, &$context2 = NULL) {
  $data['#attached']['library'][] = 'bootstrap/custom';
  $data['#attached']['drupalSettings']['foo'] = 'bar';
  Bootstrap::alter(__FUNCTION__, $data, $context1, $context2);
}

themes/theme_name/js/custom.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
(function ($, Drupal, drupalSettings) {
    'use strict';
    Drupal.behaviors.mybehavior = {
        attach: function (context, settings) {
            console.log(drupalSettings.foo);
        }
    };
})(jQuery, Drupal, drupalSettings);

参考资源

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme