Üdvözöljük a Drupal világában, ahol a rugalmasság és a teljesítmény találkozik az elegáns megjelenéssel! Ha Ön Drupal sminkfejlesztő, vagy csak most ismerkedik a témával, bizonyára találkozott már a Twig kifejezéssel. A Drupal 8-tól kezdődően a Twig vált a rendszer hivatalos sablonmotorjává, leváltva a korábbi PHPTemplate rendszert. Ez a váltás nem véletlen: a Twig egy gyors, biztonságos és rendkívül rugalmas sablonrendszer, amely jelentősen megkönnyíti a tiszta és karbantartható kódbázisok létrehozását. Ebben a cikkben mélyrehatóan bemutatjuk a Twig alapjait, különös tekintettel arra, hogyan illeszkedik a Drupal ökoszisztémájába, és hogyan használhatja ki teljes potenciálját a lenyűgöző sminkek létrehozásához.
Miért pont Twig? A Drupal és a Twig Szimbiózisa
A Twig sablonrendszer bevezetése a Drupal 8-ban paradigmaváltást hozott. A korábbi PHPTemplate motor, bár funkcionális volt, gyakran lehetőséget adott arra, hogy a megjelenítési logikát összekeverjük az üzleti logikával. Ez nehezítette a kód karbantarthatóságát és tesztelhetőségét. A Twig ezzel szemben egy „logic-less” (vagy legalábbis minimális logikát engedélyező) sablonrendszer, amely arra ösztönzi a fejlesztőket, hogy a megjelenítést elkülönítsék a funkcionális logikától. Ezáltal a sablonfájlok tisztábbak, könnyebben olvashatóak és egyszerűbben módosíthatóak lesznek.
A Twig fő előnyei a Drupal környezetben:
- Tisztaság és olvashatóság: A Twig szintaxisa egyszerű és intuitív, a sablonok könnyen áttekinthetők.
- Biztonság: Alapértelmezés szerint minden kimenet automatikusan „escape-el” (HTML speciális karaktereket alakít át), ami megakadályozza az XSS (Cross-Site Scripting) támadások jelentős részét.
- Gyorsaság: A Twig sablonok PHP kódra fordulnak le, és gyorsítótárazásra kerülnek, ami jelentősen javítja az oldalbetöltési időt.
- Rugalmasság: Széles körű funkciókat, filtereket és vezérlési struktúrákat kínál, amelyekkel szinte bármilyen megjelenítési igény kielégíthető.
- Fejlesztői élmény: A Twig debug funkciói, és a Drupalban elérhető fejlesztői eszközök, mint a Devel és a Kint, nagyban megkönnyítik a hibakeresést és a sablonfejlesztést.
A Twig Alapvető Szintaxisa
A Twig sablonok három fő elemből épülnek fel:
1. Változók megjelenítése (Output)
A változók értékének kiírására a kettős kapcsos zárójelet használjuk: {{ variable_name }}. Ez a szerkezet kiírja a variable_name nevű változó értékét a sablonba, és alapértelmezetten automatikusan HTML-karakterekké alakítja a speciális karaktereket (például < helyett < lesz). Ez a beépített biztonsági mechanizmus kritikus fontosságú.
{{ page_title }}
{{ user.name }}
{{ node.title.value }}2. Vezérlési struktúrák (Logic)
A programlogika, mint a feltételes utasítások (if/else) vagy a ciklusok (for), a kettős kapcsos zárójel és a százalékjel kombinációjával adható meg: {% ... %}.
{% if logged_in %}
Üdv újra, {{ user.name }}!
{% else %}
Kérjük, jelentkezzen be.
{% endif %}
{% for item in items %}
{{ item.title }}
{% endfor %}3. Megjegyzések (Comments)
A Twig sablonokba megjegyzéseket is elhelyezhetünk, amelyek nem jelennek meg a kimenetben. Ezeket a kettős kapcsos zárójel és a kettős kereszt (hashmark) közé írjuk: {# ... #}.
{# Ez egy Twig megjegyzés, ami nem jelenik meg az oldalon. #}Gyakori Twig Funkciók és Filterek Drupalban
A Twig filterek olyan függvények, amelyek módosítják egy változó kimenetét. A filtereket a | jellel kapcsoljuk a változóhoz. A Twig függvények pedig önállóan, egy adott feladat elvégzésére hívhatók meg.
Néhány alapvető Twig Filter:
|raw: Kikapcsolja az automatikus HTML escape-elést. Óvatosan használd! Csak akkor, ha biztos vagy benne, hogy a változó tartalma biztonságos (pl. a Drupal már sanitizálta). Példa:{{ content|raw }}|t: A Drupal fordítási API-ját használja a szöveg lefordítására. Példa:{{ 'Hello world'|t }}|without(variable_name): Eltávolít egy bizonyos gyermeket egy renderelhető tömbből. Nagyon hasznos, ha egy renderelhető tömb egy részét már kiírtuk, és nem szeretnénk, hogy a{{ content }}később újra megjelenítse. Példa:{{ content|without('body', 'field_image') }}|date(format): Formázza a dátumot. Példa:{{ node.created.value|date('Y-m-d H:i') }}|length: Visszaadja egy sztring hosszát, vagy egy tömb elemeinek számát. Példa:{{ items|length }}|clean_class: A Drupal saját filtere, amely egy sztringet érvényes CSS osztálynévvé alakít. Példa:{{ node.type.target_id|clean_class }}
Néhány alapvető Twig Függvény:
url(path, options): Generál egy URL-t a Drupal útválasztási rendszerével. Példa:{{ url('node.add', {'node_type': 'article'}) }}path(path, options): Generál egy belső útvonalat. Példa:{{ path('node.add', {'node_type': 'page'}) }}link(text, url, attributes): Generál egy linket (<a>tag-et). Példa:{{ link('Go to Home', '') }}file_url(uri): Generál egy URL-t egy fájlhoz a Drupal fájlrendszerében. Példa:{{ file_url(node.field_image.entity.uri.value) }}attach_library('olyan_theme/olyan_library'): Egy Drupal library-t (CSS/JS) csatol az aktuális oldalhoz. Példa:{% attach_library('my_theme/my_custom_js') %}
Vezérlési Struktúrák és Adatkezelés
A Twig nem csak változók kiírására szolgál, hanem a megjelenítési logika kezelésére is. Nézzünk meg néhány alapvető vezérlési struktúrát:
Feltételes utasítások (If/Elseif/Else)
A {% if ... %} ... {% endif %} szerkezet lehetővé teszi, hogy bizonyos blokkok csak akkor jelenjenek meg, ha egy feltétel igaz.
{% if is_front %}
{% elseif node.type.target_id == 'article' %}
Cikk címe: {{ node.title.value }}
{% else %}
Ez egy normál oldal.
{% endif %}Ciklusok (For)
A {% for ... in ... %} ... {% endfor %} szerkezet tömbök vagy objektumok bejárására szolgál.
{% for item in items %}
<div class="item">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
{% else %} {# Ez a blokk akkor fut le, ha az "items" tömb üres #}
<p>Nincsenek elemek.</p>
{% endfor %}Sablonok Öröklése és Beillesztése (Inheritance & Includes)
A Twig sablonrendszer egyik legerősebb funkciója a sablonok újrafelhasználhatósága az öröklés és beillesztés mechanizmusán keresztül.
extends: Sablonok Öröklése
Az {% extends 'base.html.twig' %} utasítás lehetővé teszi, hogy egy sablon örököljön egy másik (alap) sablon elrendezését. Az alap sablon definiálhat „blokkokat” ({% block block_name %} ... {% endblock %}), amelyeket az örökölt sablon felülírhat vagy kiegészíthet.
{# base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<title>{% block page_title %}Alap cím{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
{# page.html.twig #}
{% extends 'base.html.twig' %}
{% block page_title %}
{{ parent() }} - {{ node.title.value }}
{% endblock %}
{% block content %}
<h1>{{ node.title.value }}</h1>
<div>{{ node.body.value|raw }}</div>
{% endblock %}A parent() függvény segítségével hivatkozhatunk az alap sablonban definiált blokk tartalmára, így kiegészíthetjük azt, nem csak felülírhatjuk.
include: Sablonok Beillesztése
Az {% include 'template_part.html.twig' %} utasítás egy másik sablon fájl tartalmát illeszti be az aktuális helyre. Ez kiválóan alkalmas újrafelhasználható komponensek (pl. kártyák, gombok, menük részei) létrehozására. Lehetőség van változókat is átadni az included sablonnak.
{# card.html.twig #}
<div class="card">
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
{# main.html.twig #}
{% include 'card.html.twig' with { 'title': 'Termék A', 'description': 'Ez egy termék.' } %}
{% include 'card.html.twig' with { 'title': 'Termék B', 'description': 'Ez egy másik termék.' } %}Twig Sminkfejlesztés Drupalban: Gyakorlati Tippek
Most, hogy megismertük a Twig alapjait, nézzük meg, hogyan tudjuk hatékonyan használni a Drupal sminkfejlesztés során.
1. Debugolás: A Fejlesztő Barátja
A Drupal 8/9/10 sminkfejlesztés egyik legfontosabb eszköze a Twig debug. Ennek bekapcsolásához szerkessze a sites/default/services.yml fájlt (ha még nincs ilyen, másolja át a default.services.yml fájlból), és állítsa be a következőket:
parameters:
twig.config:
debug: true
auto_reload: true
cache: falseEzután ürítse a Drupal gyorsítótárát. Ha most betölt egy oldalt, a HTML kimenetben megjegyzéseket fog látni, amelyek jelzik, melyik Twig sablonfájl generálta az adott HTML részt, és mely alternatív fájlneveket (template suggestions) használhatja felülíráshoz. Ez felbecsülhetetlen értékű a megfelelő sablon azonosításához és felülírásához.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
x node--article--full.html.twig
x node--article.html.twig
x node--full.html.twig
* node.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/olyan_theme/templates/content/node.html.twig' -->
...
<!-- END OUTPUT from 'themes/olyan_theme/templates/content/node.html.twig' -->
2. Változók felfedezése (Kint & Devel)
A Twig sablonokban elérhető változók tartalmának megértéséhez telepítse a Devel modult, amely magával hozza a Kint könyvtárat. Ezután a Twig sablonokban a {{ kint() }} függvénnyel kiírathatja az aktuálisan elérhető összes változót, vagy a {{ kint(variable_name) }} paranccsal egy specifikus változó tartalmát. Ez egy interaktív, kibontható fában mutatja meg az adatstruktúrát, ami elengedhetetlen a bonyolult Drupal renderelhető tömbök megértéséhez.
{# Kiírja az összes elérhető változót #}
{{ kint() }}
{# Kiírja a "node" változó tartalmát #}
{{ kint(node) }}3. Sablonok Felülírása (Overrides)
A Drupalban a sablonok felülírása a sminkfejlesztés alapja. A Twig debug által javasolt fájlnevek (template suggestions) alapján egyszerűen másolja át a modul vagy a core által biztosított Twig fájlt a saját sminkje templates mappájába, majd nevezze át a kívánt, specifikusabb névre. Például, ha a node--article.html.twig fájlt szeretné módosítani egy „Article” tartalomtípushoz, akkor másolja a core/modules/node/templates/node.html.twig fájlt a sminkje templates mappájába, és nevezze át node--article.html.twig-re.
Fontos, hogy minden sablon felülírása után üríteni kell a gyorsítótárat, hogy a Drupal felismerje az új fájlt.
4. Preprocess Funkciók: Adatok előkészítése Twig számára
Bár a Twig minimális logikát engedélyez, a bonyolultabb adatelőkészítést érdemes a preprocess függvényekben elvégezni. Ezek PHP függvények, amelyek a sminkünk .theme fájljában helyezkednek el, és lehetővé teszik, hogy extra változókat adjunk át a Twig sablonoknak, vagy módosítsuk a már meglévőket.
Példa egy preprocess függvényre (olyan_theme.theme fájlban):
/**
* Implements hook_preprocess_node().
*/
function olyan_theme_preprocess_node(&$variables) {
// Ellenőrizzük, hogy a node objektum létezik-e.
if (isset($variables['node']) && $variables['node'] instanceof DrupalnodeNodeInterface) {
/** @var DrupalnodeNodeInterface $node */
$node = $variables['node'];
// Hozzáadunk egy egyéni változót a Twig számára.
$variables['my_custom_variable'] = 'Ez egy egyéni változó a ' . $node->getTitle() . ' node-ból.';
// Módosíthatjuk a meglévő változókat is.
if ($node->bundle() == 'article') {
$variables['article_class'] = 'is-article';
}
}
}Ezek a változók ezután elérhetők lesznek a node.html.twig sablonban {{ my_custom_variable }} és {{ article_class }} néven.
Best Practices és Biztonság
A Twig használata során érdemes betartani néhány bevált gyakorlatot:
- Tartsd külön a logikát és a megjelenítést: Amennyire csak lehet, a komplex számításokat és adatmanipulációt végezd el a preprocess függvényekben, és csak az előkészített adatokat add át a Twig sablonnak.
- Használj értelmes változóneveket: A sablonok könnyebben olvashatóak és karbantarthatóak, ha a változók nevei beszédesek.
- Használd ki az öröklést és a beillesztést: Ezek a mechanizmusok segítenek a kódduplikáció elkerülésében és a komponens alapú fejlesztésben.
- Soha ne kapcsold ki az automatikus escapinget indokolatlanul: A
|rawfiltert csak akkor használd, ha 100%-ig biztos vagy benne, hogy a kiírandó tartalom biztonságos, és nincs szüksége további escapingre. - Rendszeresen ürítsd a gyorsítótárat: Különösen fejlesztés közben, ha sablonfájlokat módosítasz vagy újakat adsz hozzá.
- Kommentáld a kódod: Még a sablonfájlokban is hasznos, ha megjegyzésekkel látjuk el a bonyolultabb részeket.
Összefoglalás
A Twig sablonrendszer egy erőteljes és elegáns eszköz a Drupal sminkfejlesztők kezében. Megértve alapvető szintaxisát, a Drupalba integrált funkcióit és a hozzá tartozó fejlesztői eszközöket, jelentősen felgyorsíthatja és hatékonyabbá teheti a munkafolyamatát. A Twig tisztaságra, biztonságra és modularitásra ösztönöz, ami hosszútávon stabilabb és könnyebben karbantartható weboldalakat eredményez. Ne féljen kísérletezni, használja a debug eszközöket, és hamarosan Ön is magabiztosan fogja kezelni a Twiget a Drupal projektekben.
Reméljük, ez az átfogó útmutató segít Önnek elindulni a Twig és a Drupal sminkfejlesztés izgalmas világában!
Leave a Reply