Drupal 8 - css conexiune și js
După cum știți în Drupal 7 conexiune JS și CSS fișiere au fost realizate în mod simplu și precis utilizând funcțiile corespunzătoare:
- drupal_add_js () - conexiune fișier JS
- drupal_add_css () - Stiluri de conectare
Și acolo a fost un alt biblioteci de conectare:
Versiunea a 8-a acestei abordări a fost abandonată în favoarea utilizării bibliotecilor. Biblioteca în Drupal 8 - un set de fișiere, JS și / sau foaie de stil, cu dependențele necesare.
În mod implicit, Drupal nu se mai încarcă toate paginile site-ului dvs. necesare JS sau CSS fișiere, în timp ce ești, evident, el nu a specificat motivul este o influență negativă asupra performanței. De exemplu, dacă creați o bibliotecă cu fișierul JS pe Jquery, dar nu a specificat în funcție de bibliotecă pe care biblioteca depinde de biblioteci suplimentare - Jquery, Drupal este în mod natural să nu se conecteze automat Jquery.
Acum, să ordine. Ca întotdeauna vom fi testate pentru un modul personalizat. În cazul meu, va fi numit library_ex.
Cum de a crea o bibliotecă în Drupal 8
Pentru a crea biblioteci folosind un fișier special în format YML, numele care se bazează pe un șablon
Am act de faptul că toate fișierele din YML format conține o descriere a unui obiect, de exemplu, fișierul module_name.info.yml - conține o descriere a modulului, pe care o puteți vedea pe pagina de module.
În cazul meu, acest fișier va avea library_ex.libraries.yml numele
Prima linie este numele bibliotecii, și apoi lista de parametri. Fiecare parametru începe pe o linie nouă ca valoare.
css - conține o listă de fișiere pe care doriți să le conectați utilizând biblioteca. După cum se poate vedea în acest parametru, există tipuri suplimentare, în acest caz, de bază. Acest parametru indică tipul de stil. Lista posibilelor tipuri de stiluri:
- de bază - în acest tip trebuie să fie conectat la fișierele, care sunt stiluri pentru elemente HTML, cum ar fi un fișier pentru a reseta normaliza stiluri. Acest tip de fișier atribuie greutate CSS_BASE = -200
- aspect - în acest tip trebuie să fie conectat la fișierele, care stilurile se aplică poziționarea elementelor pe pagină, cum ar fi fișierele cadru Bootstrap. Acest tip de fișier atribuie greutate CSS_LAYOUT = -100
- componentă - în acest tip trebuie să fie conectat la fișierele, care stilurile sunt utilizate de mai multe ori pe pagină. Acest tip de fișier atribuie greutate CSS_COMPONENT = 0
- de stat - în acest tip trebuie să fie conectat la dosarele, care se referă la stilurile schimba pe partea de client. Acest tip de fișier CSS_STATE atribuie greutate = 100
- Tema - în acest tip de fișiere care urmează să fie conectate, care utilizează stilul vizual pentru componenta. Acest tip de fișier atribuie toate CSS_THEME = 200
Această abordare este definit standarde SMACSS, deși folosesc BEM - bine, din nou, în interval.
js - conține o listă de fișiere JS pe care doriți să le conectați utilizând biblioteca.
dependențe - conține lista de biblioteci care urmează să fie conectate prin utilizarea acestei biblioteci, de exemplu, Jquery.
Odată cu formarea bibliotecii terminat, acum să vedem cum să se conecteze această bibliotecă?
Am observat că în fișierul module_name.libraries.yml - aveți posibilitatea să specificați orice număr de biblioteci.
Conectați biblioteca la pagina
Pentru a conecta folosind hook_preprocess_page cârlig () al modulului nostru
Ca un fișier JS în biblioteca noastră, ne-am indicat un fișier - library_ex.js, și că vom avea cel puțin ceva se întâmplă în pagină, obținem doar de alertă ()
În continuare vom activa modul nostru, dacă nu ați făcut acest lucru, sau curățați site-ul cache-ul, în cazul în care modulul a fost deja activat. Salt la orice pagină de pe site-ul dvs. și am constatat că nu a existat apare un avertisment:
Biblioteca excelenta este conectat la toate paginile site-ului. Acum, să-l conectați la o anumită pagină pentru că puțin sa schimbat în libraries_ex.module fișier de cod
Conectarea bibliotecii pentru a forma elementul de tip
Vă puteți conecta, de asemenea, biblioteca la orice tip de element din formular, cum ar fi tipul - textarea, putem folosi acest hook_element_info_alter cârlig ()
Conectarea creanga șablon de bibliotecă
Deci, ne putem conecta la bibliotecă și șablonul crenguță
Se trece de la parametrii PHP pentru JS fișierul nostru de bibliotecă
Ca și în Drupal 7, putem trece orice parametru de la PHP la dosar JS biblioteca noastră prin drupalSettings. Pentru a face acest lucru în descrierea bibliotecii noastre (library_ex.libraries.yml), ca dependențe indică drupalSettings
Prin urmare, atunci când conectarea bibliotecii, trebuie să specificați numele parametrului și valoarea sa, care va fi disponibil în fișierul JS în biblioteca noastră
Prin urmare, valorile prezentate vor fi disponibile în drupalSettings noastre fișier JS
Conectarea CSS la distanță / fișier JS
Pentru a vă conecta la fișierele de bibliotecă care se află pe un server de la distanță, de exemplu, ea poate fi o bibliotecă Yandex.Maps, trebuie să specificați calea completă la fișierul și adaugă un tip suplimentar de atribut: extern. prin urmare, conexiunea Yandex.Maps va fi după cum urmează:
În plus, puteți trece atribute suplimentare
Conectarea o bibliotecă extern de la CDN
Putem folosi, de asemenea, bibliotecile externe care sunt în CDN, cum ar fi conectarea bibliotecii colorbox vyglyadesh este după cum urmează:
Încorporarea script JS pe pagina
Puteți încorpora, de asemenea, în linie JS, prin hook_page_attachments cârlig (), de exemplu, obține o alertă regulată:
In aceasta cred că poate fi finalizată.
Descărcați modulul utilizat în exemplul