Як ви знаєте в Drupal 7 підключення файлів JS і CSS були реалізовані досить просто, а саме з використанням відповідних функцій:
- drupal_add_js () - підключення JS файлу
- drupal_add_css () - підключення стилів
І була ще одна для підключення бібліотек:
У 8й версії від даного підходу відмовилися на користь використання бібліотек. Бібліотека в Drupal 8 - це набір файлів JS і / або стильових таблиць, з необхідними залежностями.
За замовчуванням Drupal тепер не підвантажує на всі сторінки сайту необхідні JS або CSS файли, поки ви це явно йому не вкажіть, причина того поганий вплив на продуктивність. Так, якщо ви створите бібліотеку з вашим JS файлом на Jquery, але в залежності бібліотеки не вкажете, що дана бібліотека залежить від додаткової бібліотеки - Jquery, то Drupal природно не підключить автоматично Jquery.
Тепер давайте по порядку. Як завжди тестувати будемо на кастомними модулі. У моєму випадку він буде називатися library_ex.
Як створити бібліотеку в Drupal 8
Для створення бібліотек використовується спеціальний файл у форматі yml, назва якого будується за шаблоном
Хочу зауважити, що всі файли в форматі yml містять лише опис того чи іншого об'єкта, наприклад файл module_name.info.yml - містить опис модуля, яке ви можете спостерігати на сторінці модулів.
У моєму випадку, даний файл буде мати назву library_ex.libraries.yml
Першим рядком йде назва бібліотеки, а далі список параметрів. Кожен з параметрів починається з нового рядка, як і значення.
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 () з нашого модуля
Як JS файлу в нашій бібліотеці ми вказали файл - library_ex.js, і що б у нас хоч щось відбувалося на сторінці, виведемо просто alert ()
Далі активуємо наш модуль, якщо ви цього ще не зробили або чистимо кеш сайту, якщо ваш модуль вже був активований. Переходимо на будь-яку сторінку сайту і бачимо що з'явилося вікно попередження:
Відмінно бібліотека підключилася на всі сторінки сайту. Тепер давайте підключимо її до певної сторінці, для цього змінимо трохи код в файлі libraries_ex.module
Підключаємо бібліотеку для типу елемента форми
Так само ви можете підключити бібліотеку до будь-якого типу елемента форми, наприклад для типу - textarea, для цього використовуємо хук hook_element_info_alter ()
Підключення бібліотеки в шаблоні TWIG
Так само бібліотеку ми може підключити і в шаблоні Twig
Передаємо параметри з PHP в JS файл нашої бібліотеки
Як і в Drupal 7, ми можемо передати якийсь параметр з PHP в JS файл нашої бібліотеки через drupalSettings. Для цього в описі нашої бібліотеки (library_ex.libraries.yml), в якості залежностей вказуємо drupalSettings
Відповідно, при підключенні бібліотеки, ми повинні вказати ім'я параметра і його значення, які будуть доступні в JS файлі нашої бібліотеки
Відповідно передані значення будуть доступні в drupalSettings нашого JS файлу
Підключаємо віддалений CSS / JS файл
Для підключення файлів в бібліотеку, які знаходяться на віддаленому сервері, наприклад це може бути бібліотека Яндекс.Карт, необхідно вказувати повний шлях до даного файлу і додати додатковий атрибут type: external. так підключення Яндекс.Карт буде виглядати наступним чином:
Плюсом можна передати додаткові атрибути
Підключення зовнішніх бібліотек з CDN
Так само ми можемо використовувати зовнішні бібліотеки, які знаходяться в CDN, наприклад підключення бібліотеки Colorbox буде виглядешь наступним чином:
Вбудовування JS скрипта на сторінку
Ви так само можете вбудувати inline JS, через хук hook_page_attachments (), наприклад, виведемо звичайний Алерт:
На цьому думаю можна закінчити.
Завантажити модуль використовується в прикладі