Добавяне на javascript и css файлове.

В чистия HTML има прости правила за добавяне на css и javascript файлове. Първите се добавят в head-частта на зарежданата страница. В примерния темплейт стиловете са добавени по следния начин:

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8" />
	<title>Deep theme Themplate</title>  

        <link type="text/css" rel = "stylesheet" type = "text/css" href = "css/reset.css" />
        <link type="text/css" href="css/jquery.lavalamp.css" rel="stylesheet" media="screen" />
        <link type="text/css" rel="stylesheet" href="css/styles.css" />
</head>

Виждаме, че става бързо и лесно и ако всички пътища са зададени правилно, то при зареждането на страницата те ще бъдат взети под внимание от браузъра.

Javascript скриптовете пък се задават точно преди затварянето на body тага, за да е сигурно, че няма да се заредят преди да се е заредил и последния елемент от страницата:

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script> 
    <script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

Всичко се прави лесно и единственото за което трябва да се внимава е дали са зададени правилно всички пътища на скриптовете.

В Drupal, както и в WordPress добавянето на файловете със стилове и скриптове следва правила съвсем различни от описаните.

Нека сега разгледаме по-подробно как става това в Drupal 8.

Там процеса е разделен на две стъпки:

1. Описването на файловете със стилове и скриптове в библиотеки

2. Включването на тези библиотеки в themename.info.yml файла и темплейт файловете. Засега ще разгледаме само включването в themename.info.yml файла

Няма да си кривя душата и ще споделя, че в началото и на мен ми беше неясно защо всичко трябва да става така, понеже включването на тези файлове в Drupal 7 беше доста по-елементарно. Та защо тогава е това усложняване и за какво е необходимо файловете да се описват в библиотеки?! Отговорът се крие в понятието оптимизация. В конкретния случай тя се изразява в това стиловете и скриптовете се добавят само тогава, когато и където имаме нужда от тях. В Drupal 7  файловете със стилове и скриптове се описваха в themename.info файла и описани там те се включваха във всяка една страница на сайта. За да се включат отдели файлове само на определени страници се дефинираше preprocess_page гункция, която с помощта на други функции добавяше желаните стилове и скриптове на определена страница. Виждаме, че и в седмицата процеса изобщо не е толкова елементарен.

Но да се върнем на Drupal 8. Като начало в основната директория на темата трябва да създадем файл с формат на името themename.libraries.yml. В нашия случай това ще е deep_theme.libraries.yml.

В него описваме необходимите css и javascript файлове, като ги групираме в библиотеки. Групирането се прави на логически принцип. Аз лично правя една библиотека, която съдържа css и javascript файловете, създадени от  мен специално за темата, а файловете, които са създадени от външни производители (в нашия случай това е lavalamp библиотеката) дефинирам в отделни библиотеки за всеки производител. Това обаче не се отнася за jQuery библиотеката, която идва с ядрото.

По отношение на jQuery трябва да е ясно, че въпреки, че идва с ядрото на Drupal, не е включена по подразбиране. Т.е. Ако не опишем изрично, че дадена дефинирана от нас библиотека изисква за правилната си работа jQuery, то jQuery няма да се зареди изобщо (пак с цел оптимизация). И това се прави за всяка библиотека по отделно. Не можем, да разчитаме, че понеже  jQuery се изисква от определена библиотека, то ще се зареди заради нея и в другите не е необходимо да опишем тази зависимост.

За да разсеем малко мъглата нека да видим как става всичко на практика.

И понеже ще изхождаме от реален пример от нашия темплейт, то трябва да съчетаем примерите от показаните по-горе откъси от head частта и частта преди затварящия /body таг. Изключваме jQuery, което както казахме идва с ядрото на Drupal и ни остава да включим:

  • reset.css - файл, който нулира всички маргини и падинги, така, че после всичко да изглежда еднакво на различните браузъри
  • jquery.lavalamp.css - необходим за работата на lavalamp ефекта в менюто
  • jquery.lavalamp.min.js - самия скрипт на lavalamp
  • styles.css - нашите стилове за темата.
  • script.js - създаваните от нас скриптове.

Аз лично постъпвам по следния начин:

