După cum știți în Drupal 7, legătura dintre fișierele JS și CSS a fost implementată destul de simplu, și anume utilizarea funcțiilor corespunzătoare:
- drupal_add_js () - conectarea fișierului JS
- drupal_add_css () - conectarea stilurilor
Și mai există încă unul pentru conectarea bibliotecilor:
În a opta versiune, această abordare a fost abandonată în favoarea utilizării bibliotecilor. O bibliotecă din Drupal 8 este un set de fișiere JS și / sau tabele de stil, cu dependențele necesare.
Implicit, Drupal nu încarcă acum toate fișierele JS sau CSS necesare pe toate paginile site-ului, cu excepția cazului în care îl specificați în mod explicit, motivul fiind un impact slab asupra performanței. Deci, dacă creați o bibliotecă cu fișierul JS pe Jquery, dar în funcție de bibliotecă, nu specificați că această bibliotecă depinde de biblioteca suplimentară - Jquery, atunci Drupal nu va conecta automat Jquery.
Acum să începem în ordine. Ca întotdeauna, vom testa modulul personalizat. În cazul meu, se va numi library_ex.
Cum se creează o bibliotecă în Drupal 8
Pentru a crea biblioteci, utilizați un fișier special în format yml, al cărui nume este construit din șablon
Vreau să observ că toate fișierele în format yml conțin doar o descriere a unui obiect, de exemplu modul_name.info.yml conține o descriere a modulului pe care îl puteți vedea pe pagina modulelor.
În cazul meu, acest fișier va fi numit library_ex.libraries.yml
Prima linie este numele bibliotecii și apoi lista parametrilor. Fiecare dintre parametri începe cu o nouă linie, ca de exemplu valorile.
css - conține o listă de fișiere care trebuie să fie conectate la utilizarea acestei biblioteci. După cum puteți vedea în acest parametru, există tipuri suplimentare, în acest caz baza. acest parametru indică tipul stilului. Lista de tipuri posibile de stiluri:
- fișiere de bază cu fișiere cu stiluri care se referă la elementele HTML, de exemplu un fișier pentru resetarea stilurilor de normalizare, trebuie să fie conectate în acest tip. Acest tip atribuie o greutate fișierului CSS_BASE = -200
- layout - acest tip de fișiere trebuie să fie conectat la fișiere ale căror stiluri se referă la poziționarea elementelor de pe pagină, de exemplu, fișierele cadru Bootstrap. Acest tip atribuie o greutate fișierului CSS_LAYOUT = -100
- componentă - în acest tip trebuie să se conecteze fișiere ale căror stiluri sunt utilizate în mod repetat pe pagină. Acest tip atribuie o greutate fișierului CSS_COMPONENT = 0
- state - în acest tip trebuie să se conecteze fișiere ale căror stiluri se referă la schimbarea de pe partea clientului. Acest tip atribuie o greutate fișierului CSS_STATE = 100
- temă - în acest tip, fișierele care utilizează stilul vizual al componentei trebuie să fie conectate. Acest tip atribuie întregului fișier CSS_THEME = 200
Această abordare este definită de standardele SMACSS, deși folosesc BEM - bine, din nou în intervalul de timp.
js - conține o listă de fișiere JS care trebuie să fie conectate la utilizarea acestei biblioteci.
dependențe - conține o listă de biblioteci care trebuie să fie conectate la utilizarea acestei biblioteci, de exemplu, Jquery.
Odată cu formarea bibliotecii terminată, acum să ne dăm seama cum să conectăm această bibliotecă?
Vreau să observ că în fișierul module_name.libraries.yml - puteți specifica orice număr de biblioteci.
Conectați biblioteca la pagina site-ului
Pentru a vă conecta, utilizați hook_preprocess_page () din modulul nostru
Ca fișier JS în biblioteca noastră, am specificat un fișier - library_ex.js și că la noi, chiar dacă a apărut pe pagină, vom deduce pur și simplu alert ()
Apoi, activați modulul nostru, dacă nu ați făcut-o deja, sau curățați cache-ul site-ului dacă modulul dvs. a fost deja activat. Mergem la orice pagină a site-ului și vedem că a apărut fereastra de avertizare:
Biblioteca excelenta este conectata la toate paginile site-ului. Acum, să o conectăm la o anumită pagină, pentru aceasta, schimbați un mic cod în fișierul libraries_ex.module
Conectăm biblioteca pentru tipul de element al formularului
De asemenea, puteți conecta biblioteca la orice tip de element de formă, de exemplu pentru tipul textarea, pentru care folosim hook_element_info_alter ()
Conectarea unei biblioteci în șablonul TWIG
De asemenea, putem conecta biblioteca în șablonul Twig
Transmitem parametrii din PHP în fișierul JS al bibliotecii noastre
Ca și în Drupal 7, putem trece un parametru din PHP în fișierul JS al bibliotecii noastre prin intermediul drupalSettings. În acest scop, în descrierea bibliotecii noastre (library_ex.libraries.yml), ca dependențe, specificați drupalSettings
În consecință, atunci când conectăm o bibliotecă, trebuie să specificăm numele parametrului și valoarea acestuia, care va fi disponibil în fișierul JS al bibliotecii noastre
În consecință, valorile transferate vor fi disponibile în setările drupal ale fișierului nostru JS
Conectați un fișier CSS / JS la distanță
Pentru a conecta fișierele la biblioteca care se află pe un server de la distanță, de exemplu, poate fi biblioteca Yandex.Maps, trebuie să specificați calea completă la acest fișier și să adăugați un tip de atribut suplimentar: extern. astfel încât conexiunea Yandex.Map va arăta astfel:
În plus, puteți trece atribute suplimentare
Conectarea bibliotecilor externe la CDN
De asemenea, putem folosi biblioteci externe care se află în CDN, de exemplu, conexiunea bibliotecii Colorbox va arăta astfel:
Inserați scriptul JS pe pagină
De asemenea, puteți încorpora un JS inline, prin intermediul hook_page_attachments (), de exemplu, să emită o alertă normală:
Cred că se poate termina.
Descărcați modulul utilizat în exemplu
Articole similare
Trimiteți-le prietenilor: