Wat je gaat creëren

Dit is een vervolgtraining voor Introduction to Craft CMS. Als je onbekend bent met Craft, raad ik je aan eerst deel een te lezen. Keer dan hier terug en volg onze installatie- en starthandleiding.

Wat is Craft CMS?

Pixel & Tonic's Craft CMS is een WordPress-alternatief voor ontwikkelingsgerichte uitgevers die diepere controle en krachtigere prestaties willen met hun hulpprogramma's voor inhoudbeheer. Het is ook een potentiële optie voor consultants en ontwikkelaars om hun klantaanbod uit te breiden.

Craft is geen site builder - je moet je HTML, CSS en JavaScript met de hand uitbouwen met Twig-sjablonen. Dit zal niet intimiderend zijn voor degenen die gewend zijn aan het bouwen van WordPress-thema's. Helaas is er voor anderen momenteel geen officiële thema- of plugin-marktplaats (hoewel ik niet verrast zou zijn als deze in de toekomst verschijnt). Maar Craft is gebouwd om uitzonderlijk schaalbaar te zijn en biedt ingebouwde functies voor complexe contentbeheerrelaties.

Het is een geschikte keuze voor kleine websites, maar zal schitteren met grotere inhoudssites met veelgelaagde, onderling gerelateerde inhoud.

Craft is geschreven in PHP op het krachtige Yii 1.x-platform. Als je nog nooit van Yii hebt gehoord, kun je mijn Introduction to the Yii Framework op Tuts + lezen. U hoeft geen PHP of Yii te kennen om Craft te gebruiken. Het lijkt op Django-aangedreven CMS-tools die zijn geschreven in Python.

Hoewel je misschien nog nooit van Craft hebt gehoord, groeit de community van ontwikkelaars snel. Afgelopen juni werd het voorstel voor een Craft CMS StackExchange-site in slechts vijf dagen goedgekeurd.

U kunt hier een showcase bekijken van sites waarop Craft wordt uitgevoerd.

In deze tutorial zal ik je begeleiden bij het installeren van Craft, de demosite en vertrouwd raken met Craft voor het bouwen van je eigen site ermee.

Installing Craft's On The Rocks Demo Site

Laten we eerst de demonstratie-site van Craft's On The Rocks installeren met voorbeeldthema en inhoud. Deze site ontgrendelt ook alle premiumfuncties voor testen.

Ik gebruik Mac OS X met MAMP. Mijn lokale sites worden in de directory ~ / Sites uitgevoerd. Laten we de Craft-demosite van Github klonen:

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

Laten we vervolgens de bestandsrechten instellen voor de interne mappen van Craft:

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

Laten we vervolgens de nieuwste versie van Craft bijwerken. In februari 2015 heb ik versie 2.3.2627 gebruikt. U kunt echter het laatste nieuws vinden op de pagina "Updates" op de Craft-website..

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 / ambacht / app-ambacht / app rm -R BaseCraft && rm /tmp/Craft.zip

Vervolgens heb ik PHPMyAdmin gebruikt om de database te maken:

Klik op de ontherocks database in PHPMyAdmin. Dan klikken Importeren en kies het bestand in ~ / Sites / ontherocks / SQL / ontherocks.sql:

Bewerk vervolgens het databaseconfiguratiebestand met de referenties voor uw lokale MySQL-database:

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

/ ** * Databaseconfiguratie * * Alle databaseconfiguratie-instellingen van uw systeem komen hier binnen. * Je ziet een lijst van de standaardinstellingen in craft / app / config / default / db.php * / return array ('server' => 'localhost', 'user' => 'rocks_user', 'password' => 'yourpassword', 'database' => 'ontherocks', 'tablePrefix' => 'craft',); 

Maak een nieuwe virtuele host met de hostnaam "ontherocks.dev" die naar het publiek / de map wijst.

Bewerk je bestand / etc / hosts om ontherocks.dev naar 127.0.0.1 op te lossen, indien nodig:

## # Hostdatabase # # localhost wordt gebruikt om de loopback-interface # te configureren wanneer het systeem opstart. Wijzig dit item niet. ## 127.0.0.1 localhost 127.0.0.1 ontherocks.dev

