Помощь начинающим веб
разработчикам

Drupal 8 – подключение CSS и JS

28.07.2017

Как вы знаете в Drupal 7 подключение файлов JS и CSS были реализованы достаточно просто, а именно с использованием соответствующих функций:

  • drupal_add_js() – подключение JS файла
  • drupal_add_css() – подключение стилей

И была еще одна для подключения библиотек:

  • drupal_add_library()

В 8й версии от данного подхода отказались в пользу использования библиотек. Библиотека в Drupal 8 - это набор файлов JS и/или стилевых таблиц, с необходимыми зависимостями.

По умолчанию Drupal теперь не подгружает на все страницы сайта необходимые JS или CSS файлы, пока вы это явно ему не укажите, причина тому плохое влияние на производительность. Так, если вы создадите библиотеку с вашим JS файлом на Jquery, но в зависимости библиотеки не укажите, что данная библиотека зависит от дополнительной библиотеки – Jquery, то Drupal естественно не подключит автоматически Jquery.

Теперь давайте по порядку. Как всегда тестировать будем на кастомном модуле. В моем случае он будет называться library_ex.

Файл library_ex.info.yml

name: Library
description: Данный модуль демонстрирует использование библиотек в Drupal 8
core: 8.x
package: Drupalfly
type: module

Как создать библиотеку в Drupal 8

Для создания библиотек используется специальный файл в формате yml, название которого строится по шаблону

module_name.libraries.yml

Хочу заметить, что все файлы в формате yml содержат лишь описание того или иного объекта, например файл module_name.info.yml – содержит описание модуля, которое вы можете наблюдать на странице модулей.

В моем случае, данный файл будет иметь название library_ex.libraries.yml

Файл library_ex.libraries.yml

library_ex:
  version: 1.x
  css:
    base:
      css/library_ex.css: {}
  js:
    js/library_ex.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

Первой строкой идет название библиотеки, а далее список параметров. Каждый из параметров начинается с новой строки, как и значения.

css – содержит список файлов, которые необходимо подключить при использовании данной библиотеки. Как вы можете заметить в данном параметре, присутствуют дополнительные типы, в данном случае base, данный параметр говорит о типе стиля. Список возможных типов стилей:

  • base – в данном типе должны подключаться файлы, стили которых относятся к HTML элементам, например файл для сброса стилей normalize. Данный тип назначает вес файлу CSS_BASE = -200
  • layout – в данном типе должны подключаться файлы, стили которых относятся к позиционированию элементов на странице, например файлы фреймворка Bootstrap. Данный тип назначает вес файлу CSS_LAYOUT = -100
  • component – в данном типе должны подключаться файлы, стили которого используются многократно на странице. Данный тип назначает вес файлу CSS_COMPONENT = 0
  • state – в данном типе должны подключаться файлы, стили которого относятся к изменению на стороне клиента. Данный тип назначает вес файлу CSS_STATE = 100
  • theme – в данном типе должны подключаться файлы, которые применяют визуальный стиль для компонента. Данный тип назначает все файлу CSS_THEME = 200

Данный подход определен стандартами SMACSS, хотя я использую БЭМ – ну вот, опять в пролете.

js – содержит список JS файлов, которые необходимо подключить при использовании данной библиотеки.

dependencies – содержит список библиотек, которые необходимо подключить при использовании данной библиотеки, например Jquery.

С формированием библиотеки закончили, теперь давайте разберемся, как же подключать данную библиотеку ?

Хочу заметить, что в файле module_name.libraries.yml – вы можете указывать любое кол-во библиотек.

Подключаем библиотеку на страницу сайта

Для подключения используем хук hook_preprocess_page() из нашего модуля

Файл library_ex.module

<?php

/**
 * @param $variables
 * Implements hook_preprocess_page()
 */
function library_ex_preprocess_page(&$variables){

  # Add library
  $variables['#attached']['library'][] =  'library_ex/library_ex';

}

В качестве JS файла в нашей библиотеке мы указали файл - library_ex.js, и что бы у нас хоть что то происходило на странице, выведем просто alert()

Файл library_ex.js

(function ($) {
  Drupal.behaviors.libraryExBehavior = {
    attach: function (context, settings) {
      alert('Hi');
    }
  };
})(jQuery);

Далее активируем наш модуль, если вы этого еще не сделали или чистим кеш сайта, если ваш модуль уже был активирован. Переходим на любую страницу сайта и видим что появилось окно предупреждения:

add_library_drupal_8.png

Отлично библиотека подключилась на все страницы сайта. Теперь давайте подключим ее к определённой странице, для этого изменим немного код в файле libraries_ex.module

