Drupal 8 - kapcsolat css és js

Mint tudod a Drupal 7 kapcsolat JS és CSS fájlok valósult egyszerűen és pontosan a megfelelő funkciókat:

  • drupal_add_js () - kapcsolat JS fájl
  • drupal_add_css () - Connection stílusok

És volt egy másik kapcsolatot könyvtárak:

A 8. változata ezt a megközelítést elvetették a könyvtárhasználati. Könyvtár Drupal 8 - egy sor fájl, JS és / vagy a stíluslapok, a szükséges függőségeket.

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 nézzük sorrendben. Mint mindig fogunk tesztelni egy egyéni modult. Az én esetemben ez lesz az úgynevezett library_ex.

Hogyan hozzunk létre egy könyvtárat a Drupal 8

Létrehozásához könyvtárakat egy speciális fájl yml formátumban, a neve, amelynek alapja egy sablont

Megjegyzem, hogy az összes fájl formátumban yml tartalmazzák a tárgy, például module_name.info.yml fájl - leírást tartalmaz a modult, ami látható a modulok oldalon.

Az én esetemben ez a fájl lesz a neve library_ex.libraries.yml

Az első sor a könyvtár nevét, majd a paraméterek listáját. Minden paraméter kezdődik egy új sort az érték.

css - tartalmazza a fájlok listáját szeretné csatlakoztatni a könyvtárban. Mint látható, ebben a paraméterben, vannak további, ebben az esetben bázis. Ez a paraméter jelzi, hogy milyen típusú stílus. A listát a lehetséges típusú stílusok:

  • bázis - az ilyen típusú kell csatlakoztatni a fájlokat, amelyek stílusok HTML elemeket, például egy fájl visszaállításához normalizálni stílusokat. Az ilyen típusú fájlok rendel tömeg CSS_BASE = -200
  • elrendezés - az ilyen típusú kell csatlakoztatni a fájlokat, amelyek stílust alkalmazni a helymeghatározás elemeket az oldalon, mint például a fájlok Bootstrap keretet. Az ilyen fájlok hozzárendeli tömeg CSS_LAYOUT = -100
  • komponens - az ilyen típusú kell csatlakoztatni a fájlokat, amelyek stílust használják többször az oldalon. Az ilyen fájlok hozzárendeli tömeg CSS_COMPONENT = 0
  • állam - az ilyen típusú kell csatlakoztatni a fájlokat, amelyek utalnak a stílus változik a kliens oldalon. Az ilyen fájlok CSS_STATE hozzárendeli súly = 100
  • téma - az ilyen típusú fájlokat lehet csatlakoztatni, hogy használja a vizuális stílus az alkatrész. Az ilyen típusú fájlok rendel minden CSS_THEME = 200

Ez a megközelítés határozza SMACSS szabványok, bár azt használja a BEM - nos, ismét, a span.

js - tartalmaz egy listát a JS fájlokat szeretne csatlakozni a könyvtárban.

függőségek - listáját tartalmazza könyvtárak lehet összekötve e könyvtár alkalmazásával, például Jquery.

A formáció a könyvtár elkészült, most lássuk, hogyan kell csatlakoztatni ezt a könyvtárat?

Megjegyzem, hogy module_name.libraries.yml fájl - bármelyiket megadhatja könyvtárak száma.

Csatlakoztassa a könyvtár az oldalra

Ahhoz, hogy csatlakozni a horog hook_preprocess_page () a mi modul

Ennek JS fájlt a könyvtárban, már jeleztük a fájl - library_ex.js, és hogy mi lett volna, legalább történik valami az oldalon, mi származik csak alert ()

Következő aktivizáljuk modul, ha még nem tette meg, vagy tisztítsa meg a cache hely, ha a modul már aktiválták. Ugrani bármelyik oldalon az oldalon, és látni, hogy volt egy figyelmeztetés jelenik meg:

Drupal 8 - kapcsolat css és js

Kiváló könyvtár van kötve az összes oldalt az oldal. Most csatlakoztassa egy külön oldalt, hogy sok minden változott a kódfájl libraries_ex.module

Csatlakozó a könyvtár alkotnak típusú elem

Ön is csatlakozhat a könyvtár bármely típusú űrlap elem, mint például a típus - textarea, fel tudjuk használni ezt a horgot hook_element_info_alter ()

Csatlakozó a könyvtár sablon TWIG

Így tudjuk csatlakoztatni a könyvtár és a sablon Twig

Paraméterátadásra PHP JS könyvtári fájl

Ahogy a Drupal 7, akkor át minden paramétert PHP JS fájlt a könyvtár révén drupalSettings. Ehhez a leírást a könyvtár (library_ex.libraries.yml), függőségek jelzik drupalSettings

Ennek megfelelően, amikor csatlakoztatja a könyvtár, meg kell adnia a nevét, a paraméter és annak értéke, amely elérhető lesz a JS fájlt a könyvtárban

Ennek megfelelően a benyújtott értékek lesznek elérhetők a drupalSettings fájl JS

Csatlakozó távoli CSS / JS fájl

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 Yandex.Maps kapcsolatban az alábbiak lesznek:

Plusz, akkor át további attribútumok

Csatlakozó külső könyvtárat a CDN

Mi is használjuk a külső könyvtárakat, amelyek a CDN, így például a csatlakozó Colorbox vyglyadesh könyvtár a következő:

Beágyazása JS script az oldalon

Azt is beágyazni inline JS keresztül horog hook_page_attachments (), például abból a rendszeres Alert:

Ebben azt hiszem, be lehet fejezni.

Letöltés modul a példában használt