Iniziare con Craft CMS

Cosa starai creando

Questo è un tutorial di follow-up per Introduzione a Craft CMS. Se non hai familiarità con Craft, ti raccomando di leggere prima la prima parte. Quindi, torna qui e segui la nostra guida di installazione e guida.

Che cos'è Craft CMS?

Pixel & Tonic's Craft CMS è un'alternativa WordPress per editori orientati allo sviluppo che desiderano un controllo più profondo e prestazioni più potenti dai loro strumenti di gestione dei contenuti. È anche un'opzione potenziale per consulenti e sviluppatori per espandere le loro offerte di clienti.

Craft non è un costruttore di siti: è necessario creare manualmente HTML, CSS e JavaScript incorporando i modelli Twig. Questo non sarà intimidatorio per chi è abituato a creare temi WordPress. Per gli altri, sfortunatamente, al momento non esiste un tema ufficiale o un marketplace di plug-in (anche se non mi sorprenderebbe se ne comparisse uno in futuro). Ma Craft è costruito per essere eccezionalmente scalabile e offre funzionalità native per relazioni di gestione dei contenuti complesse.

È una scelta appropriata per piccoli siti Web, ma risplenderà con siti di contenuti più grandi con contenuti multi-livello significativi correlati.

Craft è scritto in PHP sulla potente piattaforma Yii 1.x. Se non hai mai sentito parlare di Yii, puoi leggere la mia Introduzione a Yii Framework su Tuts +. Non è necessario conoscere PHP o Yii per usare Craft. È simile agli strumenti CMS basati su Django scritti in Python.

Sebbene tu non abbia sentito parlare di Craft, la sua community di sviluppatori sta crescendo rapidamente. Lo scorso giugno, la sua proposta per un sito Craft CMS StackExchange è stata approvata in soli cinque giorni.

È possibile visualizzare una vetrina di siti che eseguono Craft qui.

In questo tutorial, ti guiderò attraverso il processo di installazione di Craft, il suo sito demo e familiarizzando con Craft per creare il tuo sito con esso.

Installazione del sito demo di Craft's On The Rocks

Innanzitutto, installiamo il sito di dimostrazione di Craft's On The Rocks con temi e contenuti di esempio. Questo sito sblocca anche tutte le funzionalità premium per i test.

Sto usando Mac OS X con MAMP. I miei siti locali vengono eseguiti nella directory ~ / Sites. Facciamo clonare il sito demo di Craft da Github:

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

Quindi, impostiamo i permessi del file per le directory interne di Craft:

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

Successivamente, aggiorniamo l'ultima build di Craft. A febbraio 2015, ho usato la versione 2.3.2627. Tuttavia, è possibile trovare le ultime notizie nella pagina "Aggiornamenti" sul sito Web di Craft..

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

Quindi, ho usato PHPMyAdmin per creare il database:

Clicca sul con ghiaccio database in PHPMyAdmin. Quindi fare clic Importare e scegli il file in ~ / Siti / ONTHEROCKS / SQL / ontherocks.sql:

Quindi modificare il file di configurazione del database con le credenziali per il proprio database MySQL locale:

 nano ~ / Sites / ontherocks / craft / config / db.php 

/ ** * Configurazione database * * Tutte le impostazioni di configurazione del database del sistema vanno qui. * Puoi vedere un elenco delle impostazioni predefinite in craft / app / config / defaults / db.php * / return array ('server' => 'localhost', 'user' => 'rocks_user', 'password' => 'yourpassword', 'database' => 'ontherocks', 'tablePrefix' => 'craft',);

Crea un nuovo host virtuale con il nome host "ontherocks.dev" che punta al pubblico / cartella.

Modifica il file / etc / hosts per risolvere ontherocks.dev in 127.0.0.1, se necessario:

## # Host Database # # localhost viene utilizzato per configurare l'interfaccia # di loopback all'avvio del sistema. Non cambiare questa voce. ## 127.0.0.1 localhost 127.0.0.1 ontherocks.dev

