Noțiuni de bază cu Craft CMS

Ce veți crea

Acesta este un tutorial de urmărire a Introducere în Craft CMS. Dacă nu sunteți familiarizați cu Craft, vă recomandăm să citiți mai întâi prima parte. Apoi, reveniți aici și urmați instrucțiunile noastre de instalare și de a începe.

Ce este Craft CMS?

Pixel & Tonic's Craft CMS este o alternativă WordPress pentru editorii orientați către dezvoltare care doresc un control mai profund și performanță mai puternică din partea instrumentelor lor de gestionare a conținutului. Este, de asemenea, o opțiune potențială pentru consultanți și dezvoltatori de a-și extinde ofertele de clienți.

Craftul nu este un constructor de site-uri - trebuie să vă construiți HTML, CSS și JavaScript, încorporând manual șabloanele Twig. Acest lucru nu va fi intimidant pentru cei utilizați pentru a construi teme WordPress. Pentru alții, din păcate, în prezent nu există o temă oficială sau o piață de pluginuri (deși nu aș fi surprinsă dacă apare în viitor). Dar Craft este construit pentru a fi scalabil excepțional și oferă caracteristici native pentru relații complexe de management al conținutului.

Este o alegere potrivită pentru site-urile mici, dar va străluci cu site-uri de conținut mai mari, cu conținut semnificativ, multi-layer, inter-conex.

Craftul este scris în PHP pe platforma puternică Yii 1.x. Dacă nu ați auzit de Yii, puteți citi introducerea mea în cadrul Yii la Tuts +. Nu trebuie să știți PHP sau Yii să folosească Craft. Este asemănător cu instrumentele CMS de la Django, scrise în Python.

În timp ce s-ar putea să nu fi auzit de Craft, comunitatea de dezvoltatori a crescut rapid. În luna iunie, propunerea sa pentru un site StackExchange Craft CMS a fost aprobată în doar cinci zile.

Puteți vizualiza o prezentare de site-uri care rulează Craft aici.

În acest tutorial, vă voi îndruma prin procesul de instalare a site-ului Craft, demo-ul său, și familiarizarea cu Craft pentru construirea propriului site cu el.

Instalarea site-ului demo Craft's On The Rocks

Mai întâi, să instalăm site-ul demonstrativ Craft's On The Rocks cu temă și conținut de probă. De asemenea, acest site deblochează toate caracteristicile premium pentru testare.

Folosesc Mac OS X cu MAMP. Site-urile mele locale rulează în directorul ~ / Sites. Să clonăm site-ul demo Craft de la Github:

git clone https://github.com/pixelandtonic/ontherocks.git

Apoi, să setăm permisiunile fișierelor pentru directoarele interne ale Craft:

cd ontherocks chmod 777 craft / storage / chmod 774 craft / config

Apoi, să actualizăm cea mai recentă versiune de Craft. În februarie 2015, am folosit versiunea 2.3.2627. Cu toate acestea, puteți găsi cele mai recente la pagina "Actualizări" de pe site-ul Craft..

curl -L http://download.buildwithcraft.com/craft/2.3/2.3.2627/Craft-2.3.2627.zip -o /tmp/Craft.zip unzip /tmp/Craft.zip -d BaseCraft cp -R BaseCraft / craft / app craft / app rm -R BaseCraft && rm /tmp/Craft.zip

Apoi, am folosit PHPMyAdmin pentru a crea baza de date:

Faceți clic pe pe stânci bază de date în PHPMyAdmin. Apoi apasa Import și alegeți fișierul din ~ / Site-uri / ontherocks / SQL / ontherocks.sql:

Apoi editați fișierul de configurare a bazei de date cu acreditările pentru baza de date MySQL locală:

 nano ~ / Site-uri / ontherocks / craft / config / db.php 

/ ** * Configurarea bazei de date * * Toate setările de configurare a bazei de date a sistemului dvs. intră aici. * Puteți vedea o listă cu setările implicite în craft / app / config / defaults / db.php * / return array ('server' => 'localhost', 'user' => 'rocks_user' 'yourpassword', 'database' => 'ontherocks', 'tablePrefix' => 'craft');

Creați o nouă gazdă virtuală cu numele de gazdă "ontherocks.dev" care indică directorul public / folderul.