Het Craft-dashboard bevindt zich op http://ontherocks.dev/admin. Als deze is geladen, zie je iets als dit: apen ... en oogbollen!

Vervolgens wordt u gevraagd om de database bij te werken:

U kunt inloggen met de volgende inloggegevens: Gebruikersnaam: beheerder, Wachtwoord: wachtwoord.

Het ambachtsdashboard

Hier is het dashboard - het lijkt een beetje op WordPress, he?

Dit is de On The Rocks-startpagina:

Verkennen van de Happy Lager-demonstratiesite

De aardige mensen bij Pixel & Tonic gaven me een pre-release van hun nieuwe, gratis demonstratiesite, die hopelijk beschikbaar zal zijn tegen de tijd dat je dit leest - kloont het hier. De nieuwe site heet Happy Lager:

De installatiestappen zijn precies dezelfde als hierboven beschreven voor On the Rocks. De Git-repository zou hier moeten worden gevestigd:

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

Happy Lager maakt gebruik van de diepere lay-outmogelijkheden van Craft. Hier zijn een paar screenshots van de About-pagina:

Onder de vouw:

Dit is de pagina Services:

Craft's Entries-pagina

Hier is de pagina Entries in het dashboard met alle content van Happy Lager:

Bekijk de invoertypen in het linkernavigatievenster: Singles, Channels and Structures. Craft biedt meer geavanceerde, uitbreidbare gegevenstypen dan WordPress.

singles zijn eenmalige pagina's met een uniek ontwerp, zoals de startpagina van uw site. kanalen zijn voor items die op datum zijn georganiseerd, zoals een blog of nieuwssecties. structuren zijn voor inhoud die wordt geleverd in een vooraf gedefinieerde volgorde.

The Craft Editor

Hier is de bewerkpagina. Let op de breedte van mogelijke velden die opnieuw aanpasbaar zijn, b.v. Titel, Hoofdafbeelding, Korte beschrijving, Kop, Subkopje, Artikeltype.

Let op onder de vouw hoe het pull-quote-type verschillende lay-outs in de verhaalstroom biedt, zoals de afbeelding die volgt (maar ik kon het niet allemaal in de schermafbeelding opnemen):

Deze mogelijkheid is wat Craft noemt Matrix, en het zorgt voor een krachtigere verhaalsamenstelling en lay-out. Elk blok kan aangepaste velden en aangepaste posities hebben en kan in de stroom worden gesleept en op zijn plaats worden neergezet. Hier is een korte video met de Matrix:

Hier is de Live voorvertoning-gewoon mooi. Het doet me denken aan Ghost's Markdown-voorbeeld waarover ik schreef in Keeping Up with Ghost 0.5 (Tuts +). Lezers herinneren zich misschien dat ik Markdown haat, dus ik waardeer het live-voorbeeld van Craft erg:

Hier is wat meer over Live voorvertoning:

Craft biedt eenvoudige toegang tot eerdere revisies:

The Craft Media Library

Beeldelementen zijn per groep geordend en beschikbaar op de Middelen pagina:

Als je ooit hebt gewacht tot WordPress je mediapagina laadt, zul je begrijpen hoe snel Craft is.

De startpagina van Happy Lager maken

Hier volgt een nadere blik op de inhoud achter delen van de startpagina van Happy Lager, en dit is hoe deze wordt weergegeven wanneer u de inhoud bewerkt:

Craft gebruikt Twig-sjablonen om de gestructureerde inhoudselementen om te zetten in webpagina's:

# # Over template # ------------------- # # Single over sjabloon # # # % breidt "_layouts / site" uit% % block main%  
 
 
title
 
 
  
 
 
 % if entry.infoHeroTopText% 
entry.infoHeroTopText
 % endif% % if entry.infoHeroBottomText% 
entry.infoHeroBottomText
 % stop als % 
 
 
 
 
 
 % if entry.firstSectionHeader% 
entry.firstSectionHeader
 % endif% % if entry.firstSectionSubheader% 
entry.firstSectionSubheader
 % stop als % 
 
 

Sectiesoorten

Craft sites zijn gebouwd rond de secties die we hierboven hebben geschetst: Singles, Channels and Structures. Hier is een korte video die sectietypen in meer diepte toont: 

