Share
Statamic è un moderno CMS PHP che fa davvero uno sforzo per essere facile e intuitivo da usare. Dalla sua progettazione di file flat al suo utilizzo di tecnologie come Markdown e YAML, è possibile eseguire una quantità eccezionale di lavoro senza scrivere alcun codice a tutti.
In questo articolo daremo un'occhiata al processo dall'installazione alla creazione di un portafoglio di base.
Avendo un design flat-file, l'installazione è semplice come estrarre il file zip scaricato dal sito web Statamic. Non ci sono database coinvolti, tutti i contenuti e le impostazioni sono archiviati localmente in una serie di file diversi, il che significa anche che hai backup e versioning automatici su tutti i tuoi contenuti se usi qualcosa come Git.
Con i contenuti estratti, diamo un'occhiata alla struttura di Statamic.
Ci sono più o meno cinque diverse cartelle con cui probabilmente interagirai, e sono:
Oltre a questi, hai le seguenti quattro cartelle che probabilmente non toccheresti direttamente:
Il primo passo in ogni sito Statamic è configurare le sue opzioni.
Tutti i file di configurazione si trovano nella cartella _config come descritto sopra. Il file principale che dovresti dare un'occhiata è il settings.yaml.
Se sei nuovo di YAML, tutto quello che devi sapere è che si tratta di un formato di dati simile a JSON, tranne per il fatto che è pensato per essere un formato più leggibile. Compie ciò non richiedendo alcun carattere di separazione come punto e virgola o virgolette, ma ottiene la sua struttura da posizionamento e rientro.
Il settings.yaml il file è davvero ben documentato quindi non dovresti avere problemi a compilarlo. Alcune delle opzioni che probabilmente vorrai guardare sono le seguenti:
_license_key: inserisci il tuo codice di licenza _site_name: My Portfolio _site_url: http: // localhost: 7000 _theme: portfolio _taxonomy: - language _log_enabled: true _cookies.secret_key: Some Random Key
La maggior parte di questi sono piuttosto semplici, come l'impostazione della chiave di licenza, il nome e l'URL del tuo sito. Il tema l'opzione imposta quale cartella tema caricare. Ci arriveremo in questo momento, ma un tema è essenzialmente il luogo in cui specifichi come funzioneranno le diverse pagine del tuo sito. Creeremo il nostro tema in modo che tu possa nominarlo come vuoi. Ho scelto "portfolio".
L'opzione successiva è un array chiamato tassonomia. Se hai mai usato qualcosa come WordPress, dovresti sapere a cosa serve. Fondamentalmente, ti consente di aggiungere un'impostazione o un "tipo" a ciascun post e puoi quindi utilizzare queste tassonomie per filtrare il contenuto e creare pagine personalizzate per questi gruppi.
Sto solo aggiungendo una tassonomia; la tassonomia linguistica, perché nel nostro portfolio di esempio specificheremo i linguaggi di programmazione di ogni lavoro. Non è necessario creare una tassonomia per ogni proprietà personalizzata. Vogliamo altre cose nel nostro portafoglio, come link e descrizioni. Una tassonomia è per i campi che hanno più voci in comune e per i campi per cui potresti voler creare una pagina personalizzata.
Il log_enabled l'impostazione attiva la registrazione, in modo da poter visualizzare i problemi che emergono dal pannello di amministrazione. Saranno memorizzati nel _logs cartella che abbiamo visto prima. Infine l'ultima opzione che ho menzionato è la chiave segreta usata per crittografare il cookie.
Questo file può ora essere salvato, ma prima di passare al contenuto, prendiamo un momento per impostare il modello di portfolio in modo da poter vedere cosa stiamo facendo.
Come la maggior parte dei moderni framework, quando carichi una pagina, puoi crearla da più componenti riutilizzabili. Una pagina in Statamic è composta da a disposizione, un modello, e a file di contenuti. Opzionalmente, sia i file di layout che i modelli possono essere realizzati anche con altri pezzi chiamati partial.
Il disposizione è il guscio esterno in cui verrà inserito il modello. Questo di solito viene usato per contenere il codice HTML standard come la sezione head, così come il corpo base di cui avranno bisogno tutte le pagine che usano questo layout, come l'aggiunta di librerie comuni nella parte inferiore del file.
Il modello è una vista specifica per una singola pagina. È possibile avere un modello di pagina iniziale, un modello di pagina di contatto e così via. Non è necessario crearne uno per pagina, ma ne consigliamo uno per genere della pagina.
In questi modelli è possibile utilizzare le variabili memorizzate nei file di contenuto effettivi. Ad esempio, supponiamo di aver bisogno di una pagina che mostri un indice dei libri che stai leggendo, e poi un'altra pagina per visualizzare un elenco di spettacoli che stai guardando. Invece di replicare la maggior parte del codice per ogni pagina, è possibile creare un modello per la visualizzazione di un elenco di oggetti e quindi inserire le specifiche dell'elenco da recuperare dal file di contenuto stesso.
Il file di contenuti-come suggerisce il nome, è la risorsa reale visualizzata. Questo può variare da cose come una pagina web unica e reale, a un singolo post di blog. Raggiungeremo questi in più dettagli in un momento.
Ora invece di creare manualmente tutti questi diversi componenti, Statamic fornisce una sorta di modello iniziale, dandoti una struttura di base per iniziare. Puoi scaricare la cartella del tema da Github.
Basta posizionare l'intera cartella nel _themes directory e rinominare la cartella in "portfolio" (poiché questo è il nome del tema che abbiamo dichiarato nel file delle impostazioni). È inoltre necessario rinominare il kindling.js file dalla cartella js e il kindling.css file dalla directory css, a portfolio.js e portfolio.css rispettivamente, in quanto vi è un tag speciale per richiamarli automaticamente.
Questo è tutto ciò di cui abbiamo bisogno ora, ma per avere un'idea migliore di ciò di cui stavo parlando riguardo il layout e il modello, diamo un'occhiata a quei file. Per cominciare, apri il file chiamato default.html dal layout cartella. Questo corrisponde al layout predefinito come puoi immaginare.
_nome del sito layout_content
Come ho detto prima, il layout è un buon posto dove inserire il codice richiesto su più pagine (o modelli piuttosto), motivo per cui il layout predefinito in questo file contiene solo la struttura di base di un file HTML. Ora non ne abbiamo ancora parlato, ma Statamic ha il suo motore di template, che è abbastanza facile da imparare. In pratica si limita a inserire un tag in cui si desidera inserire qualcosa, simile al manubrio se si ha familiarità con quello.
Questo layout contiene un paio di tag che pensavo di passare, il primo dei quali è _nome del sito. Questo tag si riferisce effettivamente alla proprietà che abbiamo impostato all'interno di settings.yaml file. Troverai questa convenzione in tutto Statistical. Puoi impostare le opzioni YAML a livello globale in questo modo, o anche su base per-file, e puoi quindi ottenere queste opzioni semplicemente inserendo un tag con i loro nomi nei tuoi modelli.
Il prossimo tag, che in realtà si presenta due volte, è il tema etichetta. Gli helper in Statamic sono più come moduli indipendenti, quindi possono avere più funzioni diverse associate allo stesso nome; si accede alle singole funzioni con due punti e quindi il nome del comando desiderato.
Il tema tag è tutto per il caricamento in risorse specifiche per questo tema. Può essere usato per inserire cose come script e fogli di stile, ma anche cose come immagini e partial. È una funzione di supporto che fondamentalmente ti consente semplicemente di fornire il nome della risorsa che desideri e riempirà il percorso della directory dei modelli corrente. Ad esempio, se dovessi scrivere:
theme: js src = "underscore.js"
Sostituirebbe quello con un collegamento a un file chiamato underscore.js all'interno della cartella js del tema corrente. Per impostazione predefinita se nessun parametro src è impostato per il comando js o css, assumerà che tu stia facendo riferimento a un file js o css con il nome del tema corrente, motivo per cui abbiamo rinominato quei file per corrispondere; è solo una questione di convenienza, quindi non abbiamo bisogno di specificarli e pulisce un po 'la fonte.
Il prossimo tag che appare è layout_content. Questo è simile a dare la precedenza in altri motori di template, e in pratica indica dove deve essere inserito il modello interno.
L'ultima cosa che voglio fare in questo file è rimuovere il link a jQuery, perché non lo userò (se lo farai, puoi ovviamente lasciarlo).
Quindi passiamo al file di modello predefinito (templates / default.html). Dovrebbe essere vuoto. Per l'educazione, aggiungiamo un tag chiamato soddisfare che inserisce semplicemente il contenuto della pagina corrente che viene caricata.
Quindi, per ricapitolare, quando vai su una pagina, prima caricherà il file di layout e poi ovunque Layout_content il tag è inserito questo modello verrà inserito. Questo modello quindi riprodurrà solo ciò che la pagina corrente ha all'interno.
Fatto ciò, salva questi file e passiamo al contenuto.
Il contenuto in Statamic è specificato nei file Markdown per impostazione predefinita e viene richiamato il file predefinito caricato page.md. Allo stesso modo in cui un server web standard carica index.html se non viene specificato alcun file, Statamic caricherà page.md.
Vale anche la pena notare che i percorsi o i collegamenti URL nel tuo sito saranno definiti dal _soddisfare directory. Ad esempio, se si crea una cartella denominata dimostrazione nel _soddisfare directory e al suo interno posiziona un file chiamato link.md, questo corrisponderà all'URL / Demo / link. Se posizioni un page.md file all'interno, verrà caricato se ci si sposta / Demo / poiché è il nome del file predefinito.
Statamic viene fornito con alcuni contenuti demo, ma puoi semplicemente eliminare tutto all'interno del file _soddisfare directory per questo esempio (o spostalo per ora).
Iniziamo con una pagina iniziale di base. Alla radice del _soddisfare directory, creare un file chiamato page.md con il seguente:
--- title: Home --- # Benvenuto nella pagina title
Tutti i file di contenuto sono suddivisi in due sezioni; l'aspetto della YAML e il contenuto. La parte superiore (tra le linee tratteggiate) è quella in cui è possibile inserire lo standard YAML specifico per questo file ed è un buon modo per impostare le opzioni per regolare i file del modello. La seconda parte è l'area Markdown, in cui si inserisce il contenuto della pagina effettiva. Puoi utilizzare Markdown standard e tag di supporto Statamic.
Questa pagina verrà caricata con i file di layout e modello predefiniti che abbiamo appena impostato, ma se vuoi che ne usino di diversi, puoi specificarli come opzioni nella sezione YAML in alto usando _disposizione e _modello rispettivamente.
Se crei un server nella root della tua directory Statamic:
php -S localhost: 7000
... e poi naviga verso http: // localhost: 7000 nel tuo browser dovresti vedere il tag H1 con il nostro messaggio di benvenuto.
Questo è tutto ciò che devi sapere per creare pagine in Statamic, e se stai costruendo un sito abbastanza statico, questo sarebbe sufficiente. Ma per molti siti dobbiamo essere in grado di aggiungere dati dinamici, che possono assumere la forma di post di blog, articoli di negozi o nel nostro portfolio di casi..
Non ci sono database in Statamic, quindi questi tipi di voci sono memorizzati in file Markdown proprio come la pagina che abbiamo appena creato, anche se un paio di cose sono state fatte per introdurre in modo subdolo più funzionalità per ottimizzare le cose e per farlo funzionare nell'amministratore.
Prima di tutto puoi nominare i file con un formato di data speciale in modo che possano essere ordinati e filtrati per data. Lo fai anticipando il titolo con a anno mese giorno modello. Se volessi creare un post chiamato 'foobar' lo chiameresti qualcosa come:
2013-09-15-foobar.md
Qualsiasi impostazione richiesta dal post va nella parte anteriore della sezione in alto, quindi il contenuto viene posizionato sotto. Questo segue il formato delle pagine come descritto sopra.
Mentre questo è abbastanza interessante, è l'equivalente di inserire manualmente i messaggi in un database di un sistema tradizionale. C'è un'altra opzione!
Statamic viene fornito in bundle con un amministratore veramente carino che può fare tutto questo per te, ma per poterlo configurare dobbiamo dire quali campi questo tipo di voce dovrebbe avere. Questo viene fatto in un file chiamato appropriatamente fields.yaml.
Quindi per il nostro esempio creiamo una cartella all'interno della directory _content chiamata lavori, e dentro il lavori cartella creiamo un file chiamato fields.yaml. Dentro il fields.yaml file abbiamo bisogno di specificare quali proprietà le nostre 'voci' conterranno e i singoli tipi per ciascuna di queste impostazioni.
Puoi specificare il tuo fieldset (l'elenco di campi) nel _config / fieldsets / directory e inserire una definizione, oppure puoi semplicemente inserire qui la definizione (o puoi fare entrambe le cose per estendere una definizione esistente). Per il nostro semplice esempio, inserirò qui la definizione dal momento che non la riutilizzeremo da nessuna parte:
tipo: data campi: lingua: tipo: tag display: programmazione Lingua richiesta: true descrizione: tipo: visualizzazione testo: Descrizione richiesta: collegamento falso: tipo: visualizzazione testo: collegamento richiesto: contenuto vero: tipo: nascosto
La prima proprietà dice a Statamic che vogliamo che questi file di voci abbiano una proprietà data e che siano nominati in modo appropriato. Quindi apriamo un oggetto YAML chiamato i campi contenente tutte le proprietà delle nostre voci.
Il primo è il linguaggio campo, che se si ricorda è la tassonomia che abbiamo creato nel settings.yaml. All'interno di ogni proprietà è necessario specificare il suo tipo (o il valore predefinito di una casella di testo), il suo testo di visualizzazione (che verrà impostato in base al nome della proprietà) e se è necessario. Ci sono altre opzioni che puoi impostare, comprese le istruzioni e il valore predefinito. Puoi visualizzare maggiori informazioni su queste opzioni sul sito web di Statamic. Accanto a queste impostazioni, diversi tipi di campo possono avere le proprie opzioni personalizzate.
Per il linguaggio input, l'ho impostato per usare il etichetta tipo, che consente di impostare più tag per questa opzione. È solo un diverso tipo di input per inserirne il valore nell'amministratore. Puoi vedere tutti i diversi fieldtype nella documentazione di Statamic o nella Statistical Cheat Sheet ufficiale sotto 'Fieldtypes'.
Il descrizione e collegamento sono praticamente la stessa cosa Saranno entrambe caselle di testo, tranne uno sarà richiesto e l'altro non lo sarà. Oltre ai campi specificati, tutte le voci includeranno un campo titolo e contenuto. Non vogliamo davvero un campo di contenuti: nei nostri lavori saranno più simili a link, quindi l'ho impostato su nascosto.
L'ultimo passaggio prima di andare all'amministratore è creare un page.md file all'interno del lavori directory. Questo non è richiesto, ma l'amministratore tenterà di ottenere il titolo di questo tipo di voce da qui, quindi è una buona idea posizionarlo semplicemente. Per fare ciò, crea un page.md file all'interno del lavori cartella con il solo titolo impostato su "Works":
--- titolo: Works ---
Per entrare nell'amministratore dobbiamo prima creare un utente. Questo è un semplice file YAML all'interno del config cartella. Il nome del file è il nome utente che userai per accedere, e all'interno del file si configurano i dettagli dell'utente e la password.
Creiamo un nuovo utente con un nome utente di editore. Facciamo questo creando un file chiamato editor.yaml all'interno del _config / utenti / cartella. Inserisci i seguenti dati (tranne che con le tue informazioni invece che le mie):
--- first_name: Gabriel last_name: ruoli di Manricks: [admin] email: [email protected] password: password --- L'editor di questo portfolio
Molte di queste colonne sono piuttosto semplici e non credo che richiedano spiegazioni. L'unico campo degno di menzione è il ruoli ambientazione. Attualmente Admin è l'unica opzione disponibile, ma in futuro questo sarà dove sarà possibile regolare le autorizzazioni di modifica dell'utente.
Vale anche la pena ricordare che la password non rimarrà in testo normale. Dopo il primo accesso, Statamic cancellerà la password insieme a un punto saliente e includerà invece quelli qui.
Tutto dopo le linee tratteggiate verrà memorizzato come contenuto per questo utente e può essere utilizzato come una sorta di bio per loro.
Ora salva questo file e se il tuo server web è ancora in esecuzione, vai a / admin nel tuo browser. Ciò aprirà la console di accesso in cui è possibile inserire queste proprietà. La prima volta che effettui il login, dovrai eseguire questa operazione due volte, una volta per cancellare la password e la seconda volta per accedere effettivamente.
Una volta effettuato l'accesso, verrà visualizzato un elenco delle nostre pagine. Incluso è la nostra home page così come il tipo di voce 'Works'. Diamo un'occhiata a ciò che la nostra dichiarazione dei campi ha fatto per noi. Clicca sul Creare collegamento all'interno del Lavori bar.
Dovresti vedere un bel modulo che include tutti i campi che abbiamo specificato e il titolo. Prova ad aggiungere alcuni post per provarlo.
Con alcuni messaggi archiviati, abbiamo completato il primo round. Ora sai come creare pagine, temi, utenti e voci, è un ottimo primo passo. Ma c'è molto di più che Statamic ha da offrire.
Avere dei post creati è bello, ma quello che sarebbe meglio è se potessimo effettivamente visualizzarli su una pagina. Per questo dovremo modificare il modello predefinito.
Questa sarà la nostra prima vera interazione con il motore di template incluso, ma non preoccuparti, il design intuitivo di Statamic lo rende facile da riprendere.
Per visualizzare un elenco completo dei tag disponibili è possibile dare un'occhiata alla documentazione di Statamic. Tutto ciò di cui abbiamo veramente bisogno per questo esempio è il inserimenti tag, che viene utilizzato per inserire le voci da una cartella specifica in _soddisfare directory. Ci sono molte proprietà opzionali, che ti permettono di filtrare per data, o per condizioni come tassonomie o anche proprietà standard. Stiamo per mantenerlo semplice e basta elencare le proprietà per data (che è l'impostazione predefinita).
Ecco il nuovo modello predefinito completo (templates / default.html):
Portafoglio
linguaggio | title - description |
In questo codice stiamo creando una tabella e collegando tutti i messaggi nella directory "works". Questo tipo di tag di blocco, dove inserisci più HTML all'interno, assegna nuovi segnaposto. Oltre a fornire l'accesso a cose come tutti gli attributi del post, hai anche speciali variabili di supporto che possono dirti cose come l'indice corrente, o se questo è il primo o l'ultimo post. Non useremo nessuna di queste variabili. Tutto ciò di cui abbiamo bisogno è mostrare il titolo, la lingua, la descrizione e il link. Tuttavia se caricate la pagina nel vostro browser, probabilmente realizzerete che invece di mostrare la lingua dice semplicemente "Array".
Questo perché impostiamo questa proprietà come tag di tipo, il che significa che potrebbe contenere più di una lingua. Quindi, anche se potresti aver inserito solo una lingua, questa viene ancora archiviata in una matrice. Fortunatamente, Statamic è dotato di modificatori.
Per completare questa guida, diamo un'occhiata ad alcuni modificatori che ci permetteranno di rendere questa pagina ancora migliore.
Il primo e più grande problema è far apparire la lingua. Se dai un'occhiata alla Statamic Cheat Sheet, in fondo a sinistra, vedrai una sezione chiamata Elenco scorciatoie. Pur non essendo tecnicamente modificatori, Statamic consente di aggiungere queste parole alla fine di una variabile di lista e restituirà invece una rappresentazione di stringa. Quello che voglio usare in questa situazione è lo standard _elenco aiutante. Ciò che farà sarà separare più valori dell'array con una virgola e uno spazio, ed è ciò che vorremmo nella nostra situazione.
Per provarlo, sostituisci il linguaggio tag con language_list. Aggiorna il browser e ora dovrebbe visualizzare correttamente le lingue.
Quindi aggiungiamo un modificatore al titolo per renderlo tutto maiuscolo. Se hai mai usato qualcosa come il motore di template Smarty, funziona allo stesso modo. Aggiungi una pipe alla fine del nome della variabile e poi aggiungi un modificatore. Nel nostro esempio hai solo bisogno di sostituire la chiamata a title con title | upper e questi sono concatenabili in modo da poter continuare ad aggiungere tubi indefinitamente.
Ora aggiungiamo un po 'di CSS per dare forma a tutto. Ricorda, questo va nel css / portfolio.css file:
body background: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; margin-bottom: 28px; table font: 15px 'Coustard', serif; td padding: 10px 10px 0 10px; p margin-bottom: 15px; .lang p background: # CA9F53; colore: #FFF; imbottitura: 3px 5px; allineamento del testo: giusto; .work text-align: left; . lavoro a border-bottom: 1px solid # 000; decorazione del testo: nessuna; .title font-weight: 600; colore: # 000; .desc color: # 666;
E questi due tipi di carattere provengono da Google Fonts, quindi dovrai aggiungere il seguente link nella parte superiore del file di layout predefinito:
_nome del sito layout_content
Se tutto ha funzionato dovresti vedere la seguente pagina (eccetto che con i lavori che hai aggiunto):
In questo tutorial ti ho portato attraverso l'intero processo dall'installazione del framework, all'impostazione di tutto, alla creazione di un nuovo tipo di voce e alla creazione di un tema personalizzato. È molto da fare, ed è possibile solo grazie alla facilità con cui Statamic fa le cose.
Abbiamo già visto molte funzionalità e non abbiamo nemmeno sfiorato la creazione di moduli personalizzati e l'estensione di Statamic con PHP, ma penso che la cosa più sorprendente finora è che non abbiamo dovuto scrivere una singola riga di PHP in questo intero tutorial! È qualcosa di cui vantarsi.
Quindi penso che la domanda principale potrebbe essere: "Devo usarlo?" O "Cosa dovrebbe sostituire nel mio attuale repertorio?" È importante valutare a cosa serve Statamic. Se stai costruendo una nuova startup e hai bisogno della flessibilità di un framework completo, sono sicuro che saresti in grado di farlo funzionare in Statamic, ma sarebbe un sacco di codice personalizzato, che potrebbe vanificare lo scopo. Dove penso che questo prospererà è come una piattaforma di blogging o CMS.
Venendo da uno sfondo in WordPress, questo sembra un diretto successore. Segue molte delle stesse convenzioni in teoria, ma sono tutte implementate in un modo molto più intelligente. Confrontare la quantità di codice richiesta in ciascuno diventa uno scherzo. Andando avanti, Statamic ha un'incredibile API per la creazione di tag personalizzati, ganci, nuovi field field e altro, e puoi immaginare che Statamic lo rende così semplice e semplice da fare come potresti aspettarti.
Spero che questo articolo ti sia piaciuto, se hai qualche domanda sentiti libero di chiedermi di seguito, su twitter @gabrielmanricks, o sul canale IRC di web + Tuts su freenode (#nettuts).
Accentsconagua