Editați fișierul / etc / hosts pentru a rezolva ontherocks.dev la 127.0.0.1, dacă este necesar:

# # # Baza de date gazdă # # localhost este utilizată pentru a configura interfața loopback # atunci când sistemul pornește. Nu modificați această intrare. ## 127.0.0.1 localhost 127.0.0.1 ontherocks.dev

Tabloul de bord Craft este situat la http://ontherocks.dev/admin. Când sunt încărcate, veți vedea ceva de genul asta: maimuțe ... și globule!

Apoi, vi se va solicita să actualizați baza de date:

Vă puteți conecta cu următoarele acreditări: Nume de utilizator: admin, Parola: parola.

Tabloul de bord Craft

Iată tabloul de bord - arată cam ca WordPress, huh?

Iată pagina de pornire Pe drum:

Explorarea Site-ului Demonstrației Happy Lager

Cei drăguți de la Pixel & Tonic mi-au dat o pre-lansare a noului site de demonstrație gratuit, care, sperăm, va fi disponibil în momentul în care ați citit acest lucru - îl clonați aici. Noul site este numit Happy Lager:

Pașii de instalare sunt exact aceleași cu cele descrise mai sus pentru On the Rocks. Depozitarul Git ar trebui să fie situat aici:

git clone https://github.com/pixelandtonic/happylager.git

Happy Lager folosește capabilitățile de planificare mai profunde ale lui Craft. Iată o pereche de capturi de ecran din pagina Despre:

Sub coloana:

Iată pagina de servicii:

Mesajele Craftului

Iată pagina Înregistrări din tabloul de bord cu tot conținutul de la Happy Lager:

Aruncați o privire asupra tipurilor de intrări din panoul de navigare din stânga: Singles, Channels and Structures. Craft oferă tipuri de date mai sofisticate și mai extensibile decât WordPress.

Single sunt pagini unice care au un design unic, cum ar fi pagina de start a site-ului dvs.. canale sunt pentru intrări organizate după dată, cum ar fi un blog sau secțiuni de știri. structuri sunt pentru conținutul furnizat într-o comandă predefinită.

Editorul Craft

Iată pagina de editare. Rețineți lățimea câmpurilor posibile care sunt din nou personalizabile, de ex. Titlul, imaginea recomandată, descrierea scurtă, rubrica, subtitlul, corpul articolului.

Observați în partea de jos modul în care tipul de cotă de tragere oferă diferite machete în fluxul de poveste, precum și imaginea care urmează (dar nu am putut include totul în captura de ecran):

Această capacitate este ceea ce îi numește Craft Matrice, și permite compoziția și structura povestirii mai puternice. Fiecare bloc poate avea câmpuri personalizate și poziție personalizată și poate fi tras și aruncat în loc în flux. Iată un scurt videoclip care arată Matrice:

Iată-l Previzualizare live-doar frumos. Îmi amintește de previzualizarea lui Ghost's Markdown despre care am scris despre păstrarea cu Ghost 0.5 (Tuts +). Cititorii îmi pot aminti că urăsc Markdown - așa că apreciez foarte mult previzualizarea live Craft:

Iată ceva mai mult Previzualizare live:


Craftul oferă acces ușor la revizuirile trecute:

Biblioteca Media Craft

Activele de imagine sunt organizate în funcție de grup și sunt disponibile pe bunuri pagină:

Dacă ați așteptat vreodată WordPress pentru a încărca pagina dvs. media, veți aprecia cât de rapid este Craft.

Construirea paginii principale Happy Lager

Iată o privire mai atentă la conținutul din spatele părților de pe pagina de pornire Happy Lager - în mod specific, așa apare atunci când editați conținutul:

Craft folosește șabloanele Twig pentru a transpune elementele de conținut structurate în pagini web:

# # Despre șablon # ------------------- # # Singur despre șablon # # # % extinde "_layouts / site"% % block main%  

titlu

% if entry.infoHeroTopText%

entry.infoHeroTopText

% endif% % dacă entry.infoHeroBottomText%

entry.infoHeroBottomText

% endif%
% dacă entry.firstSectionHeader%

entry.firstSectionHeader

% endif% % dacă entry.firstSectionSubheader%

entry.firstSectionSubheader

% endif%

Tipuri de secțiuni