La dashboard di Craft si trova in http://ontherocks.dev/admin. Una volta caricato, vedrai qualcosa di simile: scimmie ... e bulbi oculari!

Quindi, ti verrà chiesto di aggiornare il database:

Puoi accedere con le seguenti credenziali: Nome utente: Admin, Parola d'ordine: parola d'ordine.

The Craft Dashboard

Ecco la dashboard: sembra un po 'come WordPress, eh?

Ecco la homepage di On the Rocks:

Esplorazione del sito di dimostrazione Happy Lager

Le persone simpatiche di Pixel & Tonic mi hanno dato una pre-release del loro nuovo sito dimostrativo gratuito, che spero sarà disponibile quando leggerete questo: clonarlo qui. Il nuovo sito si chiama Happy Lager:

Le fasi di installazione sono esattamente le stesse descritte sopra per On the Rocks. Il repository Git dovrebbe essere posizionato qui:

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

Happy Lager si avvale delle funzionalità di layout più profonde di Craft. Ecco un paio di screenshot dalla pagina Informazioni:

Below the fold:

Ecco la pagina dei servizi:

Pagina delle voci di Craft

Ecco la pagina delle voci nella dashboard con tutti i contenuti di Happy Lager:

Dai un'occhiata ai tipi di voce nel pannello di navigazione a sinistra: Singoli, Canali e Strutture. Craft offre tipi di dati più sofisticati ed estensibili rispetto a WordPress.

single sono una sola pagina che ha un design unico come la home page del tuo sito. canali sono per le voci organizzate per data, ad esempio un blog o sezioni di notizie. strutture sono per i contenuti forniti in un ordine predefinito.

The Craft Editor

Ecco la pagina di modifica. Nota l'ampiezza dei possibili campi che sono di nuovo personalizzabili, ad es. Titolo, Immagine in primo piano, Breve descrizione, Intestazione, Sottotitolo, Corpo dell'articolo.

Notate below the fold come il tipo di preventivo pull offre vari layout nel flusso della trama come fa l'immagine che segue (ma non ho potuto includere tutto nello screenshot):

Questa capacità è ciò che Craft chiama suo Matrice, e consente una composizione e un layout della storia più potenti. Ogni blocco può avere campi personalizzati e posizioni personalizzate e può essere trascinato e lasciato cadere nel flusso. Ecco un breve video che mostra il Matrice:

Ecco il Anteprima dal vivo-semplicemente bellissima. Mi ricorda l'anteprima di Ghost's Markdown di cui ho parlato su Keeping Up with Ghost 0.5 (Tuts +). I lettori potrebbero ricordare che odio Markdown, quindi apprezzo molto l'anteprima dal vivo di Craft:

Ecco un po 'di più Anteprima dal vivo:


Craft offre un facile accesso alle revisioni precedenti:

The Craft Media Library

Le risorse immagine sono organizzate per gruppo e disponibili su Risorse pagina:

Se hai mai aspettato che WordPress caricasse la tua pagina multimediale, apprezzerai la velocità di Craft.

Costruire la Home Page di Happy Lager

Ecco uno sguardo più da vicino al contenuto dietro le parti della home page di Happy Lager, in particolare, questo è il modo in cui appare quando si modifica il contenuto:

Craft utilizza i modelli Twig per trasporre gli elementi del contenuto strutturato in pagine Web:

# # About template # ------------------- # # Single about template # # # % estende "_layouts / site"% % block main%  

title

% se entry.infoHeroTopText%

entry.infoHeroTopText

% endif% % se entry.infoHeroBottomText%

entry.infoHeroBottomText

% finisci se %
% if entry.firstSectionHeader%

entry.firstSectionHeader

% endif% % se entry.firstSectionSubheader%

entry.firstSectionSubheader

% finisci se %

Tipi di sezione

I siti artigianali sono costruiti attorno alle sezioni che abbiamo delineato sopra: Singole, Canali e Strutture. Ecco un breve video che mostra i tipi di sezioni in modo più approfondito: 

