base.html
Panoramica
Il file base.html è il più importante della cartella views in quanto include i file di ogni view del sito e ne determina la struttura di base. Il codice scritto al suo interno sarà visibile in tutte le viste che includono base, per questo in genere è strutturato con blocchi di Twig.
Contenuto del file
Il file include la struttura base di una pagina HTML, i collegamenti agli asset e ai plugin, e i blocchi delle varie views.
Variabili del layout
Essendo il contenitore più esterno, se è necessario specificare delle variabili valide per tutto il tema, è consigliato farlo qui.
Le macro
Il file default.html usato per definire le macro (o il vostro file delle macro), viene importato qui e gli viene assegnato un nome, ad esempio:
{% import 'macro.default' as macro %}
In questo modo le macro possono essere utilizzate in tutte le viste del tema.
L'head
L'intestazione dell'HTML segue quella standard, ma è possibile utilizzare alcuni accorgimenti per semplificare la scrittura dei contenuti del tag <head>
.
Meta tag
Per la gestione dei metatag di SelfComposer, va inserita la funzione Twig get_meta()
, ma è possibile aggiungerne manualmente altri come quelli per la gestione del viewport. I metatag generati in automatico del CMS con questa funzione comprendono il title
, quelli inseriti nel pannello nella sezione Impostazioni > Sito Web e altri.
Stili
Per quanto riguarda i tag <link>
generalmente utilizzati per includere i file di stile, è possibile utilizzare la funzione theme.style()
a cui viene associato un array con i percorsi dei file da integrare. In genere vengono inclusi qui tutti i file di stile, prima quelli dei plugin seguiti dai fogli stile specifici del tema.
Questa funzione genererà un tag <link>
con i parametri href
uguale alla stringa immessa, rel=stylesheet
e type=text/css
.
Ad esempio:
{{ theme.style([ 'plugins/bootstrap/css/bootstrap.min.css', 'css/styles.css', 'css/styles-responsive.css', ]) }}
Script
Gli script nel tag head possono essere inseriti manualmente nel codice, ma anche ricavati da quelli inseriti nel pannello alla voce Impostazioni > Scripts o negli script delle pagine. Per quest'ultimi è possibile utilizzare la funzione get_scripts('head')
che produrrà un tag <script>
contenente il codice inserito nei campi del pannello.
Il body
Il tag <body>
contiene l'HTML che rimane costante per ogni pagina e i blocchi di Twig, suddivisi solitamente in header, contents, footer e script a fondo pagina. È buona norma tenere questa sezione pulita per avere una suddivisione più chiara dei blocchi del sito.
Header
Il blocco header rappresenta la testata del sito ed è in genere uguale per tutte le pagine del sito. Per questo motivo solitamente viene definito nel file header.html ed incluso in base.html. Si consiglia comunquedi inserire l'inclusione in un blocco, per poter modificare facilmente l'header in alcune viste specifiche, in questo modo:
{% block header %} {% include 'includes.header' %} {% endblock %}
Content
Questo blocco rappresenta il contenuto della pagina ed in genere viene sempre modificato per ogni file di views.
{% block contents %}{% endblock %}
Footer
Come per l'header, il footer è un blocco che generalmente rimane costante nelle pagine, per questo di solito viene incluso il file footer.html.
{% block footer %} {% include 'includes.footer' %} {% endblock %}
Script del body
Gli script nel body possono essere inseriti tramite la funzione theme.script()
che permette di definire il percorso dei file affinché vengano inseriti nel tag <script>
, in modo simile alla funzione theme.style()
vista sopra. In genere è consigliabile inserire prima gli script dei plugin, seguiti da quelli specifici del tema come scripts.js.
Ad esempio:
{{ theme.script([ 'plugins/bootstrap/js/bootstrap.min.js', 'js/scripts.js', ]) }}
Inoltre in questa parte viene inserita nuovamente la funzione per ottenere gli script dalla sezione Impostazioni > Scripts del tema per la parte del body, in questo modo: get_scripts('body')
.
File Originale
Una linea standard per un buon file base.html pulito è la seguente:
- base.html
{# -------------------------------------------------------- VARIABILI COMUNI -------------------------------------------------------- #} {% set search_form = search_position('left') %} {% set color_details = theme.settings('color_details') %} {% set social_links = theme.settings('social_links') %} {# -------------------------------------------------------- MACRO -------------------------------------------------------- #} {% import 'macro.default' as macro %} <!DOCTYPE html> <html lang="{{ lang.code }}"> <head> {{ get_meta() }} <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> {{ theme.style([ 'plugins/bootstrap/css/bootstrap.min.css', 'css/styles.css', 'css/styles-responsive.css', ]) }} {{ get_scripts('head') }} {% block top_scripts %}{% endblock %} </head> <body> <!-- Header --> {% block header %} {% include 'includes.header' %} {% endblock %} <!-- Content --> {% block contents %}{% endblock %} <!-- Footer --> {% block footer %} {% include 'includes.footer' %} {% endblock %} <!-- Scripts --> {{ get_scripts('body') }} {% block bottom_scripts %} {{ theme.script([ 'plugins/bootstrap/js/bootstrap.min.js', 'js/scripts.js', ]) }} {% endblock %} </body> </html>