Le pagine
Panoramica
Le pagine rappresentano la funzionalità più importante di SelfComposer, all'interno di queste si trova la gran parte dei contenuti del sito. Ogni pagina può contenere delle figlie senza limiti di sotto-livelli, sono pienamente personalizzabili e il loro aspetto può essere modificato tramite i layout.
In genere sono utilizzate per tutte le voci di un sito e per suddividere i suoi contenuti, ma possono essere anche sfruttate nelle vetrine per mostrare delle immagini in uno slider o per reindirizzare l'utente a pagine esterne attraverso l'utilizzo del redirect.
Le pagine vanno create all'interno del pannello nell'omonima sezione, mentre la loro visualizzazione, nel caso in cui non siano stati applicati dei layout, viene utilizzata la vista del file page_generic.html.
Una funzionalità molto simile è rappresentata dalle news che condividono gran parte delle caratteristiche delle pagine, ma non possono avere più di un sottolivello.
Cosa contengono
Informazioni base della pagina
Ogni pagina è contraddistinta da un id e un URL unici per ogni lingua, e da diversi elementi multilingua:
- Titolo
- Date di inizio e fine pubblicazione
- Impostazioni per il SEO
Descrizione
Ogni pagina può contenere una descrizione principale e una breve, differenti per ogni lingua attiva. Le descrizioni sono personalizzabili dal pannello tramite un campo WYSIWYG che genera un codice HTML.
Immagini
Ad una pagina possono essere associate diverse immagini (principale, alternativa, icona), oltre alle immagini inserite nella descrizione o nella gallery.
Gallery
Form contatti
Ogni pagina può avere un form contatti associato ad un modulo realizzato nel pannello che permette, una volta compilato, di spedire una email con il suo contenuto.
Form pagina
I form pagina permettono di aggiungere nel pannello dei campi per valori personalizzabili per ogni pagina. Vengono usati per mostrare una tabella di caratteristiche di un prodotto o per fornire delle opzioni aggiuntive per le pagine.
Tag
Ad una pagina possono assere associati dei tag che permettono di suddividerle. Questa funzionalità non ha nulla a che vedere con i metatag, ed è stata superata dal concetto di categorie pagina che permettono una gestione più avanzata.
Relazioni
Le pagine possono essere suddivise in categorie per poi essere associate l'una all'altra attraverso delle relazioni. Associando categorie alle pagine, è anche possibile filtrarle attraverso una Ricerca categorie.
Pagine figlie
Ogni pagina può avere più sottolivelli di figlie, che possono essere ricavate con la funzione get_contents()
descritta in seguito.
Implementazione
La suddivisione dei file
SelfComposer utilizza il file page_generic.html come view per le pagine a cui non è stato associato un layout.
Inoltre è possibile, anche se non è obbligatorio, includere il file page_single.html con all'interno tutti i contenuti della pagina. Il file page_generic viene in questo modo utilizzato solo come contenitore con all'interno la struttura base della pagina, l'eventuale inclusione del file page_single.html e la lista delle pagine figlie.
Estrarre contenuti di una pagina
I contenuti delle pagine sono tutti inseriti all'interno della variabile globale content
. Ad esempio per estrarne il titolo è sufficiente richiamare la proprietà title
{{ content.title }}
Per ogni pagina è possibile estrarre da content
:
nome | tipo | descrizione |
---|---|---|
id | string | id della pagina (si può usare anche page_id ) |
parents.id | string | Lista degli id delle pagine padre separate da virgola |
lang_code | string | Il codice della lingua attualmente visualizzata |
layout | string | Nome del layout attivo sulla pagina |
title | string | Titolo della pagina (in lingua) |
slug | string | Slug della pagina, ovvero il nome usato nell'URL |
url | string | URL della pagina a partire dalla root. Esempio azienda/chi-siamo |
status | string | Stato di pubblicazione della pagina, se pubblicata ritorna "Published" |
description | string | Descrizione della pagina |
short_description | string | Descrizione breve della pagina |
image_url | string | URL dell'immagine principale |
alt_image_url | string | URL dell'immagine alternativa |
icon | string | URL dell'icona |
contact_id | string | id del modulo contatti associato alla pagina |
redirect | string | URL del redirect |
publish_start | string | Data di inizio pubblicazione |
publish_end | string | Data di fine pubblicazione |
created_at | string | Data di creazione della pagina |
updated_at | string | Data dell'ultima modifica effettuata alla pagina |
scripts_head | string | Script della pagina in <head> |
scripts_body | string | Script della pagina in <body> |
tags | array | Tag della pagina |
Oltre a questi valori sono disponibili anche funzionalità specifiche per il SEO attivabili dal pannello che agiscono direttamente sui metatag del sito.
Per richiedere invece i contenuti di una pagina diversa da quella in cui ci si trova, è possibile utilizzare la funzione find_page_content()
a cui è possibile passare i seguenti parametri:
nome | tipo | descrizione | valore di default |
---|---|---|---|
page_id | int | id della pagina da cui si vogliono ricavare i contenuti | |
lang_code | string | Codice lingua dei contenuti che si vogliono estrarre |
Ad esempio per estrarre i contenuti in tedesco dalla pagina con id 53:
{% find_page_content(53, 'de') %}
Estrarre le pagine figlie
Se le pagine hanno delle figlie, è possibile mostrarle attraverso la funzione get_contents()
i cui contenuti estratti vengono associati ad una variabile chiamata child
per comodità di lettura. È buona norma utilizzare una sola volta nella pagina la funzione get_contents()
e associarla ad una variabile da cui estrarre i valori, per non aumentare inutilmente i tempi di caricamento.
La funzione get_contents()
permette il passaggio di diversi parametri:
nome | tipo | valore di default | descrizione |
---|---|---|---|
from_id | String | id della pagina attuale | id da cui ricavare le pagine figlie |
take | Int | null | Quantità massima di pagine da estrarre |
valid | Bool | true | Estrae solo le pagine che hanno un contenuto e sono visibili |
paginate | Int | null | Numero di elementi per ogni pagina della paginazione |
order_by | String | null | |
group_by | String | null | |
lang_code | String | Codice lingua attualmente attivo | Codice della lingua del contenuto delle pagine |
exclude_id | String | null | Esclude gli id contenuti nella stringa separati da virgola |
type | String | Sceglie il tipo di pagine, ad esempio solo le news | |
default_lang | String | ||
tags | Array | [] | Filtra in base ai tag indicati nell'array |
id | Int | null | Id del contenuto da estrarre |
from_page_id | Int | null | Id della pagina da cui estrarre i contenuti |
with_image | Bool | false | Estrae solo le pagine che hanno l'immagine principale |
all_childrens | Bool | false | Estrae anche i figli di livelli superiore al primo |
Esempi
Pagina singola completa
In questo esempio abbiamo costruito una pagina che contiene titolo, immagine principale, descrizione, tag, form pagina, gallery, form contatti. Non estraendo i figli, questo codice potrebbe essere inserito all'interno di page_generic.html o incluso in questo come file esterno, solitamente chiamato page_single.html.
- page_single.html
<p>{{ macro.breadcrumb() }}</p> <h1>{{ content.title }}</h1> {# -------------------------------------------------------- IMMAGINE PRINCIPALE -------------------------------------------------------- #} {% if content.image_url %} {% set content_image = content.image %} <a href="{{ content_image.url }}" title="{{ content_image.title }}"> <img alt="{{ content_image.title }}" src="{{ content_image.url|resample(width=400) }}" /> </a> {% endif %} {# -------------------------------------------------------- DESCRIZIONE -------------------------------------------------------- #} <div> {{ content.description }} </div> {# -------------------------------------------------------- TAGS -------------------------------------------------------- #} {% set content_tags = content.tags %} {% if content_tags|length %} <div> <h3>{{ find_label('cms', 'tags_title') }}</h3> </div> <div> {{ macro.tag_cloud(content.tags) }} </div> </div> {% endif %} {# -------------------------------------------------------- FORM PAGINA -------------------------------------------------------- #} {% set page_forms = get_page_form() %} {% if page_forms %} <div> {{ macro.form_page(page_forms) }} </div> {% endif %} {# -------------------------------------------------------- GALLERY -------------------------------------------------------- #} {% if content.gallery|length %} <div> {% for image in content.gallery %} <div> <a href="{{ image.url }}" title="{{ image.title }}"> <img src="{{ image.thumb_url }}" title="{{ image.title }}" /> </a> </div> {% endfor %} </div> {% endif %} {# -------------------------------------------------------- CONTACT FORM -------------------------------------------------------- #} <div> {{ macro.form_bootstrap(find_contact(content.contact_id)) }} </div>
L'esempio contiene richiami ad alcune macro che solitamente vengono incluse nel file delle macro, per le funzioni specifiche di queste sezioni si vedano le pagine specifiche.
Pagina con figli
Il seguente esempio permette di mostrare l'elenco delle pagine figlie di quella visualizzata. Nell'esempio mostreremo immagine principale, descrizione breve e un pulsante che rimanda alla pagina figlia.
La paginazione è stata qui ridotta a 5, quindi dove abbiamo posizionato childs.links
appariranno i link di paginazione per mostrare le altre figlie.
Per controllare l'effettiva presenza di pagine figlie utilizziamo content.count_childrens
che permette di conoscere il numero di pagine figlie della pagina in cui ci troviamo.
- page_generic.html
{% if content.count_childrens %} {% set children = get_contents(content.id, paginate = 12) %} {# -------------------------------------------------------- PAGINAZIONE -------------------------------------------------------- #} <div>{{ children.links }}</div> {# -------------------------------------------------------- CONTENUTI -------------------------------------------------------- #} {% for child in children %} <div> <h3>{{ child.title }}</h3> <div> {{ child.short_description|striptags|truncate(300) }} </div> <a href="{{ child.url }}">{{ find_label('cms', 'read_more') }}</a> {% if child.image_url %} {% set child_image = child.image %} <a href="{{ child.url }}"> <img src="{{ child_image.url }}" alt="{{ child_image.title }}"> </a> {% endif %} </div> {% endfor %} {% endif %}
Dall'array children
che abbiamo utilizzato, è possibile ricavare tutti i contenuti delle figlie, con le stesse proprietà di content
.