@harrasteblogi JUURI NYT
--:--

Tilaa uutiskirje

Saat tuoreimmat 10 uusinta artikkelia kerran viikossa sähköpostiisi.

Tilaa uutiskirje

Twig-templaten muokkaaminen DrupalissaTwig on Drupalin käyttämä templating-järjestelmä, jonka avulla määritellään, miten verkkosivuston sisältö esitetään käyttäjälle. Twig erottaa sivuston ulkoasun liiketoimintalogiikasta, mikä tekee kehityksestä selkeämpää, turvallisempaa ja helpommin ylläpidettävää. Drupalissa Twig-templatejen muokkaaminen on keskeinen osa teemakehitystä, sillä niiden avulla voidaan hallita sivujen rakennetta, HTML-koodia ja yksittäisten sisältöelementtien ulkoasua ilman, että ydintiedostoihin tarvitsee tehdä muutoksia.

Mikä on Twig?

Twig on PHP-pohjainen templating-moottori, jota Drupal käyttää sivujen renderöintiin. Sen tehtävänä on muodostaa HTML-sisältö käyttäjälle Drupalin tarjoamasta datasta.

Twigin avulla voidaan muokata esimerkiksi:

  • sivupohjia
  • sisältötyyppejä
  • lohkoja
  • valikoita
  • lomakkeita
  • näkymiä
  • mediakohteita
  • taksonomiasivuja

Koska Twig erottaa ulkoasun sovelluslogiikasta, sivuston ylläpito ja jatkokehitys ovat helpompia.

Miksi Twigiä kannattaa käyttää?

Twig tarjoaa useita etuja verrattuna vanhempiin mallinnusratkaisuihin.

Sen vahvuuksia ovat:

  • selkeä syntaksi
  • parempi tietoturva
  • helppo ylläpidettävyys
  • hyvä suorituskyky
  • joustava muokattavuus
  • yhteensopivuus Drupalin teemajärjestelmän kanssa

Lisäksi Twig estää oletusarvoisesti haitallisen HTML-koodin suorittamisen, mikä vähentää tietoturvariskejä.

Twig-templatejen sijainti

Twig-tiedostot sijaitsevat yleensä käytössä olevan teeman kansiossa.

Yleisiä template-tiedostoja ovat esimerkiksi:

  • page.html.twig
  • node.html.twig
  • block.html.twig
  • region.html.twig
  • views-view.html.twig
  • field.html.twig
  • paragraph.html.twig
  • media.html.twig

Näiden avulla voidaan muokata lähes kaikkia sivuston näkyviä osia.

Template-hierarkia

Drupal hyödyntää template-ehdotuksia (template suggestions), joiden avulla voidaan luoda tarkasti tiettyä sisältöä koskevia Twig-tiedostoja.

Esimerkkejä ovat:

  • node.html.twig
  • node–article.html.twig
  • node–page.html.twig
  • node–blog.html.twig

Mitä tarkempi tiedoston nimi on, sitä kohdennetummin ulkoasua voidaan hallita.

Twig Debug helpottaa kehitystä

Kehitysympäristössä Twig Debug kannattaa ottaa käyttöön.

Sen avulla voidaan nähdä:

  • mikä template on käytössä
  • mahdolliset template-ehdotukset
  • renderöitävät muuttujat

Tämä nopeuttaa oikean tiedoston löytämistä ja helpottaa teemojen kehittämistä.

Muuttujien hyödyntäminen

Twigissä sisältöä käsitellään muuttujien avulla.

Esimerkiksi sivulla voidaan näyttää:

  • otsikko
  • sisältö
  • julkaisuajankohta
  • kirjoittaja
  • kuva
  • linkit
  • tunnisteet

Muuttujien avulla voidaan rakentaa dynaamisia sivupohjia ilman suoraa PHP-koodia template-tiedostoissa.

Ehtolauseet ja silmukat

Twig tukee ehtolauseita ja silmukoita, joiden avulla sisältöä voidaan näyttää tilanteen mukaan.