Taberele de artizanat sunt construite în jurul secțiunilor pe care le-am prezentat mai sus: Single, Channels and Structures. Iată un scurt videoclip care prezintă tipurile de secțiuni în profunzime: 

Iată secțiunile asociate cu site-ul demonstrativ Happy Lager - observați cum fiecare corespunde barei principale de navigare.

Pagina principala și Despre pagina sunt simple. Știri și Muncă pagina sunt Canale. Servicii pagina este o structură.

Desigur, Craft oferă și categorii și etichete. Categoriile vă ajută să vă organizați conținutul site-ului înainte, în timp ce etichetele vă permit să creați o folksonomie ad-hoc pe baza conținutului din fiecare dintre articolele dvs..

Iată un scurt videoclip care descrie categorii și etichete:


O altă facilitate atractivă oferită de Craft este abilitatea de a direcționa cererile de adrese URL pe căi prietenoase direct către anumite secțiuni:

O privire mai atentă la paginile Happy Lager

Iată pagina Ce este activată de la http://happylager.dev/index.php/work:

Aici puteți vedea modul în care elementele de mai sus sunt editate ca intrări separate în Canalul de lucru, organizate după dată. 

Iată o privire la pagina Servicii-Cum se face: http://happylager.dev/index.php/services. Este o structură ale cărei elemente au o ordine prestabilită.

Fiecare dintre casetele de imagini este condusă de o intrare în cadrul serviciilor. Puteți modifica ordinea lor de apariție prin tragere și plasare:

Iată un exemplu de șablon Twig pentru această pagină:

% extinde "_layouts / site"% % block main%  

titlu

% pentru intrarea în craft.entries.section ('Services') find ()%

entry.title

% endfor% % endblock%

Iată șablonul pentru fiecare intrare. Aceasta vă oferă o idee despre cum să creați șabloane Twig pentru site-ul dvs. de Craft și ce este implicat:

# # Șablon de introducere a serviciilor # ------------------- # # Acest șablon se încarcă ori de câte ori este solicitată o adresă URL a unei lucrări. Acest lucru se datorează faptului că setarea Șablonului secțiunii Work este # setată la "services / _entry", calea către acest șablon. #% % set lastSegment = craft.request.getLastSegment ()% % dacă ultimaSegment ! = 'servicii'%  % endif% % dacă lastSegment == 'servicii'%  

entry.title

% dacă entry.indexHeading% entry.indexHeading % endif%
% pentru intrarea în craft.entries.section ('Services'). type ('servicesDetail').
% set image = input.featuredImage.first ()% % dacă imaginea% image.title % endif%

entry.title

% dacă entry.shortDescription% entry.shortDescription % endif%
% endfor%
% else% % includ "include / articlebody"% % endif%
% if lastSegment! = 'servicii'%
% pentru bloc în intrare.serviciiBod%

block.heading

block.text
% set photo = block.image.first ()% % dacă fotografie% photo.title % endif%
% endfor%
% set entries = craft.entries.section ('Work') limită (1) .offset (2)% % pentru intrare în înregistrări% % set asset = entry.featuredImage.last % dacă activ%
% endif%
% set asset = entry.featuredImage.first ()% % dacă activ% asset.title % endif%

entry.title

entry.heading

% dacă entry.subheading%

entry.subheading

% endif%

Vezi mai mult

% endfor%
% endif% % endblock% % picior bloc% părinte () % endblock%

Editarea intrărilor

Editarea intrărilor în Craft este simplă, la fel ca WordPress, dar cu capabilități de aspect îmbunătățite pe care în mod normal le-ați cere ca pluginurile să se realizeze.

Fiecare secțiune poate avea mai multe tipuri de intrări definite de utilizator. De exemplu, secțiunea Știri are aici două tipuri diferite de intrări: articole și linkuri. Tipurile de intrări vă permit să stocați diferite tipuri de conținut în aceeași secțiune.

Iată un scurt videoclip despre tipurile de intrare:

Acum, că aveți un sentiment cum funcționează construcția site-ului în craft, să instalăm o nouă versiune de la zero.

Instalarea ambarcațiunii de la zero

Pentru a instala Craft, vizitați site-ul Web și descărcați codul de bază. Folosesc Mac OS X cu MAMP pentru dezvoltarea locală și testarea mea.

Craft oferă instrucțiuni detaliate de instalare și linkuri către ghiduri pentru Mac, Laravel, Heroku și chiar o instalare automată cu Composer.

Redenumiți fișierul htaccess:

cd ~ / Site-uri / craftcms / public mv htaccess .htaccess

Creați un link simbolic către directorul dvs. public Mărfurile pentru MAMP:

ln -s ~ / Site-uri / craftcms / public / Aplicatii / MAMP / htdocs / craft

Dacă rulați instalarea Craft local de la numele de gazdă "craft.dev" sau "ontherocks.dev", veți avea opțiunea de a comuta gratuit între Craft Personal, Craft Client și Craft Pro, pentru totdeauna.

Am creat baza de date prin intermediul PHPMyAdmin.

Editați fișierul de configurare a bazei de date Craft pentru acreditările MySQL:

nano ./craft/config/db.php

Introduceți acreditările în câmpurile de mai jos:

/ ** * Configurarea bazei de date * * Toate setările de configurare a bazei de date a sistemului dvs. intră aici. * Puteți vedea o listă a setărilor implicite în craft / app / etc / config / defaults / db.php * / array return (// Numele serverului de bază de date sau adresa IP. De obicei, acesta este "localhost" sau "127.0.0.1 'username' => 'root', // parola bazei de date pentru conectare cu 'password' => 'your-password', / / Numele bazei de date pentru a selecta 'database' => 'craft', // prefixul folosit la numirea tabelelor, care nu poate fi mai mare de 5 caractere. 'TablePrefix' => 'craft',);

Configurați permisiunile de scriere pentru aceste directoare de aplicații Craft:

chmod 744 ./craft/app chmod 744 ./craft/config chmod 744 ./craft/storage/

Vizitați pagina de pornire locală Craft și ar trebui să vedeți din nou maimuțele!

Înregistrați-vă contul de administrare inițial:

Configurați proprietățile site-ului:

Si asta e:

Iată tabloul de bord din nou:

Craftul este concentrat atât de către utilizatorii finali, încât includ un formular de contact de sprijin pe pagina de pornire a tabloului de bord.

Puteți găsi setările site-ului din bara de navigare din dreapta sus. Ea îmi amintește de iOS:

Iată ce arată site-ul tău implicit de Craft atunci când începi:

Da, Craft nu are comunitatea de teme WordPress. În cea mai mare parte, trebuie să codificați propria temă. Pentru începători, WordPress are încă un avantaj. 

Pe de altă parte, este posibil să observați deja cât de repede Craft rulează în comparație cu WordPress.

Unde să mergeți de aici?

Desigur, puteți începe să construiți un exemplu de conținut al site-ului dvs., dar va trebui să aflați mai multe despre temele și pluginurile Craft. Iată câteva resurse care vă vor ajuta:

  • Prezentarea generală a șabloanelor artizanale
  • Craft Introducere în Plugin-uri
  • Straight Up Craft (site-ul terț) Plugin Directory
  • Straight Up Crafts Directory of Consultants
  • Urmați @CraftCMS pe Twitter

Vă încurajez să instalați programul Craft și să explorați mai departe caracteristica acestuia. Sunt incantat de puterea, controlul si scalabilitatea Craft ofera ca o alternativa la WordPress. Sunt, de asemenea, un aficionado Yii și este minunat să văd un instrument CMS construit pe baza mea preferată.

Dacă doriți să vedeți o serie de publicații cu Craft, vă rugăm să postați o notă în comentarii. De asemenea, apreciez întrebările și comentariile dvs. și, în general, răspund. Puteți să mă contactați pe Twitter @reifman sau să mă trimiteți direct prin e-mail.

De asemenea, vreau să dau un strigăt lui Brandon Kelly, proprietar al Pixel & Tonic, creatorii Craft. Brandon a fost foarte util în a-mi răspunde la întrebările mele și mi-a dat o previzualizare a noului site demonstrativ pe care ar trebui să-l puteți accesa acum.

Link-uri conexe

  • Site-ul Craft CMS
  • Craft CMS Video Tutoriale
  • Introducere în Cadrul Yii (Tuts +)
  • Zece motive pentru care iubim meseria
  • Pixel & Tonic, creatori de meșteșuguri
Cod