Създавам папка vendor в основната папка на темата, където ще се съхраняват всички стилове и скриптове на външни производители и там създавам папки за всеки производител по отделно. В нашия случай ще създам и папка lavalamp във vendor и пътя става deep_theme/vendor/lavalamp. В нея копирам файловете jquery.lavalamp.css и jquery.lavalamp.min.js.

В основната директория на темата създавам папка css в която ще са всички стилове, създавани от мен и папка js в която пък ще бъдат всички скриптове, създавани от мен.

По отношение на css папката, понеже ползвам SASS (scss) ще създам и папка scss, която ще съдържа стиловете в scss формат. Самото компилиране от scss към scss става автоматично от NetBeans, който ползвам за среда за разработка. Оставям на Вас да прецените дали да ползвате SASS изобщо (което горещо препоръчвам). Ако Вашата среда за разработка не поддържа настройки за автоматично компилиране от SASS към css можете да инсталирате Koala - http://koala-app.com/ и тя ще се грижи за това.

След като съм създал съответните папки копирам файловете в тях:

reset.scc и styles.css копирам в папка css (респективно styles.scss в папка scss). Ако ползвате Koala обаче и styles.css и styles.scss трябва да са в една и съща папка.

scripts.js копирам в папка js.

jquery.lavalamp.min.js и jquery.lavalamp.css в папка vendor/lavalamp (ако не сте го направили още)

Deep Theme Vendor folder

 

 

Следва създаването на файла themename.libraries.yml, който в нашия случай ще е deep_theme.libraries.yml.

Попълваме неговото съдържание по следния начин: За начало трябва да измислим някакви смислени имена за нашите библиотеки със стилове и скриптове. Тази, която ще съдържа всички стилове и скриптове, създадени от нас можем да наречем deep_theme_library, а тази, съдържаща файловете на lavalamp ще наречем просто lavalamp.

Съобразно всичко, което видяхме до сега, кода който следва да напишем е следният:

deep_theme_library:
  css:
    theme:
      css/styles.css: {}
      css/reset.css: {}
  js:
    js/scripts.js: {}
      
lavalamp:
  css:
    theme:
      vendor/lavalamp/jquery.lavalamp.css: {}
  js:
      vendor/lavalamp/jquery.lavalamp.min.js: {}
  dependencies:
        - core/jquery

 

Имайте предвид, че табулацийте са изключително важни. Един интервал по-малко може да доведе до неработоспособност на цялата система. Ще създам специална статия за това какво да се прави в такъв случай, но Ви препоръчвам да опитате да направите библиотеките внимателно сами, а не просто да копирате кода.

След като файлът с библиотеките deep_theme.libraries.yml е попълнен трябва да накараме Drupal да ги използва в изгражданата тема. Това става като отворим наново файлът deep_theme.info.yml и вътре добавим следните редове, получавайки се нещо такова:

name: Deep Theme
type: theme
core: 8.x

libraries:
  - deep_theme/deep_theme_library
  - deep_theme/lavalamp

 

 

 

Как да разберем, че стиловете се зареждат?

Аз понеже ползвам браузър Firefox посочвам някъде в прозореца на документа и след натискане с десен бутон на мишката от изскочилото меню избирам Inspect Element и в таб-а Style Editor виждам, че моите два файла са се заредили в списъка със заредени стилове:

Deep theme style files

Всъщност отначало файлът styles.css липсваше просто защото беше празен. След като записах в него

body{
  background-color:#999;
}

и този стил се появи в списъка, но това се вижда и без инспектиране, просто фона на прозореца стана сив.

За да можем да видим в инспектора на елементи дали файловете се зареждат обаче, трябва да извършим малка настройка на средата на Drupal. В страницата на адрес /admin/config/development/performance махаме отметките пред Aggregate CSS files  и Aggregate JavaScript files:

Aggregation

 

От критична важност за производителността на системата е тези отметки да са включени на реалните сайтове в интернет, но при разработка трябва да ги изключим, за да виждаме кои стилове и скриптове от къде идват.

С това първоначалното ни запознанство с библиотеките приключва. Статията се получи доста дълга, но научаването на материала е от критично значение за да продължим нататък. Може би си мислите, че подобно усложняване на добавянето на javascript и css файлове е излишно. Добавени по този начин те се зареждат на всяка страница на сайта. Има обаче и други начини за лесно зареждане само на определени страници и в определени темплейти, където всъщност се разбира за колко мощен инструмент за оптимизация на сайта говорим.

Свързана статия