Base
Panoramica
I file del tema hanno in comune una struttura di base definita dal file base.html, tutte le restanti views del tema fanno riferimento ai blocchi qui definiti.
In genere qui vengono inseriti:
- Variabili globali utili nel resto del tema
- Importazione delle macro
- L'intestazione del file HTML
- Il tag
<head>
con al suo interno:- Metatag
- File di stile
- Script dell'head (compresi quelli impostati dagli script delle pagine)
- Il tag
<body>
con all'interno:- I blocchi che definiscono la struttura di base delle pagine
- Gli script del body (compresi quelli impostati nelle script delle pagine)
Implementazione
Inserire i metatag
I metatag sono generati in automatico dal SelfComposer, ma se ne possono aggiungere altri in Impostazioni > Generali > Sito Web. Per estrarli all'interno del tema in <head>
è sufficiente inserire la funzione get_meta()
, che creerà il codice HTML necessario. La funzione prevede anche due parametri filter
ed exclude
per filtrarli.
Estrarre gli script inseriti da pannello
Nel pannello di SelfComposer è possibile inserire del codice JavaScript che verrà eseguito in tutte le views del sito (se impostato da "Impostazioni > Generali > Scripts") o in sole specifiche pagine (se definito all'interno della pagina, nell'apposita tab). In entrambi i casi questi script possono essere inseriti in <head>
e/o in <body>
.
Per estrarre questi scripts si può utilizzare la funzione get_scripts()
con il cui primo parametro position
possiamo definire se estrarre gli script destinati all' "head"
o al "body"
. La funzione scriverà il codice HTML contenente gli scripts.
Questa funzione prevede anche altri due parametri per filtrare gli script: filter
e exclude
.
Estrarre i fogli di stile e gli script del tema
Ogni tema avrà dei file CSS che vogliamo includere, con il metodo theme.style()
possiamo inserire un array contenente le path di questi file contenuti nella Cartella assets.
Ad esempio:
{{ theme.style([ 'plugins/bootstrap/css/bootstrap.min.css', 'css/styles.css', 'css/styles-responsive.css', ]) }}
produrrà:
<link media="all" type="text/css" rel="stylesheet" href="http://domainname.com/cms-contents/themes/themename/assets/plugins/bootstrap/css/bootstrap.min.css"> <link media="all" type="text/css" rel="stylesheet" href="http://domainname.com/cms-contents/themes/themename/assets/css/styles.css"> <link media="all" type="text/css" rel="stylesheet" href="http://domainname.com/cms-contents/themes/themename/assets/css/styles-responsive.css">
Il metodo theme.script()
funziona allo stesso modo ed estrae gli script includendoli nell'apposito tag <script src="…">
.
Esempio
Creazione di una view base.html completa
In questo esempio mostreremo come creare un file base.html che fungerà da base per le view del tema. La struttura a blocchi del <body>
è solo a scopo d'esempio, può essere modificata in base alle esigenze; in questo caso includiamo dei file dalla cartella includes.
{# Impostiamo delle variabili globali #} {% set sidebar = theme.settings('sidebar') %} {# Importiamo un file per le macro #} {% import 'macro.default' as macro %} {# Inizializziamo l'HTML con la lingua attiva #} <!DOCTYPE html> <html lang="{{ lang.code }}"> <head> {# Inseriamo i metatag #} {{ get_meta() }} {# Inseriamo gli stili del tema #} {{ theme.style([ 'plugins/bootstrap/css/bootstrap.min.css', 'css/styles.css', 'css/styles-responsive.css', ]) }} {# Inseriamo gli script del pannello #} {{ get_scripts('head') }} </head> <body> {# Definiamo dei blocchi per la struttura, in questo caso utilizziamo delle inclusioni di altre view #} {% block header %} {% include 'includes.header' %} {% endblock %} {% block contents %}{% endblock %} {% block footer %} {% include 'includes.footer' %} {% endblock %} {# Concludiamo con gli script del panello seguiti da quelli del tema, inseriti in un blocco per facilitare l'aggiunta di ulteriori script specifici di alcune views #} {{ get_scripts('body') }} {% block bottom_scripts %} {{ theme.script([ 'plugins/bootstrap/js/bootstrap.min.js', 'js/scripts.js', ]) }} {% endblock %} </body> </html>