Dit zijn de secties die zijn gekoppeld aan de Happy Lager-demonstratiesite - let op hoe elk overeenkomt met de primaire navigatiebalk.

De Startpagina en Wat betreft pagina zijn singles. De Nieuws en Werk pagina zijn kanalen. De Diensten pagina is een structuur.

Natuurlijk biedt Craft ook categorieën en tags aan. Categorieën helpen u de inhoud van uw site van tevoren te organiseren, terwijl u met tags een ad-hocfolksonomie kunt maken op basis van de inhoud in elk van uw artikelen.

Hier is een korte video met categorieën en tags:

Een andere leuke functie die Craft biedt, is de mogelijkheid om URL-aanvragen via vriendelijke paden rechtstreeks naar specifieke secties te routeren:

Een nadere blik op Happy Lager-pagina's

Dit is de What's On Tap-pagina van http://happylager.dev/index.php/work:

Hier kunt u zien hoe de bovenstaande elementen worden bewerkt als afzonderlijke items in het werkkanaal, geordend op datum. 

Hier is een kijkje op de Services-How It's Made-pagina op http://happylager.dev/index.php/services. Het is een structuur waarvan de elementen een vooraf gedefinieerde volgorde hebben.

Elk van de afbeeldingsvakken wordt aangestuurd door een item onder services. U kunt de volgorde van weergave wijzigen via slepen en neerzetten:

Hier is een voorbeeldtussjabloon voor deze pagina:

% breidt "_layouts / site" uit% % block main%  
 
 
title
 
 
  % voor invoer in craft.entries.section ('Services'). find ()% 
 
 
  entry.title  
 
 
 % endfor% % endblock% 

En hier is de sjabloon voor elk item. Dit geeft u een idee hoe u Twig-sjablonen voor uw Craft-website kunt bouwen en wat erbij komt kijken:

# # Services-invoersjabloon # ------------------- # # Deze sjabloon wordt geladen wanneer de URL van een werkitem # is aangevraagd. Dat komt omdat de Template-instelling van de Work-sectie # is ingesteld op "services / _entry", het pad naar deze sjabloon. # % verlengt "_layouts / site"% % block main% % set currentUrl = craft.request.getUrl ()% % set lastSegment = craft.request.getLastSegment ()% % if lastSegment ! = 'services'%  % endif% % if lastSegment == 'services'%  
 
 
entry.title
 
 
  
 
 
 % if entry.indexHeading% entry.indexHeading % endif% 
 
 
 
 
 % voor invoer in craft.entries.section ('Services'). type ('servicesDetail'). order ('postDatum desc'). find ()% 
  % set image = entry.featuredImage.first ()% % if image%  % stop als % 
entry.title
 % if entry.shortDescription% entry.shortDescription % endif%  
 % endfor% 
 % else% % include "includes / articlebody"% % endif% 
 % if lastSegment! = 'services'% 
 % voor blokkeren in entry.servicesBody% 
 
 
 
block.heading
 block.text 
 
 % set photo = block.image.first ()% % if photo%  % stop als % 
 
 
 % endfor% 
 
 % set entries = craft.entries.section ('Work'). limit (1) .offset (2)% % voor invoer in entries% % set asset = entry.featuredImage.last ()%  % als item% 
 % stop als % 
 
  % set asset = entry.featuredImage.first ()% % if asset%  % stop als %  
 
 
 
entry.title
 
entry.heading
 % als entry.onderdeel% 
entry.subheading
 % stop als % 
Bekijk meer
 
 
 
 
 % endfor% 
 % endif% % endblock% % block foot% parent ()  % endblock% 

Invoer bewerken

Het bewerken van items in Craft is eenvoudig, net als WordPress, maar met verbeterde lay-outmogelijkheden die je normaliter nodig hebt om plug-ins te voltooien.

Elke sectie kan meerdere door de gebruiker gedefinieerde boekingstypes hebben. De sectie Nieuws heeft hier bijvoorbeeld twee verschillende soorten items: artikelen en links. Met vermeldingstypen kunt u verschillende soorten inhoud in dezelfde sectie opslaan.

Hier is een korte video over Entry-types:

Nu je een idee hebt van hoe site-constructie werkt in Craft, kunnen we een nieuwe versie helemaal opnieuw installeren.

Craft from Scratch installeren

