Struttura delle cartelle dei temi in Drupal 8
Un tema è un insieme di file che definiscono il livello di presentazione. Puoi anche creare uno o più “sotto-temi” o varianti di un tema. È richiesto solo il file .info.yml, ma la maggior parte dei temi e dei sotto-temi utilizzerà anche altri file. In questa pagina sono elencati i file e le cartelle che si trovano in un tema o sotto-tema tipico.
Posizione dei temi
Devi inserire i temi nella cartella "themes" della tua installazione di Drupal. Nota che i temi core di Drupal, come Bartik e Seven, si trovano nella cartella core/themes della tua installazione.
Si consiglia di collocare i temi aggiunti nella sottocartella “contrib” e i tuoi temi personalizzati nella cartella “custom”.
Ciascun tema è contenuto in una directory che porta il nome del tema stesso. Ad esempio, fluffiness. Il nome deve essere in minuscolo, iniziare con una lettera e utilizzare il carattere di sottolineatura (_) invece degli spazi.
(Parziale) struttura della tua installazione di Drupal potrebbe apparire così:
|-core | |-modules | |-themes | | |-bartik | | |-seven .. |-modules |-themes | |-contrib | | |-zen | | |-basic | | |-bluemarine | |-custom | | |-fluffiness
Struttura della cartella di un tema
Ecco un esempio di file e cartelle che si trovano in una tipica struttura di cartelle di un tema:
|-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
Segue la descrizione dei file più comuni che puoi trovare in un tema.
*.info.yml
Un tema deve contenere un file .info.yml per definire il tema. Tra le altre cose, i file .info.yml definiscono i metadati, le librerie e le regioni dei blocchi. Questo è l’unico file obbligatorio in un tema.
*.libraries.yml
Il file .libraries.yml serve per definire le librerie JavaScript e CSS, che possono essere caricate dal tema.
*.breakpoints.yml
I breakpoint definiscono dove il design responsivo deve adattarsi per reagire a diversi dispositivi. I breakpoint sono definiti in un file .breakpoints.yml.
*.theme
Il file .theme è un file PHP che contiene tutta la logica condizionale e la pre-elaborazione dei dati. Può anche estendere le impostazioni base del tema. Creazione di impostazioni avanzate del tema.
CSS/
Si consiglia di archiviare i file .css in una sottocartella 'css'. I temi core di Drupal 8 organizzano i file CSS secondo le linee guida SMACSS. Per fare in modo che il tema carichi i file CSS, devono essere definiti nel file .libraries.yml e possono essere sovrascritti o rimossi nel file .info.yml.
JS/
I file JavaScript specifici del tema vengono archiviati nella cartella 'js'. Perché il tema carichi i file JavaScript, questi devono essere definiti nel file .libraries.yml.
images/
Si consiglia di archiviare le immagini nella sottocartella “images”.
screenshot.png
Se un file screenshot.png si trova nella cartella del tema, verrà utilizzato nella pagina “Aspetto”. In alternativa, puoi anche definire lo screenshot nel file .info.yml.
logo.svg
Se nella cartella del tema è presente un file SVG vettoriale del logo del tuo tema, esso può essere usato nell’header del sito. I loghi possono anche essere caricati nella sezione Aspetto > Impostazioni.
templates/
I template forniscono il markup HTML e parte della logica di presentazione. A differenza di Drupal 7, i file template di Drupal 8 (file * .html.twig) devono essere archiviati nella sottocartella 'templates'. Seguendo specifiche convenzioni di denominazione, Drupal sostituirà i template di base con quelli che fornisci, consentendoti di sovrascrivere il markup predefinito. Puoi anche organizzare i tuoi template in sottocartelle, ad esempio tutti i template dei blocchi in templates/blocks e tutti i template delle viste in templates/views.
Tema core Bartik: struttura delle cartelle
Ad esempio, guarda la struttura delle cartelle di Bartik, che si trova in 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