<?php

/**
 * @param $variables
 * Implements hook_preprocess_page()
 */
function library_ex_preprocess_page(&$variables){

  # Подключили библиотеку на страницу с NID = 1
  $current_path = \Drupal::service('path.current')->getPath();
  if($current_path == '/node/1'){
    $variables['#attached']['library'][] =  'library_ex/library_ex';
  }


}

Подключаем библиотеку для типа элемента формы

Так же вы можете подключить библиотеку к любому типу элемента формы, например для типа – textarea, для этого используем хук hook_element_info_alter()

<?php

/**
 * @param array $types
 * Implements hook_element_info_alter()
 */
function library_ex_element_info_alter(array &$types) {
  if (isset($types['textarea'])) {
    $types['table']['#attached']['library'][] = 'library_ex/library_ex';
  }
}

Подключение библиотеки в шаблоне TWIG

Так же библиотеку мы может подключить и в шаблоне Twig

{{ attach_library('library_ex/library_ex') }}

Передаем параметры из PHP в JS файл нашей библиотеки

Как и в Drupal 7, мы можем передать какой-то параметр из PHP в JS файл нашей библиотеки через drupalSettings. Для этого в описании нашей библиотеки (library_ex.libraries.yml), в качестве зависимостей указываем drupalSettings

Файл library_ex.libraries.yml

# Testin library
library_ex:
  version: 1.x
  css:
    base:
      css/library_ex.css: {}
  js:
    js/library_ex.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupalSettings

Соответственно, при подключении библиотеки, мы должны указать имя параметра и его значение, которые будут доступны в JS файле нашей библиотеки

Файл library_ex.module

<?php

/**
 * @param $variables
 * Implements hook_preprocess_page()
 */
function library_ex_preprocess_page(&$variables){

  # Подключили библиотеку на все страницы сайта
  $variables['#attached'] = array(
    'library' => array('library_ex/library_ex'),
    'drupalSettings' => array(
      'library_ex' => array(            // Название модуля
        'library_ex' => array(          // Название библиотеки
          'foo' => 'bar',
        )
      )
    ),
  );

}

Соответственно переданные значения будут доступны в drupalSettings нашего JS файла

Файл library_ex.js

(function ($) {
  Drupal.behaviors.libraryExBehavior = {
    attach: function (context, settings) {

      var libValue = drupalSettings.library_ex.library_ex.foo;
      alert(libValue);

    }
  };
})(jQuery);

Подключаем удаленный CSS/JS файл

Для подключения файлов в библиотеку, которые находятся на удаленном сервере, например это может быть библиотека Яндекс.Карт, необходимо указывать полный путь до данного файла и добавить дополнительный атрибут type:external, так подключение Яндекс.Карт будет выглядеть следующим образом:

Файл library_ex.libraries.yml

# Testin library
library_ex:
  version: 1.x
  css:
    base:
      css/library_ex.css: {}
  js:
    https://api-maps.yandex.ru/2.1/?lang=ru_RU: {type: external}
    js/library_ex.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupalSettings

Плюсом можно передать дополнительные аттрибуты

Файл library_ex.libraries.yml

# Testin library
library_ex:
  version: 1.x
  css:
    base:
      css/library_ex.css: {}
  js:
    https://api-maps.yandex.ru/2.1/?lang=ru_RU: {type: external, attributes: {async: true}}
    js/library_ex.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
    - core/drupalSettings

Подключение внешних библиотек из CDN

Так же мы можем использовать внешние библиотеки, которые находятся в CDN, например подключение библиотеки Colorbox будет выглядешь следующим образом:

Файл library_ex.libraries.yml

colorbox:
  remote: http://www.jacklmoore.com/colorbox/
  version: 1.6.4
  license:
    name: MIT
    url: http://www.jacklmoore.com/colorbox/
    gpl-compatible: true
  js:
    https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/i18n/jquery.colorbox-ar.js: { type: external, minified: true }

Встраивание JS скрипта на страницу

Вы так же можете встроить inline JS, через хук hook_page_attachments(), например, выведем обычный алерт:

Файл library_ex.module

<?php

/**
 * @param array $attachments
 * Implements hook_page_attachments()
 */
function library_ex_page_attachments(array &$attachments){

  # Inline JS
  $attachments['#attached']['html_head'][] = array(
    array(
      '#type' => 'html_tag',
      '#tag' => 'script',
      '#value' => 'alert("Hello world!");',
      '#attributes' => array(),
    ),
    'Hi',
  );
  
}

На этом думаю можно закончить.

Скачать модуль используемый в примере

Скачать

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии