Începeți-vă și rulați cu Craft CMS

Craft CMS vă este oferit de oamenii talentați de la Pixel & Tonic. Este întreținut activ și menținut în conformitate cu schimbările din lumea modernă a dezvoltării web și este în creștere în popularitate în rândul CMS-urilor - cu o listă impresionantă de clienți precum Netflix. De asemenea, are un server Discord foarte activ, crescând la peste 5.000 de membri în doar un an de când este live.

De ce să folosiți Craft CMS?

Craft CMS este CMS-ul nostru preferat de aproximativ patru ani; am construit site-uri web pentru clienți și chiar propria noastră afacere pe Craft. Ca companie, verificăm în mod constant piața CMS și am ajuns mereu înapoi la Craft. Deci, să intrăm în motivele pentru care am ales Craft CMS față de celelalte de pe piață:

• Familiaritatea interfeței, ceea ce face destul de ușor pentru oricine vine de la WordPress.
• Comunitate activă de dezvoltare.
• Câmpuri flexibile, oferindu-vă control asupra modului în care este structurat conținutul dvs.
• Fără blocări sau taxe lunare. Doar o taxă unică dacă deveniți Pro/eCommerce.
• Extensibilitate cu magazinul de pluginuri în creștere al Craft.

Așadar, cu introducerea din drum, vă voi arăta cum să începeți și să rulați cu un mediu local Craft CMS complet configurat în aproximativ cincisprezece minute. Odată ce am finalizat următorii pași, ar trebui să aveți o bază excelentă pentru a începe următorul proiect web și, sperăm, să fiți gata să vă îndepărtați definitiv de WordPress.

Instalarea mediului de dezvoltare

Craft CMS este livrat cu un instrument foarte la îndemână pentru a vă configura mediul local. Acest instrument se numește Craft Nitro și simplifică configurarea unui mediu Craft CMS. Este nou în scena Craft, dar ajută foarte mult.

Configurarea Multipass

Craft Nitro necesită ceva numit Multipass care creează o mașină virtuală Ubuntu pe sistemul tău. (Nu vă faceți griji, nu va trebui să configurați sau să deschideți Ubuntu.)

• Descărcați cel mai recent program de instalare Multipass pentru sistemul dvs. de operare de pe site-ul oficial.
• Odată descărcat, rulați programul de instalare. Când acest lucru este finalizat, ar trebui să fiți gata să treceți la pasul următor.
  

Configurarea Craft Nitro

Configurarea Craft Nitro este simplă și implică un script de linie de comandă pentru a-l instala pe macOS și Linux, dar pentru Windows este puțin diferit. Voi analiza mai jos cum să-l configurez pentru ambele tipuri de sisteme de operare. Vestea bună este că, odată ce este configurat, este gata și veți putea crea cu ușurință noi instalări Craft fără a trece prin asta din nou.

Instalare pe macOS și Linux

Deschideți terminalul și inserați următoarea linie de script. Odată lipite, urmați opțiunile de pe linia de comandă pentru a vă crea mașina virtuală cu setările prestabilite pe care le are Craft Nitro. Acest lucru ar trebui să fie perfect, dar dacă doriți să reglați fin, mergeți la ea. Rețineți că Craft are cerințe minime pentru a funcționa fără probleme.

