Drupal 8 - CSS връзка и JS

Както знаете в 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 - съдържа списък на файловете, които искате да се свържете с помощта на библиотеката. Както можете да видите в този параметър, има допълнителни видове, в този случай база. Този параметър показва вида на стил. Списъкът с възможните видове стилове:

• база - в този вид трябва да бъде свързан към файловете, които са стилове на HTML елементи, като например файл, който да изчисти нормализиране стилове. Този тип файл присвоява тегло CSS_BASE = -200
• оформление - в този вид трябва да бъде свързан към файловете, които се отнасят до стила на позиционирането на елементи на страницата, като например файлове за първоначално зареждане рамка. Този тип файл присвоява тегло CSS_LAYOUT = -100
• компонент - в този вид трябва да бъде свързан към файловете, които стилове се използват по няколко пъти на страницата. Този тип файл присвоява тегло CSS_COMPONENT = 0
• състояние - в този вид трябва да бъде свързан към файловете, които се отнасят до стиловете се промени от страна на клиента. Този тип файл CSS_STATE присвоява тегло = 100
• тема - при този тип файлове, за да се свържат, които използват визуален стил за компонента. Този тип файл присвоява всички CSS_THEME = 200

Този подход се определя SMACSS стандарти, въпреки че използвам Маската - добре, отново, в участъка.

JS - то съдържа списък на JS файлове, които искате да се свържете с помощта на библиотеката.

зависимости - съдържа списък на библиотеки, за да бъдат свързани с помощта на тази библиотека, например Jquery.

С формирането на библиотеката приключи, сега нека да видим как да се свържете на библиотеката?

Бих искала да отбележа, че в module_name.libraries.yml файл - можете да зададете произволен брой библиотеки.

Свържете библиотеката на страницата

За да се свържете с помощта на hook_preprocess_page кука () на нашия модул

Като файл JS в нашата библиотека, ние сме посочили на файла - library_ex.js, и че ще имаме поне нещо се случва на страницата, която сме извлекли само предупреждение ()

След това активирате нашия модул, ако още не сте го направили, или почистване на мястото на кеша, ако вашият модул вече е активирана. Направо към всяка страница на вашия сайт и да видите, че не е се появява предупреждение:

Отлично библиотека е свързана с всички страници на сайта. Сега нека да го свържете към определена страница за това малко се е променило в libraries_ex.module код файл

Свързване на библиотеката, за да се образува тип елемент

Можете също да свържете библиотеката на всеки тип форма елемент, като например вида - текстово поле, можем да използваме тази кука hook_element_info_alter ()

Свързване библиотека шаблон клонка на

Така че ние може да се свърже в библиотеката и шаблон клонка

Минете параметри от PHP за JS нашата библиотека файл

Както и в Drupal 7, ние може да премине всеки параметър от PHP за JS файл нашата библиотека през drupalSettings. За да направите това в описанието на нашата библиотека (library_ex.libraries.yml), като зависимости показват drupalSettings

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

В съответствие с това на представените стойности ще бъдат на разположение в нашите drupalSettings подават JS

Свързване на дистанционно CSS / JS файл

За да се свържете с библиотечни файлове, които се намират на отдалечен сървър, например тя може да бъде библиотечни Yandex.Maps, трябва да укажете пълния път до файла и добави допълнителна приписват вид: външна. така Yandex.Maps връзка ще бъде, както следва:

Плюс това, можете да подадете допълнителни атрибути

Свързване на външна библиотека от CDN

Можем също така да се използват външни библиотеки, които са в CDN, като например свързване КолорБокс vyglyadesh библиотека е както следва:

Вграждане JS скрипт на страницата

Можете също да вградите инлайн JS, чрез кука hook_page_attachments (), например, да извлече редовен сигнал:

В това мисля, че може да бъде завършена.

Изтегляне на модул, използван в примера