Ecco le sezioni associate al sito dimostrativo di Happy Lager: nota come ciascuna corrisponde alla barra di navigazione principale.

Il Homepage e Di la pagina sono single. Il notizia e Lavoro la pagina sono Canali. Il Servizi la pagina è una struttura.

Naturalmente, Craft offre anche categorie e tag. Le categorie ti aiutano a organizzare il contenuto del tuo sito in anticipo, mentre i tag ti consentono di creare una folksonomia ad hoc basata sul contenuto di ciascuno dei tuoi articoli.

Ecco un breve video che descrive categorie e tag:


Un'altra caratteristica interessante di Craft è la possibilità di indirizzare le richieste URL tramite percorsi amichevoli direttamente a sezioni specifiche:

Uno sguardo più da vicino a Happy Lager Pages

Ecco la pagina di What's On Tap da http://happylager.dev/index.php/work:

Qui puoi vedere come gli elementi sopra sono modificati come voci separate nel canale di lavoro, organizzati per data. 

Ecco una pagina dei servizi: come è realizzata su http://happylager.dev/index.php/services. È una struttura i cui elementi hanno un ordine predefinito.

Ciascuno dei box immagine è guidato da una voce sotto i servizi. Puoi cambiare il loro ordine di apparizione tramite drag and drop:

Ecco un esempio di modello Twig per questa pagina:

% estende "_layouts / site"% % block main%  

title

% per l'inserimento in craft.entries.section ('Servizi'). find ()%

entry.title

% endfor% % endblock%

Ed ecco il modello per ogni voce. Questo ti dà un'idea di come creare i modelli Twig per il tuo sito Craft e quali sono le implicazioni:

# # Modello di inserimento dei servizi # ------------------- # # Questo modello viene caricato ogni volta che l'URL di una voce di lavoro è # richiesto. Questo perché l'impostazione Template della sezione Lavoro è # impostata su "servizi / _entry", il percorso di questo modello. # % estende "_layouts / site"% % block main% % set currentUrl = craft.request.getUrl ()% % set lastSegment = craft.request.getLastSegment ()% % if lastSegment ! = 'servizi'%  % endif% % if lastSegment == 'services'%  

entry.title

% if entry.indexHeading% entry.indexHeading % endif%
% per l'inserimento in craft.entries.section ('Servizi'). type ('servicesDetail'). order ('postDate desc'). find ()%
% set image = entry.featuredImage.first ()% % if image% image.title % finisci se %

entry.title

% se entry.shortDescription% entry.shortDescription % endif%
% endfor%
% else% % include "include / articlebody"% % endif%
% if lastSegment! = 'services'%
% per blocco in entry.servicesBody%

block.heading

block.text
% set photo = block.image.first ()% % if photo% photo.title % finisci se %
% endfor%
% set entries = craft.entries.section ('Lavoro'). limit (1) .offset (2)% % per la voce nelle voci% % set asset = entry.featuredImage.last ()% % se asset%
% finisci se %
% set asset = entry.featuredImage.first ()% % if asset% asset.title % finisci se %

entry.title

entry.heading

% se entry.subheading%

entry.subheading

% finisci se %

Visualizza altro

% endfor%
% endif% % endblock% % block foot% parent () % endblock%

Modifica di voci

Modificare le voci in Craft è semplice, proprio come WordPress ma con funzionalità di layout avanzate che normalmente richiederebbero i plug-in.

Ogni sezione può avere più tipi di voci definite dall'utente. Ad esempio, la sezione Notizie presenta due diversi tipi di voci: articoli e link. I tipi di inserimento ti consentono di memorizzare diversi tipi di contenuti nella stessa sezione.

Ecco un breve video sui tipi di voce:

Ora che hai un'idea di come funziona la costruzione del sito in Craft, installiamo una nuova versione da zero.

Installazione di Craft From Scratch

Per installare Craft, visitare il sito Web e scaricare il codice base. Sto usando Mac OS X con MAMP per il mio sviluppo e test locale.

