Share
Statamic este un CMS modern PHP care face într-adevăr un efort de a fi ușor și intuitiv de utilizat. De la designul fișierului plat până la utilizarea tehnologiilor precum Markdown și YAML, puteți realiza o cantitate remarcabilă de lucru fără să scrieți vreun cod.
În acest articol vom examina procesul de la instalare la crearea unui portofoliu de bază.
Având un design fișier plat, configurarea este la fel de simplă ca extragerea fișierului zip pe care îl descărcați de pe site-ul Statamic. Nu există o bază de date implicată, tot conținutul și setările sunt stocate local într-o serie de fișiere diferite, ceea ce înseamnă, de asemenea, că aveți backup automat și versiuni pe întreg conținutul dvs. dacă utilizați ceva asemănător Git.
Cu conținutul extras, să aruncăm o privire la structura lui Statamic.
Există mai mult sau mai puțin cinci dosare diferite cu care cel mai probabil veți interacționa și acestea sunt:
Pe lângă acestea, aveți următoarele patru dosare pe care, probabil, nu le veți atinge direct:
Primul pas în fiecare site Statamic este de a-și configura opțiunile.
Toate fișierele de configurare se află în interiorul folderului _config așa cum este descris mai sus. Fișierul principal pe care ar trebui să-l aruncați o privire este settings.yaml.
Dacă sunteți nou la YAML, atunci tot ce trebuie să știți este că este un format de date similar cu JSON, cu excepția faptului că este menit a fi un format mai ușor de citit de om. Realizează acest lucru prin faptul că nu necesită caractere de separare, cum ar fi semi-colonii sau ghilimele, ci își obține structura de la plasare și indentare.
settings.yaml fișierul este foarte bine documentat, deci nu ar trebui să aveți o problemă de completare a acestuia. Unele dintre opțiunile pe care probabil că doriți să le examinați sunt următoarele:
_license_key: introduceți cheia de licență _site_name: portofoliul meu _site_url: http: // localhost: 7000 _theme: portofoliu _taxonomy: - limbă _log_enabled: true _cookies.secret_key:
Cele mai multe dintre acestea sunt destul de simple, cum ar fi setarea cheii de licență, numele site-ului dvs. și URL-ul. temă opțiunea stabilește care dosar tematic să se încarce. Vom intra într-un moment, dar o temă este, în esență, locul unde specificați modul în care diferite pagini de pe site-ul dvs. vor funcționa. Vom crea o temă proprie, astfel încât să puteți numi ceea ce doriți. Am ales "portofoliul".
Următoarea opțiune este o matrice numită taxonomie. Dacă ați folosit vreodată ceva de genul WordPress, atunci ar trebui să știți pentru ce este vorba. Practic, vă permite să adăugați o setare sau "tip" la fiecare postare și apoi puteți utiliza aceste taxonomii pentru a vă filtra conținutul și pentru a crea pagini personalizate pentru aceste grupări.
Eu adaug doar o taxonomie; taxonomia limbajului, deoarece în portofoliul nostru de exemplu vom preciza limbile de programare ale fiecărei lucrări. Nu este nevoie să creați o taxonomie pentru fiecare proprietate particularizată. Vom dori alte lucruri în portofoliul nostru, cum ar fi linkuri și descrieri. O taxonomie este pentru câmpurile pe care mai multe înregistrări au în comun, și pentru câmpurile pentru care ați putea dori să creați o pagină personalizată pentru.
log_enabled setarea activează logarea, astfel încât să puteți vedea problemele care apar din panoul de administrare. Ele vor fi stocate în _logs dosar am văzut mai devreme. În cele din urmă, ultima opțiune pe care am menționat-o este cheia secretă folosită pentru criptarea cookie-ului.
Acest fișier poate fi acum salvat, dar înainte de a trece la conținut, să facem un moment pentru a configura șablonul de portofoliu pentru a vedea ce facem.
Ca majoritatea cadrelor moderne, atunci când încărcați o pagină, puteți să o construiți din mai multe componente reutilizabile. O pagină din Statamic este alcătuită dintr-un schemă, A șablon, și a fișierul de conținut. Atât fișierele layout, cât și șabloanele pot fi făcute opțional și din mai multe piese numite partials.
schemă este shell-ul exterior în care va fi plasat șablonul dvs. Aceasta este de obicei folosită pentru a ține codul HTML de tip boilerplate ca secțiunea cap, precum și corpul de bază pe care vor avea nevoie toate paginile care utilizează acest aspect, cum ar fi adăugarea de biblioteci comune în partea de jos a fișierului.
șablon este o vizualizare specifică pentru o singură pagină. Puteți avea un șablon de pagină de pornire, un șablon de pagină de contact și așa mai departe. Nu este nevoie să creați unul pe pagină, dar aș recomanda unul pentru fiecare tip de pagină.
În aceste șabloane aveți posibilitatea de a utiliza variabile stocate în fișierele de conținut reale. De exemplu, spuneți că aveți nevoie de o pagină care afișează un index de cărți pe care le citiți și apoi o altă pagină pentru a afișa o listă de emisiuni pe care le urmăriți. În loc să replicați cea mai mare parte a codului pentru fiecare pagină, puteți crea un șablon pentru a afișa o listă de obiecte, apoi trageți specificul listei pe care doriți să-l regăsiți din fișierul de conținut.
fișierul de conținut-cum sugerează și numele - este resursa reală afișată. Acest lucru poate varia de la o chestiune precum o pagină web unică la un singur articol de blog. Vom ajunge la acestea în mai multe detalii într-un moment.
Acum, în loc să creați manual toate aceste componente diferite, Statamic oferă un fel de șablon de pornire, oferindu-vă o structură de bază pentru a începe. Puteți descărca dosarul tematic de la Github.
Doar plasați întregul dosar în _themes și redenumiți folderul în "portofoliu" (deoarece acesta este numele temei pe care l-am declarat în fișierul de setări). De asemenea, trebuie să redenumiți kindling.js fișier din folderul js și kindling.css fișier din directorul css, la portfolio.js și portfolio.css respectiv, deoarece există o etichetă specială pentru a le trage automat.
Asta e tot ce avem nevoie acum, dar pentru a avea o idee mai bună despre ceea ce am vorbit despre aspect și șablon, să aruncăm o privire la aceste fișiere. În primul rând, deschideți fișierul numit default.html de la aspecte pliant. Aceasta corespunde layout-ului implicit, după cum probabil ați ghicit.
_Numele site-ului layout_content
După cum am menționat mai devreme, aspectul este un loc bun pentru a pune codul necesar mai multor pagini (sau șabloane mai degrabă), motiv pentru care aspectul implicit din acest fișier conține doar schema de bază a unui fișier HTML. Acum nu am vorbit cu adevărat despre asta încă, dar Statamic vine cu propriul motor de template, care este destul de ușor de preluat. În principiu, trebuie doar să plasezi o etichetă în care vrei să fie inserat ceva, similar cu Handlebars dacă ești familiarizat cu asta.
Acest aspect conține câteva etichete pe care am crezut că le voi trece, dintre care primul este _Numele site-ului. Această etichetă se referă, de fapt, la proprietatea pe care am înființat-o în interiorul settings.yaml fişier. Veți găsi această convenție pe tot parcursul Statamic. Puteți seta opțiunile YAML fie la nivel global, fie chiar pe bază de fișiere, iar apoi puteți obține aceste opțiuni doar prin plasarea unei etichete cu numele lor în șabloanele dvs..
Următoarea etichetă, care apare de două ori, este temă etichetă. Ajutorii în Statamic sunt mai mult ca niște module independente, astfel încât acestea pot avea mai multe funcții diferite atașate la același nume; accesați funcțiile individuale cu un colon și apoi numele comenzii dorite.
temă eticheta se referă la încărcarea în resurse specifice acestei teme. Acesta poate fi folosit pentru a trage în lucruri cum ar fi scripturile și foile de stil, dar și lucruri precum imagini și partiale. Este o funcție de ajutor care vă permite să furnizați doar numele resursei pe care o doriți și aceasta va completa calea directorului actual de șabloane. De exemplu, dacă ați scrie:
temă: js src = "underscore.js"
Ar înlocui acest lucru cu un link către un fișier numit underscore.js în interiorul dosarului curent al temei. În mod implicit, dacă nu este setat parametrul src pentru comanda js sau css, va presupune că vă referiți la un fișier js sau css cu numele temei curente, de aceea am redenumit acele fișiere pentru a se potrivi; este doar o chestiune de comoditate, astfel încât nu este nevoie să le specificăm și o curăță sursa un pic.
Următoarea etichetă care apare este layout_content. Acest lucru este similar cu Randament în alte motoare templante, și înseamnă în principiu unde trebuie introdus șablonul interior.
Ultimul lucru pe care vreau să îl fac în acest fișier este eliminarea link-ului către jQuery, pentru că nu o voi folosi (dacă, atunci, puteți, desigur, lăsați-o).
Înainte să trecem la fișierul șablon implicit (template-uri / default.html). Ar trebui să fie necompletat. Pentru dragul educației, să adăugăm o etichetă numită conţinut care introduce doar conținutul paginii curente care este încărcată.
Deci, pentru a recapitula, atunci când te duci la o pagină va încărca mai întâi fișierul layout, și apoi oriunde Layout_content eticheta este plasată acest șablon va fi inserat. Acest șablon va ieși apoi doar indiferent de pagina curentă din interior.
Cu asta, salvați aceste fișiere și treceți la conținut.
Conținutul în Statamic este specificat în fișierele Markdown în mod prestabilit, iar fișierul implicit este încărcat page.md. În același mod în care un server web standard va încărca index.html dacă nu este specificat niciun fișier, Statamic va încărca pagina.md.
De asemenea, merită remarcat faptul că rutele sau linkurile URL de pe site-ul dvs. vor fi definite de către _conţinut director. De exemplu, dacă creați un folder numit Demo în _conţinut director, și în loc un fișier numit link.md, acest lucru va corespunde adresei URL / Demo / link. Dacă plasați a page.md fișier înăuntru, acesta va fi încărcat dacă navigați la / Demo / deoarece este numele implicit al fișierului.
Statamic vine cu un conținut demo, dar poți să ștergi totul în interiorul _conţinut pentru acest exemplu (sau o mutați deoparte).
Să începem cu o pagină principală de bază. La rădăcină _conţinut director, creați un fișier numit page.md cu urmatoarele:
--- title: Acasă --- # Bine ați venit pe pagina title
Toate fișierele de conținut sunt împărțite în două secțiuni; aspectul YAML și conținutul. Partea superioară (între liniile întrerupte) este locul unde puteți seta standard YAML specific acestui fișier și este o modalitate bună de a seta opțiunile pentru a ajusta fișierele șablonului. Partea a doua este zona Markdown, unde plasați conținutul paginii reale. Puteți utiliza etichetele standard Markdown, precum și etichetele ajutoare statamice.
Această pagină se va încărca cu fișierele standard și șabloanele pe care tocmai le-am setat, dar dacă doriți să le folosească pe altele diferite, le puteți specifica ca opțiuni în secțiunea YAML din partea de sus utilizând _layout și _template respectiv.
Dacă creați un server la rădăcina directorului dvs. Statamic:
php -S localhost: 7000
... și apoi navigați la http: // localhost: 7000 în browser-ul dvs. ar trebui să vedeți eticheta H1 cu mesajul nostru de întâmpinare.
Acesta este tot ce trebuie să știți pentru a crea pagini în Statamic, și dacă construiți un site destul de static, acest lucru ar fi suficient. Dar pentru o mulțime de site-uri trebuie să putem adăuga date dinamice, care pot lua forma unor postări de blog, articole de magazin sau, în cazul nostru, lucrări de portofoliu.
Nu există nicio bază de date în Statamic, astfel încât aceste tipuri de intrări să fie stocate în fișierele Markdown la fel ca pagina pe care tocmai am construit-o, deși au fost făcute câteva lucruri pentru a introduce în mod subtil mai multe funcții pentru a optimiza lucrurile și pentru a le face să lucreze în admin.
În primul rând puteți numi fișierele cu un format de dată specială, astfel încât acestea să poată fi sortate și filtrate după dată. Faceți asta înainte de a aștepta titlul cu ajutorul unui an lună zi model. Dacă ați dori să creați o postare numită "foobar", ați numi ceva asemănător:
2013-09-15-foobar.md
Orice setări de post necesită intrați în secțiunea frontală din partea de sus, iar conținutul este plasat dedesubt. Aceasta urmează formatul paginilor descrise mai sus.
În timp ce acest lucru este destul de rece, este echivalentul intrării manuală a postărilor într-o bază de date a unui sistem tradițional. Există o altă opțiune!
Statamic vine însoțit de un administrator foarte frumos, care poate face toate acestea pentru dvs., dar pentru a-l seta trebuie să-i spunem domeniile pe care acest tip de intrare ar trebui să le aibă. Acest lucru se face într-un fișier denumit corespunzător fields.yaml.
Deci, pentru exemplul nostru, să creăm un dosar în directorul _content numit lucrări, și în interior lucrări folder să creați un fișier numit fields.yaml. În interiorul fields.yaml trebuie să specificăm ce proprietăți vor conține "intrările" și tipurile individuale pentru fiecare dintre aceste setări.
Puteți specifica setul de câmpuri (lista de câmpuri) în _CONFIG / fieldsets / și trageți o definiție sau puteți introduce doar definiția aici (sau puteți face ambele pentru a extinde o definiție existentă). Pentru exemplul nostru simplu urmează să pun definiția aici, deoarece nu o vom reutiliza oriunde:
tip: câmpuri de date: limbă: tip: etichete afișare: programare Limbă necesară: descriere adevărată: tip: afișare text: Descriere necesară: link fals: tip: afișare text:
Prima proprietate spune Statamic că vreau ca aceste fișiere de intrare să aibă o proprietate dată și să fie numite în mod corespunzător. Apoi deschidem un obiect YAML numit câmpuri conținând toate proprietățile intrărilor noastre.
Primul este limba câmp, care, dacă vă amintiți, este taxonomia pe care am creat-o în settings.yaml. În interiorul fiecărei proprietăți trebuie să specificăm tipul acesteia (sau implicit într-o casetă de text), textul afișat (care va implicit numele proprietății) și dacă este necesar. Există și alte opțiuni pe care le puteți seta, inclusiv instrucțiunile și valoarea implicită. Puteți vedea mai multe informații despre aceste opțiuni pe site-ul web al lui Statamic. Pe lângă aceste setări, diferitele tipuri de câmpuri pot avea propriile opțiuni personalizate.
Pentru limba de intrare, l-am setat să folosească etichetă tip, care vă permite să setați mai multe etichete pentru această opțiune. Este doar un tip diferit de intrare pentru introducerea valorii sale în admin. Puteți vedea toate tipurile de câmpuri diferite din documentația lui Statamic sau din fișa oficială Cheat din categoria "Fieldtypes".
Descriere și legătură sunt aproape la fel. Ambele vor fi cutii de text, cu excepția cazului în care una va fi cerută, iar cealaltă nu va fi. Pe lângă câmpurile pe care le specificați, toate intrările vor veni cu un titlu și un câmp de conținut. Nu vrem într-adevăr un domeniu de conținut - în lucrările noastre vor fi mai mult ca legături - așa că am pus-o ascuns.
Ultimul pas înainte de a merge la admin este de a crea un page.md fișier în interiorul lucrări director. Acest lucru nu este necesar, dar administratorul va încerca să obțină titlul acestui tip de intrare de aici, deci este o idee bună să o plasați. Pentru a face acest lucru, creați un page.md fișier în interiorul lucrări dosar cu doar titlul setat la "Lucrări":
--- titlu: Lucrări ---
Pentru a intra în admin trebuie să creați mai întâi un utilizator. Acesta este un fișier simplu YAML din interiorul config pliant. Numele fișierului este numele de utilizator pe care îl veți folosi pentru a vă conecta, iar în interiorul fișierului configurați detaliile și parola utilizatorului.
Să creăm un utilizator nou cu un nume de utilizator de editor. Facem acest lucru prin crearea unui fișier numit editor.yaml în interiorul _CONFIG / utilizatori / pliant. Introduceți următoarele date (cu excepția informațiilor în locul mea):
--- first_name: Gabriel last_name: rolurile Manricks: [admin] email: [email protected] parola: parola --- Editorul acestui portofoliu
Cele mai multe dintre aceste coloane sunt destul de drepte și nu cred că necesită explicații. Singurul domeniu care merită menționat este rolurile setare. În prezent admin este singura opțiune disponibilă, dar în viitor va fi acolo unde veți putea ajusta permisiunile de editare ale utilizatorului.
De asemenea, merită menționat faptul că parola nu va rămâne în text simplu. După prima conectare, Statamic va elimina parola împreună cu o sare și va include aici.
Totul după liniile întrerupte va fi stocat ca conținut pentru acest utilizator și poate fi folosit ca un fel de bio pentru ei.
Acum salvați acest fișier și, dacă serverul dvs. Web este încă în desfășurare, navigați la / admin în browserul dvs. Aceasta va deschide consola de conectare unde puteți introduce aceste proprietăți. Prima dată când vă conectați va trebui să faceți acest lucru de două ori, o dată pentru a hash parola, și a doua oară pentru a vă autentifica.
După ce v-ați conectat, veți vedea o listă a paginilor noastre. Este inclusă pagina noastră de pornire, precum și tipul de intrare "Lucrări". Să aruncăm o privire la ceea ce a făcut declarația câmpurilor noastre pentru noi. Faceți clic pe Crea link în interiorul Lucrări bar.
Ar trebui să vedeți o formă frumoasă care include toate câmpurile pe care le-am specificat și titlul. Încercați să adăugați câteva postări pentru a le testa.
Cu unele posturi stocate, am terminat primul rând. Știți acum cum să creați pagini, teme, utilizatori și înregistrări, este un prim pas important. Dar este mult mai mult pe care Statamic trebuie să o ofere.
Având unele posturi create este frumos, dar ceea ce ar fi mai bine este dacă am putea să le afișăm de fapt pe o pagină. Pentru aceasta, va trebui să editați șablonul implicit.
Aceasta va fi prima noastră interacțiune reală cu motorul de template-uri inclus, dar nu pentru a vă face griji, designul intuitiv al lui Statamic îl ușurează să ridicați.
Pentru a vedea o listă completă a etichetelor disponibile, puteți să consultați documentația lui Statamic. Tot ceea ce avem nevoie pentru acest exemplu este intrări tag, care este folosit pentru a trage intrările dintr - un anumit dosar în _conţinut director. Există o mulțime de proprietăți opționale, permițându-vă să filtrați după dată sau prin condiții cum ar fi taxonomii sau chiar proprietăți standard. Vom păstra acest lucru simplu și vom lista proprietățile după dată (care este implicit).
Iată noul șablon standard nou (template-uri / default.html):
Portofoliu
limba | titlu - Descriere |
În acest cod se creează un tabel și se înșiră prin toate postările din directorul "lucrări". Aceste tipuri de etichete bloc, unde plasați mai mult HTML în interior, atribuiți noi substituenți. În afară de a oferi acces la lucruri precum toate atributele postului, primiți și variabile speciale de ajutor care vă pot spune lucruri precum indexul curent sau dacă acesta este primul sau ultimul post. Nu vom folosi niciuna dintre aceste variabile. Tot ce avem nevoie este să afișăm titlul, limba, descrierea și link-ul. Cu toate acestea, dacă încărcați pagina în browserul dvs., probabil că veți înțelege că, în loc să se afișeze limba, se spune "Array".
Acest lucru se datorează faptului că am stabilit că această proprietate este o etichetă de tip, ceea ce înseamnă că ar putea conține mai mult de o limbă. Deci, chiar dacă ați pus doar o singură limbă, ea este încă stocată într-o matrice. Din fericire, Statamic vine cu modificatori.
Pentru a finaliza acest ghid, să aruncăm o privire la câțiva modificatori care ne vor permite să facem această pagină mai bună.
Prima și cea mai mare problemă este ca limba să apară. Dacă vă uitați la Foaia de Cheat Statamic, tot drumul din stânga jos, veți vedea o secțiune numită Scurtături de listă. Deși nu sunt modificatori din punct de vedere tehnic, Statamic vă permite să adăugați aceste cuvinte la sfârșitul unei variabile de listă și în schimb va returna o reprezentare de șir. Cel pe care vreau să îl folosesc în această situație este standardul _listă ajutor. Ceea ce va face acest lucru este separarea mai multor valori în matrice cu virgulă și spațiu și este ceea ce vrem în situația noastră.
Pentru a le încerca, înlocuiți-le limba eticheta cu language_list. Reîmprospătați browserul dvs. și acum trebuie să afișați corect limbile.
Înainte de a adăuga un modificator la titlu pentru a face toate majuscule. Dacă ați folosit vreodată ceva asemănător cu motorul de template-uri Smarty, acest lucru funcționează la fel. Adăugați o țeavă la sfârșitul numelui variabilei și apoi adăugați un modificator. În exemplul nostru, trebuie doar să înlocuiți apelul titlu cu titlu | superior și acestea sunt lanțabile, astfel încât să puteți continua să adăugați țevi pe termen nelimitat.
Acum, hai să adăugăm niște CSS pentru a schița totul. Amintiți-vă, acest lucru merge în css / portfolio.css fişier:
corp fundal: # FAFAF5; h1 font: 800 64px 'Raleway', sans-serif; margin-bottom: 28px; tabel font: 15px 'Coustard', serif; td padding: 10px 10px 0 10px; p marginea-jos: 15px; . lang p fundal: # CA9F53; culoare: #FFF; padding: 3px 5px; text-aliniere: drept; .work text-align: left; . lucrați un border-bottom: 1px solid # 000; text-decoration: nici unul; .titul font-weight: 600; culoare: # 000; .desc culoare: # 666;
Și aceste două fonturi sunt din Fonturi Google, prin urmare trebuie să adăugați următorul link în partea de sus a fișierului dvs. de aspect implicit:
_Numele site-ului layout_content
Dacă totul a fost rezolvat, ar trebui să vedeți următoarea pagină (cu excepția lucrărilor pe care le-ați adăugat):
În acest tutorial te-am purtat prin întregul proces, de la instalarea cadrului, la crearea tuturor, crearea unui nou tip de intrare și construirea unei teme personalizate. Este o mulțime de făcut, și este posibil numai din cauza faptului că statamicul face lucrurile ușor.
Am văzut deja o mulțime de funcționalități și nu am atins nici măcar crearea propriilor module și extinzând Statamic cu PHP, dar cred că cel mai uimitor lucru până acum este că nu am avut de a scrie o singură linie de PHP în acest intreg tutorial! Este ceva la care să se laude.
Așadar, cred că principala întrebare pe care ar putea-o avea oamenii este: "Ar trebui să o folosesc?" Sau "Ce ar trebui să înlocuiască acest lucru în actualul meu repertoriu?" Este important să se evalueze pentru ce este Statamic. Dacă construiți o nouă pornire și aveți nevoie de flexibilitatea unui cadru complet, sunt sigur că ați putea să-l rulați în Statamic, dar ar fi o mulțime de cod personalizat, care ar putea învinge scopul. În cazul în care cred că acest lucru se va dezvolta este ca o platformă de blogging sau CMS.
Venind dintr-un fundal în WordPress, acest lucru se simte ca un succesor direct. Urmează o mulțime de aceleași convenții în teorie, dar toate sunt implementate într-un mod mult mai inteligent. Comparând cantitatea de cod necesară în fiecare devine o glumă. Mergând înainte, Statamic are un API incredibil pentru a construi etichete personalizate, cârlige, noi tipuri de câmpuri și multe altele și vă puteți imagina că Statamic o face atât de săracă și simplă de făcut, cum ați fi putut aștepta.
Sper că v-ați bucurat de acest articol, dacă aveți orice întrebări, nu ezitați să mă întrebați mai jos, pe twitter @ gabrielmanricks sau pe Tuts + web dev canal IRC pe freenode (#nettuts).
Accentsconagua