6.3. Napravite sopstvenu Drupal temu zasnovanu na Stable temi.

Počevši od ovog članka, bavićemo se našom temom u Drupalu. U ovom delu tutorijala analiziraćemo osnove tema u Drupalu, gde šta stoji, kako uključiti i koristiti CSS, JavaScript. Vaša tema će biti zasnovana na tematskom graditelju (theme-builder) iz kernela Stable. Ako želite da učite Drupal, Stable je odličan početak. Ne treba odmah počinjati sa Bootstrapom, jer ćete stalno imati pitanja i greške. U sledećem delu tutorijala, sa znanjem o pravljenju tema za Drupal, krenućemo na rad sa Bootstrapom.

Evo zvanične dokumentacije

https://www.drupal.org/theme-guide/8

Napravite folder za našu temu

Sve nove teme stavljamo u /themes folder. Možete staviti foldere kao u Drupal 7 sajtovima /all/themes, ali je najbolje koristiti novu Drupal strukturu fajlova i staviti ih u /themes folder.

Ja ću napraviti folder /themes/drupalbook, vi možete nazvati temu kako želite:

Napravite fajl sa osnovnim informacijama drupalbook.info.yml

U folderu naše teme napravite fajl theme_name.info.yml:

Ovaj članak daje detaljne informacije o YAML formatu:

https://en.wikipedia.org/wiki/YAML

Obratite pažnju na dve stvari:

1) Nemojte koristiti tabove za uvlačenje, samo razmake.

2) Uvlačenja moraju biti od 1 ili više razmaka. (npr. name: value, a ne name: value).

Unesite u drupalbook.info.yml fajl:

name: Drupalbook
type: theme
base theme: stable
description: Moja prva Drupal tema.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # Ovaj region je obavezan
  sidebar_first: 'Sidebar first' # Ne zaboravite navodnike
  footer: Footer

Hajde da vidimo šta svaka linija znači.

name - ime naše teme. Mašinsko ime naše teme je ime foldera i fajla drupalbook.info.yml - drupalbook.

type - tip projekta je tema (theme) za Drupal.

base theme - nasleđujemo stable temu, ako tema nije izvedena od druge teme, napišite false.

description - opis teme koji se prikazuje u administratorskom panelu.

core - verzija Drupal kernela za koju je tema namenjena.

libraries - ovde uključujemo biblioteke za našu temu. To radimo kroz fajl koji ćemo sledeći napraviti drupalbook.libraries.yml. Obratite pažnju na global-styling, koristićemo ga u drupalbook.libraries.yml.

regions - regioni naše teme. Obavezan je region content kroz koji se prikazuje sadržaj Drupala. Ako ime regiona ima dve ili više reči, ne zaboravite navodnike. Mašinska imena regiona pišu se sa donjom crtom (underscore).

Napravimo biblioteku za našu temu.

Fajl Drupalbook.libraries.yml

Dodajte sledeće linije u drupalbook.libraries.yml:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Sada da prođemo liniju po liniju:

global-styling - ime koje smo postavili u drupalbook.info.yml

css - ovde uključujemo CSS fajlove, za print verziju smo označili media: print.

js - ovde uključujemo javascript fajlove. jQuery je opciono u Drupalu, pa ako želimo koristiti jQuery u našem JS kodu, dodajemo zavisnost za njega

dependencies:
  - core/jquery

Napravite foldere css i js i stavite fajlove u njih:

css/style.css

css/print.css

js/custom.js

Pošto nasleđujemo stable temu, i šabloni (templates) se nasleđuju od nje. Sada idite na sajt u sekciju Appearance (Izgled):

/admin/appearance

očistite keš i omogućite našu temu:

Sada imamo našu novu Drupalbook temu na sajtu: