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:
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.
