Drupal 8 - összekötő css és js
Amint azt a Drupal 7-ben is tudja, a JS és a CSS fájlok összekapcsolása egyszerűen megvalósult, nevezetesen a megfelelő funkciók használatával:
- drupal_add_js () - a JS fájl csatlakoztatása
- drupal_add_css () - a stílusok kapcsolata
És van még egy a könyvtárak összekapcsolására:
A 8. verzióban ezt a megközelítést elhagyták a könyvtárak használata mellett. A Drupal 8-ban található könyvtár JS fájlok és / vagy stílustáblák készlete, a szükséges függőségekkel.
Alapértelmezésben a Drupal már nem tölti be az összes oldalt a webhely szükséges JS vagy CSS fájlok, míg te nyilván ő nem adja meg az ok a rossz hatással van a teljesítményre. Például, ha létrehoz egy könyvtár a JS fájlt Jquery, de nem adja meg attól könyvtár, a könyvtár függ a további könyvtárak - Jquery, Drupal természetesen nem automatikusan csatlakozni Jquery.
Most kezdjük el a sorrendet. Mint mindig, teszteljük az egyéni modult. Az én esetemben library_ex lesz.
Hogyan hozzunk létre egy könyvtárat a Drupal-ban?
Könyvtárak létrehozásához használjon egy speciális fájlt az yml formátumban, amelynek neve a sablonból épül fel
Szeretném tudni, hogy az yml formátumú fájlok csak egy objektum leírását tartalmazzák, például a module_name.info.yml tartalmazza a modul leírását, amelyet a modulok oldalon láthat.
Az én esetemben ez a fájl library_ex.libraries.yml lesz
Az első sor a könyvtár neve, majd a paraméterek listája. Minden paraméter egy új sorral kezdődik, mint az értékek.
css - tartalmazza a fájlok listáját, amelyeket a könyvtár használatakor csatlakoztatni kell. Amint láthatjuk ebben a paraméterben, vannak további típusok, ebben az esetben a bázis. ez a paraméter a stílus típusát jelzi. A lehetséges stílusok listája:
- a HTML elemekhez kapcsolódó stílusok - például a normalizálási stílusok visszaállításához szükséges fájlok - alapú fájljait ilyen típusúan kell csatlakoztatni. Ez a típus súlyt rendel a CSS_BASE = -200 fájlhoz
- elrendezés - az ilyen típusú fájlokat olyan fájlokhoz kell csatlakoztatni, amelyek stílusai az oldalelemek elhelyezkedéséhez kapcsolódnak, például a Bootstrap keretfájlok. Ez a típus súlyt rendel a CSS_LAYOUT = -100 fájlhoz
- összetevő - ebben a típusban olyan fájlokat kell csatlakoztatni, amelyek stílusát többször használják az oldalon. Ez a típus súlyt rendel a CSS_COMPONENT = 0 fájlhoz
- állapot - ebben a típusban olyan fájlokat kell csatlakoztatni, amelyek stílusai kapcsolódnak a kliens oldal változásához. Ez a típus súlyt rendel a CSS_STATE = 100 fájlhoz
- téma - ebben a típusban az összetevő vizuális stílusát használó fájlokat össze kell kötni. Ez a fajta hozzárendeli a teljes CSS_THEME = 200 fájlt
Ezt a megközelítést a SMACSS szabványok határozzák meg, bár a BEM - well - t használom, ismét a span alatt.
js - tartalmazza a JS fájlok listáját, amelyeket a könyvtár használatakor össze kell kötni.
függőségek - tartalmazza a könyvtárak listáját, amelyeket a könyvtár használatakor csatlakoztatni kell, például a Jquery-t.
Miután elkészült a könyvtár, most kitaláljuk, hogyan kell összekötni ezt a könyvtárat?
Szeretném tudni, hogy a file module_name.libraries.yml fájlban megadhatsz bármilyen könyvtárt.
Csatlakoztassa a könyvtárat a webhely oldalához
A kapcsolat létrehozásához használja a hook_preprocess_page () modult
Mint könyvtárunkban lévő JS-fájl, megadtunk egy fájlt - library_ex.js, és a számunkra, hogy az oldalon történt, egyszerűen figyelmeztetés ()
Ezután aktiválja a modulunkat, ha még nem tette meg, vagy tisztítsa meg a webhely gyorsítótárát, ha modulja már aktiválva van. A weboldal bármelyik oldalára megyünk, és látjuk, hogy megjelenik a figyelmeztető ablak:
Kiváló könyvtár kapcsolódik az oldal összes oldalához. Most kapcsoljuk össze egy bizonyos oldalra, ehhez módosítsunk egy kis kódot a könyvtárak könyvtár_ex.module-ban
Az űrlap elemtípusához csatlakoztatjuk a könyvtárat
A könyvtárat bármilyen típusú űrlap elemhez is csatlakoztathatjuk, például a textarea típushoz, ezért a hook_element_info_alter ()
Könyvtár csatlakoztatása a TWIG sablonban
A könyvtárat a Twig sablonhoz is csatlakoztathatjuk
A paramétereket a PHP-ből a könyvtárunk JS-fájlába továbbítjuk
Mint a Drupal 7-ben is, átadhatunk egy paramétert a PHP-ből a könyvtárunk JS fájljába a drupalSettings segítségével. Erre a célra a könyvtárunk (könyvtár_ex.libraries.yml) leírásában függőségekként a drupalSettings
Ennek megfelelően egy könyvtár összekapcsolásakor meg kell adni a paraméter nevét és annak értékét, amely elérhető lesz a könyvtárunk JS fájljában
Ennek megfelelően az átvitt értékek elérhetők lesznek a JS fájl drupalSettings-ben
Csatlakoztasson egy távoli CSS / JS fájlt
Kapcsolódni a könyvtár található fájlokat egy távoli szerveren, például ez lehet egy könyvtár Yandex.Maps, meg kell adni a teljes elérési utat, és adjunk hozzá egy további attribútum típusa: külső. így a Yandex.Map kapcsolat így fog kinézni:
Ráadásul további attribútumokat is átadhat
Külső könyvtárak csatlakoztatása a CDN-ből
A CDN-ben található külső könyvtárakat is használhatjuk, például a Colorbox könyvtár kapcsolata így fog kinézni:
Helyezze be a JS szkriptet az oldalon
Az inline JS-t is beágyazhatja a hook_page_attachments () hook-on keresztül, például normál riasztást:
Erre azt gondolom, hogy vége lehet.
A példában használt modul letöltése