Struktura foldera Drupal 8 tema

Tema je skup fajlova koji definišu nivo prikaza. Takođe možete kreirati jednu ili više „podtema“ ili varijanti teme. Potreban je samo .info.yml fajl, ali većina tema i podtema koristi i druge fajlove. Na ovoj stranici su navedeni fajlovi i folderi koji se nalaze u tipičnoj temi ili podtemi.

Lokacija tema

Teme treba smestiti u folder „themes“ vaše Drupal instalacije. Obratite pažnju da se glavne Drupal teme, poput Bartik i Seven, nalaze u folderu core/themes vaše instalacije.

Preporučuje se da dodate teme budu smeštene u podfolder „contrib“, a vaše sopstvene teme u folder „custom“.

Svaka pojedina tema se nalazi u folderu nazvanom po temi. Na primer, fluffiness. Ime treba da bude mala slova, da počinje slovom i koristi donju crtu (_) umesto razmaka.

(Delimična) struktura vaše Drupal instalacije može izgledati ovako:

  |-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

Struktura foldera teme

Primer fajlova i foldera u tipičnoj strukturi foldera teme:

  |-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

U nastavku su opisi najčešćih fajlova koje možete naći u temi.

*.info.yml
Tema mora imati .info.yml fajl za definisanje teme. Pored ostalog, .info.yml fajl definiše metapodatke, biblioteke i oblasti blokova. Ovo je jedini obavezni fajl u temi.

*.libraries.yml
Fajl .libraries.yml se koristi za definisanje JavaScript i CSS biblioteka koje tema može da učita.

*.breakpoints.yml
Breakpoint-ovi definišu gde treba da se prilagodljivi dizajn menja u zavisnosti od uređaja. Breakpoint-ovi su definisani u fajlu .breakpoints.yml.

*.theme
.theme fajl je PHP fajl koji sadrži svu uslovnu logiku i predprocesiranje podataka. Takođe može proširiti osnovna podešavanja teme. Kreiranje naprednih podešavanja teme.

CSS/
Preporučuje se da CSS fajlovi budu u podfolderu 'css'. Glavne Drupal 8 teme organizuju CSS fajlove po SMACSS vodiču. Da bi tema učitala CSS fajlove, moraju biti definisani u .libraries.yml fajlu i mogu biti prepisani ili uklonjeni u .info.yml fajlu.

JS/
JavaScript fajlovi specifični za temu smešteni su u folder 'js'. Da bi tema učitala JS fajlove, oni moraju biti definisani u .libraries.yml fajlu.

images/
Preporučuje se da slike budu u podfolderu 'images'.

screenshot.png
Ako se fajl screenshot.png nalazi u folderu teme, koristiće se na stranici „Izgled“. Takođe, možete definisati screenshot u .info.yml fajlu.

logo.svg
Ako se vektorski SVG fajl logotipa vaše teme nalazi u folderu teme, može se koristiti u zaglavlju sajta. Logotipe takođe možete učitati u Izgled > Podešavanja.

templates/
Šabloni obezbeđuju HTML markup i određenu logiku prikaza. Za razliku od Drupal 7, Drupal 8 šabloni (fajlovi *.html.twig) moraju biti u podfolderu 'templates'. Ako pratite određena pravila imenovanja, Drupal će zameniti podrazumevane osnovne šablone sa vašim, što vam omogućava da prepišete podrazumevani markup. Takođe možete organizovati svoje šablone u podfoldere, na primer, sve šablone blokova u templates/blocks i sve šablone prikaza u templates/views.

Primer glavne teme Bartik: struktura foldera

Za primer pogledajte strukturu foldera Bartik, koji se nalazi u core/themes/bartik:

  |-bartik.breakpoints.yml
  |-bartik.info.yml
  |-bartik.libraries.yml
  |-bartik.theme
  |-color
  |  |-color.inc
  |  |-preview.css
  |  |-preview.html
  |  |-preview.js
  |-config
  |  |-schema
  |  |  |-bartik.schema.yml
  |-css
  |  |-colors.css
  |  |-layout.css
  |  |-maintenance-page.css
  |  |-print.css
  |-images
  |  |-add.png
  |  |-required.svg
  |  |-tabs-border.png
  |-logo.svg
  |-screenshot.png
  |-templates
  |  |-block--search-form-block.html.twig
  |  |-block--system-branding-block.html.twig
  |  |-block--system-menu-block.html.twig
  |  |-block.html.twig
  |  |-comment.html.twig
  |  |-field--taxonomy-term-reference.html.twig
  |  |-maintenance-page.html.twig
  |  |-node.html.twig
  |  |-page.html.twig
  |  |-status-messages.html.twig

Više informacija

Standarde za organizaciju CSS fajlova