Drupal ei ole “valitse teema ja klikkaa värit kohdilleen” -järjestelmä. Se on enemmän arkkitehtuuria kuin sisustusta. Drupal-teema ei ole vain ulkoasu, vaan kerros, joka keskustelee renderöintijärjestelmän, Twig-templaattien ja asset-hallinnan kanssa. Jos WordPress-teema on sisustuspaketti, Drupal-teema on rakennuksen julkisivun suunnitelma.
Sukelletaan tekniseen rakenteeseen.
Mitä Drupal-teema oikeasti on
Drupal-teema määrittelee, miten sisältö esitetään. Sisältölogiikka ja data tulevat moduuleista ja ytimestä, mutta teema hallitsee:
-
-
HTML-rakenteen
-
-
CSS- ja JavaScript-tiedostot
-
Twig-templaatit
-
Layout-rakenteet
-
Region-alueet
Tärkeä ajatus: Drupal erottaa selkeästi datan ja esitystavan. Tämä on klassista MVC-ajattelua (Model–View–Controller), vaikka Drupal ei ole puhdas MVC-kehys.
Teeman hakemistorakenne
Tyypillinen Drupal 9/10 -teema sijaitsee polussa:
/themes/custom/teeman_nimi
Perusrakenne näyttää tältä:
-
teeman_nimi.info.yml
-
teeman_nimi.libraries.yml
-
teeman_nimi.theme
-
templates/
-
css/
-
js/
-
images/
Tässä kohtaa tapahtuu taikuus.
info.yml – teeman metatiedot
info.yml on teeman ydinmäärittely. Se kertoo Drupalille:
-
Teeman nimi
-
Drupal-ytimen versioyhteensopivuus
-
Base theme -riippuvuudet
-
Region-alueet
-
Liitettävät kirjastot
Esimerkki loogisesta sisällöstä:
-
name: Teeman nimi
-
type: theme
-
base theme: classy
-
core_version_requirement: ^10
Base theme on keskeinen käsite. Se tarkoittaa, että teema perii toisen teeman rakenteen ja voi yliajaa osia siitä. Classy ja Stable ovat yleisiä pohjia.
Tämä on periytymismalli, vähän kuin olio-ohjelmoinnin luokkaperintä.
Twig-templaatit – esityskerros
Drupal käyttää Twig-templating-moottoria. Twig on PHP-pohjainen template engine, joka erottaa logiikan ja HTML-rakenteen.
Templaatit löytyvät yleensä:
/templates/
Esimerkkejä:
-
page.html.twig
-
node.html.twig
-
block.html.twig
-
region.html.twig
Twigissä käytetään:
-
{{ muuttuja }} tulostamiseen
-
{% looginen rakenne %} ehtorakenteisiin
-
{# kommentti #} kommentointiin
Tärkeää on template suggestion -järjestelmä. Drupal valitsee automaattisesti tarkemman template-tiedoston, jos sellainen löytyy. Esimerkiksi:
node–article.html.twig
Tämä kohdistuu vain article-sisältötyyppiin.
Tämä rakenne tekee teemasta erittäin hienojakoisesti muokattavan.
Render array -järjestelmä
Drupal ei renderöi sisältöä suoraan HTML:ksi. Se käyttää render array -rakennetta, joka on PHP-taulukko, joka kuvaa:
-
Mitä elementtiä renderöidään
-
Mitä teemafunktiota käytetään
-
Mitä dataa siihen liitetään
Twig saa lopulta tämän rakenteen käsiteltäväksi.
Tämä abstraktiokerros mahdollistaa:
-
Cachen tehokkaan hallinnan
-
Hook-järjestelmän laajennukset
-
Esitystavan muuttamisen ilman datan rikkomista
Jos tämä kuulostaa insinöörimäiseltä, se on sitä. Mutta samalla se tekee Drupalista skaalautuvan.
libraries.yml – asset-hallinta
Drupal ei lataa CSS- ja JS-tiedostoja suoraan headeriin. Sen sijaan ne määritellään kirjastoksi libraries.yml-tiedostossa.
Esimerkiksi:
-
global-styling
-
css:
-
theme:
-
css/style.css
-
-
-
js:
-
js/script.js
-
Tämän jälkeen kirjasto liitetään info.yml-tiedostossa tai attach_library-funktiolla Twigissä.
Tämä mahdollistaa:
-
Riippuvuuksien hallinnan
-
Cachen optimoinnin
-
Assettien yhdistelyn
Se on järjestelmällisempi kuin suora <link>-tagien lisääminen.
.theme-tiedosto ja hookit
Teeman_nimi.theme on PHP-tiedosto, jossa voidaan käyttää hook-järjestelmää.
Hookit ovat Drupalin laajennusmekanismi. Esimerkiksi:
hook_preprocess_node()
Tällä voidaan muokata muuttujia ennen kuin ne siirtyvät Twig-templaatille.
Preprocess-vaihe on tärkeä, koska se:
-
Muokkaa render array -dataa
-
Lisää uusia muuttujia
-
Valmistelee esityksen
Tämä on kohta, jossa backend ja frontend kohtaavat.
Region-alueet ja layout
info.yml-tiedostossa määritellään regionit, kuten:
-
header
-
content
-
sidebar
-
footer
Nämä ovat loogisia alueita, joihin blokkeja voidaan sijoittaa hallintapaneelista.
Layout Builder -järjestelmä Drupal 9/10 -versioissa tuo visuaalisen tason tähän, mutta taustalla rakenne perustuu edelleen templateihin ja render arrayhin.
Base theme ja subtheme-arkkitehtuuri
Yleinen käytäntö on:
-
Käyttää base themea (esim. Classy tai Bootstrap)
-
Luoda custom subtheme
Subtheme perii kaiken base themelta, mutta voi yliajaa:
-
CSS
-
Twig-templaatit
-
Kirjastot
-
Preprocess-funktiot
Tämä vähentää koodin määrää ja lisää ylläpidettävyyttä.
Ajattele sitä kuin geneettistä periytymistä: ominaisuudet siirtyvät, mutta niitä voidaan muokata.
Caching ja suorituskyky
Drupal käyttää aggressiivista välimuistijärjestelmää. Teema vaikuttaa siihen, miten:
-
Twig-templateja cachetetaan
-
Assetteja yhdistellään
-
Render array -rakenteita tallennetaan
Cache tagit ja cache contexts ovat keskeisiä käsitteitä. Ne määrittävät, milloin sisältö invalidioidaan.
Tämä on syy siihen, miksi Drupal toimii hyvin suurissa enterprise-ympäristöissä.
Yhteenveto
Drupal-teeman tekninen rakenne perustuu:
-
info.yml-metatietoihin
-
Twig-templaattijärjestelmään
-
Render array -arkkitehtuuriin
-
libraries.yml-asset-hallintaan
-
Hook- ja preprocess-mekanismeihin
-
Base theme -periytymiseen
Se ei ole kevyin järjestelmä oppia, mutta se on rakenteellisesti erittäin johdonmukainen. Drupalissa teema ei ole vain visuaalinen pinta, vaan osa laajempaa arkkitehtuuria.
Kun tämän ymmärtää, Drupal ei tunnu enää monimutkaiselta – se tuntuu systemaattiselta. Ja järjestelmällisyys on ystäväsi, kun rakennetaan isoja ja pitkäikäisiä järjestelmiä.