Rulați următoarea linie în Terminal:

 bash <(curl -sLS https://installer.getnitro.sh)

Instalare pe Windows 10 Pro

Instalarea pe Windows este destul de complexă, dar nu ar trebui să dureze prea mult timp pentru a începe. Doar asigurați-vă că aveți Hyper-V activat. Din păcate, Hyper-V nu poate fi instalat pe versiunea Home Edition de Windows.

1. Asigurați-vă că Hyper-V este activat (mai multe detalii aici);
2. Descărcați nitro_windows_x86_64.zip din cea mai recentă versiune;
3. Creați un folder Nitro în folderul dvs. home dacă nu există deja (adică C:\Users\<username>\Nitro );
4. Extrageți fișierul zip și copiați nitro.exe în folderul Nitro pe care tocmai l-ați creat în folderul de acasă;
5. Dacă aceasta este prima dvs. instalare, rulați aceasta din linia de comandă pentru a adăuga Nitro la calea globală:
   

    setx path "%PATH%;%USERPROFILE%\Nitro"

6. Porniți terminalul Windows ( cmd.exe ) cu permisiuni de administrator și rulați Nitro în el.

După ce ați finalizat cele de mai sus, urmați instrucțiunile terminalului pentru a vă crea prima mașină. Presetările implicite pe care Craft Nitro le stabilește ar trebui să fie perfect pentru mediul dumneavoastră.

Instalarea Craft CMS

Până acum am instalat Craft Nitro și am creat mașina noastră virtuală, iar acum suntem gata să instalăm Craft CMS. În următoarele instrucțiuni, vom descărca Craft și vom „monta” fișierele noastre, permițându-ne să dezvoltăm în sistemul nostru actual și să vedem modificările reflectate în mașina noastră virtuală Ubuntu. De asemenea, vom configura baza noastră de date inițială și vom obține un domeniu local pe care îl putem folosi, de exemplu myfancyproject.test. Haide să mergem:

Crearea unui nou proiect

1. Creați un folder nou în care doriți să dezvoltați/instalați Craft;
2. Descărcați Craft CMS din cea mai recentă versiune (prin Composer sau Zip);
3. Dezarhivați/Mutați conținutul în folderul pe care tocmai l-am creat;
4. Deschideți terminalul/linia de comandă;
5. Accesați folderul creat. $ cd /path/to/project ;
6. Run nitro add ;
7. Urmați instrucțiunile din linia de comandă de pe ecran. (Presetările sunt de obicei bune, dar se modifică după cum doriți.)

Sfat : dacă vedeți probleme „Nu se pot citi” pe macOS, atunci Multipass trebuie să aibă acces complet la disc. Pentru a face acest lucru, asigurați-vă că multipassd este bifat în Preferințe sistem → Securitate și confidențialitate → Confidențialitate → Acces complet la disc.

Conectarea la baza noastră de date

Acum ar trebui să avem un domeniu de testare și fișierele noastre de proiect montate - știu, destul de ușor până acum, și asta este partea grea completă. Conectarea la baza noastră de date necesită să adăugăm detaliile bazei de date pentru site-ul nou creat în fișierul .env al proiectului nostru.

1. Deschideți fișierul .env al proiectului nostru (situat în folderul rădăcină);
2. Modificați detaliile bazei de date la următoarele:
   

    DB_USER="nitro" DB_PASSWORD="nitro" # 'nitro' is the default database DB_DATABASE="nitro"

Sfat : Dacă doriți să deschideți baza de date în programul SQL dorit, tot ce trebuie să faceți este să rulați nitro info în linia de comandă și veți vedea adresa IP a bazei de date sub „IPV4”. Utilizați numele de utilizator și parola de mai sus (împreună cu portul pe care l-ați selectat în timpul configurării) pentru a vă conecta.

Instalați Craft CMS

Ne-am configurat mașina virtuală, am setat domeniul de testare și ne-am pregătit baza de date. Acum este timpul să instalezi Craft CMS și să intri în secțiunea de administrare — totul ar trebui să fie ușor de mers de aici. Deci să trecem la asta.

1. Mergeți la domeniul de testare pe care l-ați setat în timpul configurării, urmat de /admin (de exemplu testdomainyouset.test/admin );
2. Ar trebui să vedeți ecranul de instalare al Craft CMS ( Ura! );
3. Urmați instrucțiunile de instalare de pe ecran;
4. Odată terminat, ar trebui să fiți redirecționat către noul panou de administrare.

Sfat : dacă nu ați instalat Craft prin Composer, este posibil să vi se solicite o cheie de securitate. Pentru a genera o cheie securizată criptografic, utilizați un manager de parole precum 1Password / LastPass. (Nu există limită de lungime, așa că poate fi atât de complex pe cât doriți). Deschideți încă o dată fișierul nostru .env, găsiți următoarea linie SECURITY_KEY="" , inserați cheia generată în ghilimele și salvați.

Acum ar trebui să aveți un mediu de dezvoltare local complet configurat pentru Craft CMS, care va oferi un punct de plecare excelent pentru orice încercați să dezvoltați, fie că vă mutați blogul de pisică de pe WordPress sau creați un magazin de comerț electronic. Nu uitați să vă opriți serverul după ce ați terminat de utilizat nitro stop în linia de comandă.

Iată câteva comenzi utile pentru Craft's Nitro, care vă vor ajuta în timpul dezvoltării:

• nitro start (pornește serverul de dezvoltare)
• nitro stop (oprește serverul de dezvoltare)
• nitro context (vă arată informații despre mediile instalate)
• nitro info (informații despre mediul curent, versiunea PHP etc.)

Crearea blogului nostru pentru pisici

Acum că avem Craft în funcțiune, putem începe pe blogul nostru de pisici și putem începe să ne bucurăm de puterea pe care ne-o oferă Craft. În această secțiune, vom configura modelul nostru de conținut, vom crea șablonul nostru de bază și vom construi pagina de pornire și paginile de postare interioară.

Modelele de conținut sună înfricoșător, dar în Craft este opusul; există un sistem GUI ușor de utilizat — nu este nevoie de cod complex pe aici! Pentru blogul nostru pentru pisici, trebuie să înființăm o secțiune numită „Pisici” care are nevoie de numele pisicii, fotografia și o mică descriere, iar apoi o singură pagină „Homepage”.

Cum se creează secțiuni și pagini Cum se creează o postare pentru pisici

Cum se creează secțiuni și pagini

Vom crea secțiunea noastră „Pisici” și pagina noastră de pornire, care vor fi clasificate drept „single” în limba Craft. Secțiunile sunt exact așa cum sună - secțiuni ale site-ului dvs. - și Paginile sunt, de asemenea, care se explică de la sine, pagini individuale ale site-ului dvs., cum ar fi cele juridice și pagina noastră de pornire.

Crearea secțiunii noastre de pisici

1. Accesați Setări din meniul din stânga;
2. Faceți clic pe „Secțiuni”;
3. Faceți clic pe „Secțiune nouă”;
4. În „Nume” puneți Cats ;
5. Secțiune Tip Channel
   ( Canalele sunt folosite pentru fluxuri cu conținut similar, la fel ca pisicile noastre. )
6. În „Format URI de intrare” ne vom asigura că este /cats/{slug} ;
7. În „Șablon” vom pune cat ;
8. Salva.

Ceea ce am făcut mai sus este să îi spunem lui Craft că am dori ca orice postare din secțiunea Pisici să aibă un format URL ca acesta: ourtestdomain.test/cats/fluffy , iar șablonul pe care am dori să-l folosim este cats.twig .

Crearea paginii noastre de pornire

1. În „Secțiuni”, faceți clic pe „Secțiune nouă”;
2. În „Nume”, puneți Homepage de pornire;
3. Tip sectiune Single ;
4. Bifați caseta de selectare „Homepage”;
5. În „Șablon” vom pune index ;
6. Salva.

Crearea Câmpurilor

Craft vine fără preconcepții despre ceea ce vrei să construiești; vă oferă o tablă complet goală. Creăm exact ceea ce ne dorim să fie structura postării noastre prin generarea propriilor noastre „Câmpuri”. Să creăm „Câmpurile” pisicii noastre pentru următorul nume, descriere și fotografie.

1. Mergeți la secțiunea de administrare a site-ului dvs. vizitând yourchosendomain.test/admin ;
2. Navigați la Setări din meniul din stânga;
3. Faceți clic pe „Câmpuri”;
4. În dreapta sus, faceți clic pe „Câmp nou”.

Stabilirea numelui pisicii

Vom avea nevoie de un nume pentru pisicile noastre, așa că haideți să creăm un câmp de name .

• În Nume pune „Numele pisicii”;
• Alegeți „Text simplu” în Tipul câmpului;
• Acum Salvați.
  

Configurarea descrierii pisicii

Pisicile noastre au nevoie și de o descriere, dar să limităm numărul de caractere pe care autorii noștri le pot introduce despre fiecare pisică.

• Faceți clic din nou pe „Câmp nou”;
• În Nume puneți „Descrierea pisicii”;
• Alegeți din nou tipul de câmp „Text simplu”;
• Creați o limită adăugând „2000” în caseta Field Limit;
• Faceți clic pe Salvare.

Configurarea fotografiei pisicii

Vom dori să adăugăm fotografii la fiecare dintre postările noastre pentru pisici și pot exista mai multe fotografii pentru fiecare pisică - nu este o problemă. Dar înainte de a crea un câmp, trebuie să îi spunem lui Craft unde vrem să fie stocate fotografiile pe serverul nostru. (Craft are și opțiunea de încărcare în soluții de stocare în cloud.)

• Mergeți la „Setări” din meniul din stânga;
• Faceți clic pe „Active”;
• Faceți clic pe „Volum nou”;
• În Nume puneți „Fotografia pisicii”;
• Activați „Activele din acest volum au adrese URL publice”;
• În „Adresa URL de bază” puneți @web/uploads/ ;
• În „Calea sistemului de fișiere” puneți @webroot/uploads/ ;
• Salva.

Proprietățile de mai sus îi spun lui Craft unde am dori să fie stocate fișierele noastre încărcate. Le puteți schimba în orice doriți. De asemenea, puteți citi mai multe despre setarea variabilelor de mediu pentru acestea în documentație.

Potrivirea câmpului cu secțiunile

Acum ne-am configurat și rulat câmpurile și secțiunile, va trebui să le combinăm pe cele două, atribuind câmpurile pe care ne-am dori să aibă secțiunile noastre. Acest lucru este la fel de ușor ca tragerea și plasarea în Craft.

• Mergeți la Setări;
• Faceți clic pe „Secțiuni”;
• Acum faceți clic pe „Editați tipul secțiunii”;
• Acum faceți clic pe secțiunea noastră „Pisici”;
• Selectați fila „Câmpuri” din meniul din dreapta;
• Trageți peste câmpurile „Pisici” pe care le-am creat anterior în panoul de conținut;
• Odată trasat peste, Salvați secțiunea Pisici.

Sfat : Puteți elimina câmpul „Titlu” din postările noastre dezactivând opțiunea „Afișați câmpul pentru titlu”. S-ar putea să doriți numele pisicii ca titlu, de exemplu.

Cum să creezi o postare pentru pisici

Acum este timpul să creăm de fapt o postare de pisică pufoasă. Mergeți la „Inregistrări” din meniul de administrare din stânga.

• Faceți clic pe „Intrare nouă”;
• În meniul drop-down, selectați „Pisici”;
• Creează-ți postarea! ( Cu cât mai pufos, cu atât mai bine. )

Listarea articolelor noastre pentru pisici

Acum avem modelul de conținut gata, putem începe să construim interfața de bază pentru blogul nostru de pisici. Craft este scris în limbajul Twig/Liquid. Dacă v-ați implicat vreodată în dezvoltarea Shopify, acest lucru ar trebui să vă fie familiar; dacă nu, este destul de ușor de luat. Dar mai întâi, trebuie să deschidem folderul de instalare Craft în editorul nostru de cod preferat (unde ați dezarhivat instalarea Craft).

1. Deschideți Craft Install în editorul de cod;
2. Creați un fișier nou în Șabloane numit index.twig
   ( Este posibil ca Craft să fi instalat un index implicit. Deschideți-l în schimb și ștergeți-l. )
3. Adăugați următorul cod:

 <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> {# Create an entry query with the 'section' and 'limit' parameters #} {% set myEntryQuery = craft.entries() .section('cats') .limit(10) %} {# Fetch the entries #} {% set entries = myEntryQuery.all() %} {# Display the entries #} <div class="container"> <div class="row"> {% for entry in entries %} <div class="col"> <article class="card"> {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} <div class="card-body"> <h1><a href="{{ entry.url }}">{{ entry.title }}</a></h1> <h2>{{ entry.catsName }}</h2> <p>{{ entry.catsDescription }}</p> <a class="btn btn-primary" href="{{ entry.url }}">View {{ entry.catsName }}</a> </div> </article> </div> {% endfor %} </div> </div> </body> </html>

În codul de mai sus, îi spunem lui Craft despre secțiunea noastră „Pisici” și punem o limită a postărilor la 10. Apoi preluăm intrările din acea secțiune și continuăm să trecem peste fiecare dintre pisicile din intrările de preluare din următorul cod. . Imaginile sunt puțin diferite în Craft: sunt stocate ca o matrice, așa că facem o altă buclă în codul nostru pentru a obține imaginile pisicilor.

Să testăm

Deschideți adresa URL de dezvoltare a testului pe care am creat-o în timpul configurării. (Asigurați-vă că serverul dvs. nitro rulează folosind nitro start ). Ar trebui să vedem acum postările pe care le-am creat afișate pe pagina noastră de index. Făcând clic pentru a vedea mai multe informații, ne dă o eroare 404, așa că haideți să o reparăm în continuare!

Sfat : am inclus Bootstrap pentru a-l face să arate puțin mai elegant, dar nu ezitați să includeți orice cadru dorit.

Pagina de postare a pisicii

Vom face la fel ca și cu pagina de index. Să creăm șablonul cat prin crearea unui fișier nou în folderul Șabloane numit cat.twig . Deoarece ne aflăm deja în contextul Entry , nu trebuie să-l interogăm din nou.

 <html> <body> {% block content %} {% set catImage = entry.catsPhoto.one() %} {% if catImage %} <img src="{{ rel.url }}" class="card-img-top" alt="..."> {% endif %} {{ entry.title }} {{ entry.catsName }} {{ entry.catsDescription }} {% endblock %} </body> </html>

Salvați acest lucru și reîmprospătați site-ul nostru de dezvoltare de testare. Acum ar trebui să putem naviga la pagina noastră de intrare pentru pisici! Voila!

Devin fără cap

Dacă vă place să deveniți mai tehnic cu Craft și să îl utilizați ca sistem de gestionare a conținutului pentru a alimenta aplicația dvs. web, puteți face acest lucru utilizând pachetul Pro al Craft CMS, care adaugă conturi de utilizator și GraphQL la configurația dvs. Versiunea Pro a Craft poate fi testată și testată gratuit, ceea ce înseamnă că îi puteți face un test amănunțit înainte de a vă angaja. Acum vom vedea cum să configurați un API GraphQL de bază folosind editorul GraphQL încorporat de Craft.

Începeți Pro Trial

După ce ați instalat Craft CMS, mergeți la „Plugin Store” și căutați „Upgrade” în opțiunile din meniul din stânga. Faceți clic pe „Trial” în secțiunea „Pro” și rulați procesul de actualizare.

Configurarea de bază

Odată ce ați început încercarea Pro Craft CMS, ar trebui să observați o nouă opțiune de meniu în panoul lateral de administrator: GraphQL. Înainte de a trece direct, avem nevoie de câteva modele de conținut care pot forma rezultatul. După ce ați creat modelele de conținut, Craft CMS vă va crea automat un API GraphQL din cutie. Nu este nevoie să definiți nici schemele!

Creați-vă punctul final API Cat

Ne-am ordonat conținutul; acum vrem să creăm punctul final, astfel încât să putem prelua tot conținutul nostru drăguț de pisică. Hai să facem asta acum:

1. Deschideți proiectul Craft CMS routes.php în IDE.
2. Adăugarea următoarei reguli va face punctul final API disponibil la https://yourprojecturl.test/api :
   

    return [ 'api' => 'graphql/api', // ... ];

3. Salveaza si inchide.
4. Testați prin ping la punctul final:
   

    curl -H "Content-Type: application/graphql" -d '{ping}' https://yourprojecturl.test/api

5. Ar trebui să primiți „pong” ca răspuns.

Activați conținutul dvs

Ne-am configurat punctul final pentru a primi solicitări. Acum este timpul să activăm/dezactivăm anumite părți ale site-ului nostru pe care am dori să fie disponibile prin intermediul API-ului nostru. De exemplu, poate doriți să dezactivați anumite intrări care conțin informații sensibile. Craft face acest proces extrem de ușor; este un caz de bifare/debifare. (Puteți deveni mai complex scriind și propriile scheme.) Deocamdată, vom crea o schemă publică care este disponibilă public. Puteți crea scheme private care necesită o cheie secretă, dar acest lucru nu este valabil pentru acest ghid.

1. Mergeți la secțiunea GraphQL prin bara laterală a panoului de administrare;
2. Faceți clic pe „Schema publică”;
3. Activați secțiunea „Pisici”.
   ( Acest lucru va face conținutul nostru disponibil prin punctul dvs. final. )
4. Salva.
   

Testarea punctului final

Acum că am ales datele pe care dorim să le punem la dispoziție prin punctul nostru final, acum este timpul să le testăm. În meniul derulant GraphQL din panoul de administrare din stânga, veți observa un element numit „GraphiQL”. GraphiQL ne permite să ne explorăm API-ul și să îl interogăm în tabloul de bord.

1. Deschideți GraphiQL;
2. Schimbați „Schema completă” în „Schema publică”;
3. Scrieți următoarea interogare GraphQL în panoul din stânga:
   

    query ($section: [String], $orderBy: String) { entries(section: $section, orderBy: $orderBy) { title slug id } }

4. Faceți clic pe butonul „Play”.

Sfat : Dacă nu sunteți 100% la interogări GraphQL, aceasta nu este o problemă; Craft vine cu un ghid la îndemână pentru a vă ajuta.

Încheierea

Acum am făcut o scufundare destul de ușoară în lumea Craft CMS. Să rezumam ceea ce am realizat în următorul ghid:

• Configurați un mediu de dezvoltare locală cu Multipass;
• Creat și configurat o nouă instalare Craft;
• S-a adăugat un domeniu de testare în care ne putem accesa instalarea;
• Am creat un blog drăguț pentru pisici;
• A dispărut fără cap;
• Am creat un punct final API pentru a accesa pisicile noastre.
  

Dacă sunteți interesat să vă implicați mai mult în Craft CMS și să faceți parte din comunitate, ar trebui să vă alăturați serverului Craft Discord foarte activ și să citiți mai multe prin documentația oficială.