Craft fornisce istruzioni di installazione dettagliate e collegamenti alle guide per Mac, Laravel, Heroku e persino un'installazione automatica con Composer.

Rinominare il file htaccess:

cd ~ / Sites / craftcms / public mv htaccess .htaccess

Crea un link simbolico alla tua directory pubblica Craft per MAMP:

ln -s ~ / Sites / craftcms / public / Applicazioni / MAMP / htdocs / craft

Se esegui l'installazione di Craft localmente dai nomi host "craft.dev" o "ontherocks.dev", avrai la possibilità di passare da Craft Personal, Craft Client e Craft Pro gratuitamente, per sempre.

Ho creato il database tramite PHPMyAdmin.

Modifica il file di configurazione del database Craft per le tue credenziali MySQL:

nano ./craft/config/db.php

Inserisci le tue credenziali nei campi sottostanti:

/ ** * Configurazione database * * Tutte le impostazioni di configurazione del database del sistema vanno qui. * È possibile visualizzare un elenco delle impostazioni predefinite in craft / app / etc / config / defaults / db.php * / return array (// Il nome del server del database o l'indirizzo IP. Di solito questo è 'localhost' o '127.0.0.1 '.' server '=>' localhost ', // Il nome utente del database per connettersi con' utente '=>' root ', // La password del database per connettersi con' password '=>' your-password ', / / Il nome del database da selezionare. 'Database' => 'craft', // Il prefisso da utilizzare durante la denominazione delle tabelle. Può contenere non più di 5 caratteri. 'TablePrefix' => 'craft',);

Imposta le autorizzazioni di scrittura per queste directory dell'app Craft:

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

Visita la home page Craft locale e dovresti vedere di nuovo le scimmie!

Registra il tuo account di amministrazione iniziale:

Imposta le proprietà del tuo sito:

E questo è tutto

Ecco di nuovo la tua dashboard:

Craft è così focalizzato sull'utente finale che include un modulo di contatto per il supporto nella home page della dashboard.

Puoi trovare le impostazioni del sito dalla barra di navigazione in alto a destra. Mi ricorda in qualche modo iOS:

Ecco come appare il tuo sito Craft predefinito quando inizi:

Sì, Craft non ha la community di temi di WordPress. Per la maggior parte, devi codificare il tuo tema. Per i principianti, WordPress ha ancora un vantaggio. 

D'altra parte, potresti già notare quanto velocemente Craft funziona rispetto a WordPress.

Dove andare da qui?

Certo, puoi iniziare a creare i contenuti di esempio del tuo sito, ma dovrai conoscere i temi e i plugin di Craft. Ecco alcune risorse che ti aiuteranno:

  • Panoramica dei modelli dell'artigianato
  • Introduzione di Craft ai plugin
  • Elenco dei plug-in di Straight Up Craft (sito di terze parti)
  • Elenco dei consulenti di Straight Up Craft
  • Segui @CraftCMS su Twitter

Ti incoraggio ad installare Craft ed esplorare ulteriormente le sue funzionalità. Sono entusiasta della potenza, del controllo e della scalabilità offerta da Craft in alternativa a WordPress. Sono anche un appassionato di Yii ed è bello vedere uno strumento CMS costruito sul mio framework preferito.

Se desideri vedere una serie successiva sulla pubblicazione con Craft, pubblica una nota nei commenti. Apprezzo anche le tue domande e i tuoi commenti e generalmente rispondo. Puoi raggiungermi su Twitter @reifman o scrivermi direttamente via email.

Voglio anche dare un grido a Brandon Kelly, proprietario di Pixel & Tonic, i creatori di Craft. Brandon è stato di grande aiuto nel rispondere alle mie domande e mi ha dato un'anteprima del loro nuovo sito dimostrativo a cui dovresti essere in grado di accedere ora.

Link correlati

  • Il sito Web Craft CMS
  • Esercitazioni video Craft CMS
  • Introduzione al framework Yii (Tuts +)
  • Dieci motivi per cui amiamo il mestiere
  • Pixel & Tonic, Creators of Craft