Creare pagine con il CMS Grav

Così come anticipato nel precedente articolo dedicato all’introduzione su Grav CMS File Flat.

Vediamo nel dettaglio come dobbiamo procedere e qualche accorgimento che ci farà risparmiare tempo prezioso.
Premesso che Grav nativamente vi consente di utilizzare tre tipologie di pagine:

• Standard o pagina normale
• Listing o pagina vista lista
• Modular o pagina modulare

Vi ho già parlato del pannello di controllo, qui tra le varie voci troverete “Pagine”, cliccando sulla voce verrete condotti alla sezione destinata alla gestione e creazione delle pagine.
Potrete notare sul lato destro l’elenco delle pagine e le icone per la visualizzazione o per la rimozione.
Nella parte inferiore la “Legenda di pagine” ove presenti le selezioni per lo stato delle o della pagina.

Prima di procedere e se da verifica non risultasse installato, dovrete installare ed attivare il plugin TinyMCE, avrete così un editor più vicino a quelli che avete sempre usato e che vi renderà la scrittura delle vostre pagine più semplice.
Per scaricare il plugin potete seguire queste fonti:

• Sito ufficiale di Grav
• Github

Adesso siamo pronti per iniziare a scrivere la nostra prima pagina…

Non ancora!

Due premesse importanti, Grav non dispone del salvataggio pagine in automatico e al salvataggio ci ritroveremo comunque a capo della pagina, suggerisco il salvataggio frequente o la copia del testo da nostro editor in locale.

Se avete di fronte la prima installazione vi troverete di default due pagine:

• Home
• Typography

Non le rimuovete, potrebbero servirvi come esempio per la compilazione delle vostre nuove pagine e potranno essere rimosse in seguito.

Come è strutturata la pagina?

Ad ogni pagina corrisponde un folder che potrete vedere da FTP o dal vostro file manager nel percorso: root/user/pages/01.home o 02.typography.

Se aprite il folder della pagina di vostro interesse troverete il file default.md
Nello stesso folder verranno caricate le immagini che utilizzerete nella vostra pagina.
Ogni pagina sarà sempre associata a suo folder.
Eventuali pagine figlie risiederanno all’interno del folder delle pagine genitore.

Durante la creazione della pagina potrete scegliere per la creazione di uno dei tre moduli di default:

• Features
• Showcase
• Text

Vedremo successivamente e nel dettaglio l’utilizzo collegato alla pagina modulare.

Andiamo a creare la nostra pagina cliccando sul tasto in alto a destra “+ Aggiungi”

La finestra che ci appare va compilata indicando:

• Titolo della pagina
• Il nome della cartella si compila in automatico
• Root, decidiamo se una pagina genitore o una pagina figlia
• Scegliamo tra i vari formati di pagina, per iniziare va bene “Default”.

Contenuto

Bene, siamo ora di fronte all’editor e possiamo dedicarci a scrivere così come faremmo con qualunque editor di testo.
L’editor è completo e vi offre ogni strumento adeguato per una corretta formattazione e visualizzazione della pagina.

Inserimento delle immagini nella pagina

Certamente vi verrà il desiderio o la necessità di inserire un’immagine in una specifica posizione.
La prima spontanea azione è cliccare sull’icona insert/edit image o insert/edit media presenti sui comandi dell’editor.
Otterrete in risposta una finestra pop-up che vi chiede il percorso o l’url di dove si trova l’immagine, la descrizione e le dimensioni.
Immagino che salvo avere tutto pronto sia una bella seccatura.

Dunque, abbiamo salvato la nostra pagina e abbiamo visto apparire sotto la sezione editor l’area per il drag and drop dell’immagine o la possibilità cliccandoci sopra di caricare l’immagine dal nostro dispositivo.

Trasciniamo o carichiamo l’immagine.

Nell’anteprima dell’immagine che ora troveremo nella parte inferiore dell’editor potremmo notare che sono presenti 4 icone:

• Inserisci
• Info
• Metadati
• Cestina

Selezioniamo con il cursore il punto della pagina in cui vogliamo l’immagine.
Clicchiamo sul simbolo “+” Inserisci e ci troveremo la solita finestra pop-up che dovremmo ora compilare con la descrizione immagine e le dimensioni volute.
Se le dimensioni non sono di nostro gradimento possiamo trascinare l’immagine anche se già nell’area dell’editor sino a portarla alle dimensioni desiderate.

Abbiamo finito, no!

Avrete notato che nell’area di creazione della pagina, nell’area superiore sono presenti 3 campi principali:

• Contenuto
• Opzioni
• Avanzato

Opzioni

Il campo Contenuto lo abbiamo già compilato, ora vedremo la compilazione del campo “Opzioni”

Abbiamo due aree:

• Pubblicazione
• Tassonomie

Su pubblicazione troveremo:

• Pubblicato
• Data pubblicazione
• Data di rimozione di pubblicazione
• Metadati

Nell’area Tassonomie:

• Categorie
• Tag

Salvo differenti e possibili esigenze possiamo limitarci a compilare solo i campi “Metadati” inserendo chiave e valore, nella sezione Tassonomie inseriremo Categorie e Tag.

Avanzato

Il campo “Avanzato” è sicuramente quello più complesso nell’apparenza.
Sono presenti diverse aree:

• Settaggi
• Ordinamento
• Sovrascrittura
• Override della route
• Override specifici per l’Admin

Basiamoci per il momento solo su due campi: Settaggi e Ordinamento.

Settaggi

• Nome Cartella
• Superiore, indica che gerarchia di pagina, se pagina genitore o figlia, di default sarà /(root)–>> Pagina Genitore
• Modello di pagina, ad esempio: Default, Particle, Blog item, Blog list, ecc ecc.
• Classi del tag body

Ordinamento

In questa sezione possiamo verificare l’ordinamento delle pagine.

Abbiamo la possibilità di vedere l’anteprima della pagina creata sulla stessa scheda del browser o selezionare la vista su un’altra scheda.

Non ci resta che salvare la pagina e vedere i risultati.