Om Craft te installeren, bezoek de website en download de codebase. Ik gebruik Mac OS X met MAMP voor mijn lokale ontwikkeling en testen.

Craft biedt gedetailleerde installatie-instructies en links naar handleidingen voor Mac, Laravel, Heroku en zelfs een geautomatiseerde installatie met Composer.

Hernoem het htaccess-bestand:

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

Maak een symbolische link naar je Craft openbare directory voor MAMP:

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

Als je je Craft-installatie lokaal uitvoert vanuit de hostnamen "craft.dev" of "ontherocks.dev", heb je de mogelijkheid om gratis te schakelen tussen Craft Personal, Craft Client en Craft Pro.

Ik heb de database gemaakt via PHPMyAdmin.

Bewerk het configuratiebestand van de Craft-database voor uw MySQL-inloggegevens:

nano ./craft/config/db.php

Voer uw inloggegevens in de onderstaande velden in:

/ ** * Databaseconfiguratie * * Alle databaseconfiguratie-instellingen van uw systeem komen hier binnen. * Je ziet een lijst van de standaardinstellingen in craft / app / etc / config / defaults / db.php * / return array (// De databaseservernaam of IP-adres. Meestal is dit 'localhost' of '127.0.0.1 '.' server '=>' localhost ', // De database-gebruikersnaam om mee te verbinden.' user '=>' root ', // Het database-wachtwoord om verbinding mee te maken.' password '=>' uw-wachtwoord ', / / De naam van de te selecteren database. 'Database' => 'craft', // Het voorvoegsel dat moet worden gebruikt bij het benoemen van tabellen. Dit mag niet meer dan 5 tekens bevatten. 'TablePrefix' => 'craft',);

Schrijfrechten instellen voor deze Craft-app-directory's:

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

Bezoek de lokale startpagina van Craft en je zou de apen opnieuw moeten zien!

Registreer uw eerste beheeraccount:

Stel uw site-eigenschappen in:

En dat is het:

Dit is je dashboard opnieuw:

Craft is zo gericht op de eindgebruiker dat ze een ondersteuningscontactformulier op de startpagina van hun dashboard opnemen.

U kunt de site-instellingen vinden in de navigatiebalk in de rechterbovenhoek. Het doet me denken aan iOS:

Dit is hoe uw standaard Craft-site eruitziet als u begint:

Ja, Craft heeft niet de WordPress-community met thema's. Voor het grootste deel moet je je eigen thema coderen. Voor de beginneling heeft WordPress nog steeds een voorsprong. 

Aan de andere kant merk je misschien al hoe snel Craft werkt in vergelijking met WordPress.

Waar te gaan vanaf hier?

Zeker, u kunt beginnen met het bouwen van de voorbeeldinhoud van uw site, maar u moet leren over thema's en plug-ins voor Craft. Hier zijn een paar bronnen die u zullen helpen:

• Crafts Template Overzicht
• Craft's inleiding tot plug-ins
• Straight Up Craft's (externe site) plug-in directory
• Straight Up Craft's Directory of Consultants
• Volg @CraftCMS op Twitter

Ik raad u aan Craft te installeren en de functies verder te verkennen. Ik ben enthousiast over de kracht, controle en schaalbaarheid die Craft biedt als een alternatief voor WordPress. Ik ben ook een Yii-liefhebber en het is geweldig om te zien dat een CMS-tool is gebouwd op mijn favoriete framework.

Als je graag een vervolgserie wilt zien over publiceren met Craft, plaats dan een opmerking in de comments. Ik stel ook uw vragen en opmerkingen op prijs en reageer in het algemeen. Je kunt me bereiken op Twitter @reifman of mij rechtstreeks een e-mail sturen.

Ik wil ook een woordje uitbrengen aan Brandon Kelly, eigenaar van Pixel & Tonic, de makers van Craft. Brandon was super behulpzaam bij het beantwoorden van mijn vragen en gaf me een voorbeeld van hun nieuwe demonstratiesite die je nu zou moeten kunnen openen.

Gerelateerde Links

• De Craft CMS-website
• Craft CMS Video-zelfstudies
• Introductie van het Yii Framework (Tuts +)
  
• Tien redenen waarom we van Craft houden
• Pixel & Tonic, Creators of Craft