Esimerkiksi voidaan:

  • näyttää kuva vain, jos sellainen on lisätty
  • piilottaa tyhjä kenttä
  • käydä läpi sisältölistoja
  • tulostaa navigaatio automaattisesti

Näin ulkoasusta saadaan joustava ja helposti hallittava.

Kenttien muokkaaminen

Yksittäisten kenttien ulkoasua voidaan muuttaa omilla Twig-templateilla.

Muokattavia elementtejä ovat esimerkiksi:

  • otsikot
  • kuvat
  • painikkeet
  • linkit
  • tekstikentät
  • päivämäärät

Kenttäkohtaiset template-tiedostot mahdollistavat erittäin tarkan hallinnan ilman, että koko sivupohjaa tarvitsee muuttaa.

Views-templatejen mukauttaminen

Views-moduulin tuottamia listauksia voidaan muokata Twigin avulla.

Esimerkkejä ovat:

  • blogilistaukset
  • uutiset
  • tuoteluettelot
  • tapahtumat
  • hakutulokset

Mukauttamalla Views-templateja voidaan rakentaa täysin omiin tarpeisiin sopivia listanäkymiä.

Layout Builder ja Twig

Layout Builder toimii hyvin yhdessä Twigin kanssa.

Layout Builderilla voidaan hallita sivujen rakennetta visuaalisesti, kun taas Twigillä voidaan hienosäätää yksittäisten elementtien HTML-rakennetta ja ulkoasua.

Tämä yhdistelmä tarjoaa sekä sisällöntuottajille että kehittäjille joustavat työkalut.

Välimuistin tyhjentäminen

Twig-templateihin tehdyt muutokset eivät aina näy välittömästi.

Muutosten jälkeen kannattaa:

  • tyhjentää Drupalin välimuisti
  • päivittää selainvälimuisti tarvittaessa
  • tarkistaa, että oikea template on käytössä

Kehitysympäristössä Twig-välimuistia voidaan keventää, jotta muutokset näkyvät nopeammin.

Parhaat käytännöt

Twig-templatejen kehittämisessä kannattaa noudattaa selkeitä toimintatapoja.

Suositeltavia käytäntöjä ovat:

  • älä muokkaa Drupal Coren tiedostoja
  • käytä aliteemaa (subtheme) omille muutoksille
  • nimeä template-tiedostot johdonmukaisesti
  • pidä HTML-rakenne selkeänä
  • vältä monimutkaista logiikkaa templateissa
  • dokumentoi merkittävät muutokset

Hyvin organisoitu teemarakenne helpottaa ylläpitoa ja jatkokehitystä.

Yleisimmät virheet

Twig-templatejen muokkauksessa esiintyy usein samoja ongelmia.

Tyypillisiä virheitä ovat:

  • väärin nimetty template
  • välimuistin unohtaminen
  • muutosten tekeminen Core-tiedostoihin
  • liian monimutkainen logiikka templateissa
  • puuttuvat muuttujat
  • epäyhtenäinen HTML-rakenne

Huolellinen testaus auttaa välttämään nämä ongelmat.

Yhteenveto

Twig on keskeinen osa Drupalin teemajärjestelmää ja tarjoaa tehokkaan tavan hallita verkkosivuston ulkoasua. Sen avulla voidaan mukauttaa sivupohjia, sisältötyyppejä, lohkoja, kenttiä ja näkymiä turvallisesti sekä ylläpidettävästi ilman muutoksia Drupal Coreen.

Kun Twig-templatejen kehityksessä hyödynnetään template-ehdotuksia, Twig Debugia ja selkeää teemarakennetta, Drupal-sivustosta voidaan rakentaa joustava, helposti ylläpidettävä ja yksilöllinen kokonaisuus. Hyvin suunnitellut template-ratkaisut tukevat sekä kehittäjien työskentelyä että sivuston pitkäjänteistä kehittämistä.

🍪