Skip to main content
Темплейты для Drupal
Подключение js и css файлов в Drupal 8 заметно отличается от того, как это происходило в Drupal 7 (что, впрочем, не удивительно, учитывая масштабы изменений). Процесс теперь следующий: описываем библиотеку, в которой указаны какие js и css "цеплять", в themename.info.yml подключаем описанные библиотеки.

Drupal 8 - как подключить js к теме

Подключение js и css файлов в Drupal 8 заметно отличается от того, как это происходило в Drupal 7 (что, впрочем, не удивительно, учитывая масштабы изменений).

Шаг первый: скачиваем файлы подключаемого скрипта, js - в папку YOURTHEME/js, css - в YOURTHEME/css

Шаг второй: описываем библиотеку в файле yourtheme.libraries.yml:

bootstrap-select:
  css:
    theme:
      css/bootstrap-select.min.css: {}
  js:
      js/bootstrap-select.min.js: {}

Шаг третий: подключаем библиотеку в файле yourtheme.info.yml:

libraries:
  - yourthemename/bootstrap-select

Шаг четвертый: добавляем инициализацию скрипта.

В паке js создаем файл, например, themename.js, куда будет добавлять все, что потребуется для темы.

(function ($, Drupal) {
  /*global jQuery:false */
  /*global Drupal:false */
  "use strict";

  /**
   * Provide Bootstrap select theming.
   */

  Drupal.behaviors.bootstrapSelectTheme = {
    attach: function (context) {
      var $context = $(context);

      /* здесь наш js */
        $('.selectpicker').selectpicker({
          style: 'btn-primary',
        });
    }
  };

})(jQuery, Drupal);

Подключаем этот файл также - библиотекой (см. шаг 2 и 3). Для удобства можно при создании структуры темы сразу определить "базовые" файлы стилей и скриптов и подключить их как библиотеку "global-styling". Получится что-то вроде:

yourtheme.libraries.yml

global-styling:
  css:
    theme:
      css/style.css: {}
  js:
    js/themename.js: {}
bootstrap-select:
  css:
    theme:
      css/bootstrap-select.min.css: {}
  js:
      js/bootstrap-select.min.js: {}

yourtheme.info.yml

libraries:
  - yourtheme/global-styling
  - yourtheme/bootstrap-select

Шаг пятый: сбросить кеш :)

0

Comments