Erste Schritte mit Craft CMS

Was Sie erstellen werden

Dies ist ein Folgetutorial zu Einführung in Craft CMS. Wenn Sie mit Craft nicht vertraut sind, empfehle ich Ihnen, zuerst Teil 1 zu lesen. Dann kehren Sie hierher zurück und befolgen Sie unsere Anweisungen zur Installation und Inbetriebnahme.

Was ist Craft CMS??

Das Craft CMS von Pixel & Tonic ist eine WordPress-Alternative für entwicklungsorientierte Publisher, die eine bessere Kontrolle und stärkere Leistung ihrer Content-Management-Tools wünschen. Es ist auch eine mögliche Option für Berater und Entwickler, um ihre Kundenangebote zu erweitern.

Craft ist kein Site Builder - Sie müssen HTML, CSS und JavaScript mit Twig-Vorlagen von Hand erstellen. Dies ist nicht einschüchternd für diejenigen, die zum Erstellen von WordPress-Themes verwendet werden. Für andere gibt es zur Zeit leider keinen offiziellen Themen- oder Plugin-Marktplatz (obwohl ich mich nicht wundern würde, wenn einer in der Zukunft erscheint). Craft ist jedoch außergewöhnlich skalierbar und bietet native Funktionen für komplexe Content-Management-Beziehungen.

Es ist eine geeignete Wahl für kleine Websites, wird jedoch mit größeren Content-Websites mit erheblichen mehrschichtigen Inhalten in Verbindung stehen.

Craft ist in PHP auf der leistungsfähigen Yii 1.x-Plattform geschrieben. Wenn Sie noch nichts von Yii gehört haben, können Sie meine Einführung in das Yii Framework unter Tuts + lesen. Sie müssen weder PHP noch Yii kennen, um Craft zu verwenden. Es ist vergleichbar mit von Django betriebenen CMS-Tools, die in Python geschrieben wurden.

Sie haben zwar noch nicht von Craft gehört, aber die Entwicklergemeinde wächst schnell. Im vergangenen Juni wurde der Vorschlag für eine Craft CMS StackExchange-Site innerhalb von nur fünf Tagen genehmigt.

Hier können Sie eine Übersicht über die Websites anzeigen, auf denen Craft ausgeführt wird.

In diesem Tutorial werde ich Sie durch den Prozess der Installation von Craft, seiner Demo-Site und dem Kennenlernen von Craft für das Bauen Ihrer eigenen Site damit führen.

Crafts On The Rocks Demo Site installieren

Lassen Sie uns zunächst die On The Rocks-Demonstrationssite von Craft mit einem Beispielthema und -inhalt installieren. Auf dieser Website werden auch alle Premium-Funktionen zum Testen freigeschaltet.

Ich verwende Mac OS X mit MAMP. Meine lokalen Sites werden im Verzeichnis ~ / Sites ausgeführt. Lassen Sie uns die Craft-Demo-Site von Github klonen:

Git Klon https://github.com/pixelandtonic/ontherocks.git

Dann legen wir die Dateiberechtigungen für die internen Verzeichnisse von Craft fest:

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

Als Nächstes aktualisieren wir den neuesten Build von Craft. Im Februar 2015 habe ich Version 2.3.2627 verwendet. Das Neueste finden Sie jedoch auf der Craft-Website unter "Updates"..

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

Dann habe ich PHPMyAdmin verwendet, um die Datenbank zu erstellen:

Klicke auf das Onherocks Datenbank in PHPMyAdmin. Dann klick Einführen und wählen Sie die Datei in ~ / Sites / ontherocks / SQL / ontherocks.sql:

Bearbeiten Sie anschließend die Datenbankkonfigurationsdatei mit den Anmeldeinformationen für Ihre lokale MySQL-Datenbank:

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

/ ** * Datenbankkonfiguration * * Hier werden alle Datenbankkonfigurationseinstellungen Ihres Systems angezeigt. * Eine Liste der Standardeinstellungen finden Sie in craft / app / config / defaults / db.php. * / Return array ('server' => 'localhost', 'user' => 'rocks_user', 'password' => 'yourpassword', 'database' => 'ontherocks', 'tablePrefix' => 'craft',);

Erstellen Sie einen neuen virtuellen Host mit dem Hostnamen "ontherocks.dev", der auf den Ordner public / verweist.

Bearbeiten Sie Ihre Datei / etc / hosts, um ontherocks.dev bei Bedarf in 127.0.0.1 aufzulösen:

## # Host Database # # localhost wird verwendet, um die Loopback-Schnittstelle # beim Booten des Systems zu konfigurieren. Ändern Sie diesen Eintrag nicht. ## 127.0.0.1 localhost 127.0.0.1 ontherocks.dev

Das Craft-Dashboard befindet sich unter http://ontherocks.dev/admin. Wenn Sie geladen sind, sehen Sie so etwas: Affen… und Augäpfel!

Anschließend werden Sie aufgefordert, die Datenbank zu aktualisieren:

Sie können sich mit den folgenden Anmeldeinformationen anmelden: Nutzername: Administrator, Passwort: Passwort.

Das Craft Dashboard

Hier ist das Dashboard-Aussehen ein bisschen wie WordPress, huh?

Hier ist die On the Rocks Homepage:

Erkundung der Happy Lager Demonstration Site

Die netten Leute von Pixel & Tonic gaben mir eine Vorabversion ihrer neuen, kostenlosen Demonstrationsseite, die hoffentlich verfügbar sein wird, wenn Sie diesen Klon hier lesen. Die neue Site heißt Happy Lager:

Die Installationsschritte sind genau die gleichen wie oben für On the Rocks beschrieben. Das Git-Repository sollte sich hier befinden:

Git Klon https://github.com/pixelandtonic/happylager.git

Happy Lager nutzt die tieferen Gestaltungsmöglichkeiten von Craft. Hier sind ein paar Screenshots von der About-Seite:

Unter der Falte:

Hier ist die Services Seite:

Seite mit den Crafts-Einträgen

Hier ist die Seite "Entries" mit allen Inhalten von Happy Lager im Dashboard:

Sehen Sie sich die Eintragstypen im linken Navigationsbereich an: Singles, Channels und Structures. Craft bietet komplexere, erweiterbare Datentypen als WordPress.

Einzel sind Off-Pages, die ein einzigartiges Design aufweisen, z. B. die Startseite Ihrer Website. Channels sind für Einträge, die nach Datum geordnet sind, wie z. B. ein Blog oder ein Newsbereich. Strukturen sind für Inhalte, die in einer vordefinierten Reihenfolge bereitgestellt werden.

Der Craft Editor

Hier ist die Bearbeitungsseite. Beachten Sie die Breite der möglichen Felder, die wiederum anpassbar sind, z. Titel, Featured Image, Kurzbeschreibung, Überschrift, Zwischenüberschrift, Artikeltext.

Beachten Sie unterhalb der Falte, wie der Zitattyp "Zitat" verschiedene Layouts im Story-Flow bietet, wie auch das folgende Bild (aber ich konnte nicht alles in den Screenshot aufnehmen):

Diese Fähigkeit nennt Craft seine Matrix, und es ermöglicht eine kraftvollere Komposition und Layout der Story. Jeder Block kann über benutzerdefinierte Felder und eine benutzerdefinierte Position verfügen und kann in den Fluss gezogen und abgelegt werden. Hier ist ein kurzes Video mit der Matrix:

Hier ist die Live Vorschau-einfach schön. Es erinnert mich an Ghosts Markdown-Vorschau, über die ich in Keeping Up with Ghost 0.5 (Tuts +) geschrieben habe. Leser erinnern sich vielleicht, dass ich Markdown hasse. Daher schätze ich die Craft-Live-Vorschau sehr:

Hier ist noch ein bisschen mehr Live Vorschau:


Craft bietet einfachen Zugriff auf frühere Versionen:

Die Craft Media Library

Bildbestände sind nach Gruppen organisiert und auf der Website verfügbar Vermögenswerte Seite:

Wenn Sie jemals darauf gewartet haben, dass WordPress Ihre Medienseite lädt, werden Sie wissen, wie schnell Craft ist.

Aufbau der Happy Lager Home Page

Hier ist ein genauerer Blick auf den Inhalt hinter Teilen der Happy Lager-Startseite. So sieht es aus, wenn Sie den Inhalt bearbeiten:

Craft verwendet Twig-Vorlagen zum Übertragen der strukturierten Inhaltselemente in Webseiten:

# # Info zu Vorlage # ------------------- # # Einzeln zu Vorlage # # # % erweitert "_layouts / site"% % block main%  

Titel

% if entry.infoHeroTopText%

entry.infoHeroTopText

% endif% % if entry.infoHeroBottomText%

entry.infoHeroBottomText

% endif%
% if entry.firstSectionHeader%

entry.firstSectionHeader

% endif% % if entry.firstSectionSubheader%

entry.firstSectionSubheader

% endif%

Abschnittstypen

Kunsthandwerksstätten sind um die Abschnitte herum aufgebaut, die wir oben umrissen haben: Singles, Channels und Strukturen. Hier ist ein kurzes Video, in dem die Abschnittsarten detaillierter dargestellt werden: 

Hier sind die Abschnitte, die mit der Happy Lager-Demonstrations-Site verbunden sind, wie jede der primären Navigationsleiste entspricht.

Das Startseite und Über Seite sind Singles. Das Nachrichten und Arbeit Seite sind Channels. Das Dienstleistungen Seite ist eine Struktur.

Natürlich bietet Craft auch Kategorien und Tags an. Mithilfe von Kategorien können Sie den Inhalt Ihrer Website vorab organisieren, während Sie mithilfe von Tags eine Ad-hoc-Folksonomie erstellen können, die auf dem Inhalt der einzelnen Artikel basiert.

Hier ist ein kurzes Video, das Kategorien und Tags beschreibt:


Ein weiteres cooles Feature, das Craft bietet, ist die Möglichkeit, URL-Anfragen über benutzerfreundliche Pfade direkt zu bestimmten Abschnitten weiterzuleiten:

Ein genauerer Blick auf Happy Lagerseiten

Hier ist die What's On Tap-Seite von http://happylager.dev/index.php/work:

Hier können Sie sehen, wie die obigen Elemente als separate Einträge im Arbeitskanal (nach Datum geordnet) bearbeitet werden. 

Hier finden Sie einen Überblick über die Services-How-It-Made-Seite unter http://happylager.dev/index.php/services. Es ist eine Struktur, deren Elemente eine vordefinierte Reihenfolge haben.

Jede der Bildboxen wird durch einen Eintrag unter Dienste gesteuert. Sie können die Reihenfolge der Darstellung per Drag & Drop ändern:

Hier ist ein Beispiel für eine Twig-Vorlage für diese Seite:

% erweitert "_layouts / site"% % block main%  

Titel

% für den Eintrag in craft.entries.section ('Services'). find ()%

entry.title

% endfor% % endblock%

Und hier ist die Vorlage für jeden Eintrag. So erhalten Sie eine Vorstellung davon, wie Sie Twig-Vorlagen für Ihre Craft-Site erstellen und was dabei zu tun ist:

# # Vorlage für Services-Einträge # ------------------- # # Diese Vorlage wird geladen, wenn die URL eines Work-Eintrags angefordert wird. Der Grund hierfür ist, dass für die Vorlageneinstellung des Arbeitsbereichs # "services / _entry" (Pfad zu dieser Vorlage) festgelegt ist. # % erweitert "_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%
% für den Eintrag in craft.entries.section ('Services'). type ('servicesDetail'). order ('postDate desc'). find ()%
% set image = entry.featuredImage.first ()% % if image% Bild.Titel % endif%

entry.title

% if entry.shortDescription% entry.shortDescription % endif%
% endfor%
% else% % include "include / articlebody"% % endif%
% if lastSegment! = 'Services'%
% für Block in entry.servicesBody%

block.heading

block.text
% set photo = block.image.first ()% % wenn Foto% photo.title % endif%
% endfor%
% set entries = craft.entries.section ('Work'). limit (1) .offset (2)% % für den Eintrag in Einträgen% % set asset = entry.featuredImage.last ()% % if asset%
% endif%
% set asset = entry.featuredImage.first ()% % if asset% asset.title % endif%

entry.title

entry.heading

% if entry.subheading%

entry.subheading

% endif%

Mehr sehen

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

Einträge bearbeiten

Das Bearbeiten von Einträgen in Craft ist sehr ähnlich wie WordPress, jedoch mit erweiterten Layoutfunktionen, für die normalerweise Plugins erforderlich sind.

Jeder Abschnitt kann mehrere benutzerdefinierte Eintragstypen haben. Zum Beispiel enthält der Abschnitt "News" hier zwei verschiedene Arten von Einträgen: Artikel und Links. Mit Eintragstypen können Sie verschiedene Inhaltstypen in demselben Abschnitt speichern.

Hier ist ein kurzes Video zu den Eintragstypen:

Nachdem Sie jetzt einen Eindruck davon bekommen, wie die Erstellung von Websites in Craft funktioniert, installieren wir eine neue Version von Grund auf.

Craft from Scratch installieren

Um Craft zu installieren, besuchen Sie die Website und laden Sie die Codebasis herunter. Ich verwende Mac OS X mit MAMP für meine lokale Entwicklung und Tests.

Craft bietet detaillierte Installationsanweisungen und Links zu Anleitungen für Mac, Laravel, Heroku und sogar eine automatisierte Installation mit Composer.

Benennen Sie die Htaccess-Datei um:

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

Erstellen Sie einen symbolischen Link zu Ihrem öffentlichen Craft-Verzeichnis für MAMP:

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

Wenn Sie Ihre Craft-Installation lokal mit den Hostnamen "craft.dev" oder "ontherocks.dev" ausführen, haben Sie die Möglichkeit, für immer zwischen Craft Personal, Craft Client und Craft Pro zu wechseln.

Ich habe die Datenbank über PHPMyAdmin erstellt.

Bearbeiten Sie die Craft-Datenbankkonfigurationsdatei für Ihre MySQL-Anmeldeinformationen:

nano ./craft/config/db.php

Geben Sie Ihre Anmeldeinformationen in die folgenden Felder ein:

/ ** * Datenbankkonfiguration * * Hier werden alle Datenbankkonfigurationseinstellungen Ihres Systems angezeigt. * Eine Liste der Standardeinstellungen finden Sie in craft / app / etc / config / defaults / db.php. * / Return array (// Name oder IP-Adresse des Datenbankservers. Normalerweise ist dies 'localhost' oder '127.0.0.1.) '.' server '=>' localhost ', // Der Benutzername der Datenbank, mit dem eine Verbindung hergestellt werden soll.' user '=>' root ', // Das Datenbankkennwort, mit dem eine Verbindung hergestellt werden soll.' password '=>' Ihr Kennwort ', / / Der Name der zu wählenden Datenbank. 'Database' => craft ', // Das bei der Benennung von Tabellen zu verwendende Präfix. Dies darf nicht mehr als 5 Zeichen umfassen.' TablePrefix '=>' craft ',);

Richten Sie Schreibberechtigungen für diese Craft-App-Verzeichnisse ein:

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

Besuchen Sie die lokale Craft-Homepage und Sie sollten die Affen wieder sehen!

Registrieren Sie Ihr erstes Administratorkonto:

Richten Sie Ihre Site-Eigenschaften ein:

Und das ist es:

Hier ist wieder dein Dashboard:

Craft ist so auf den Endbenutzer ausgerichtet, dass es ein Support-Kontaktformular auf der Dashboard-Startseite enthält.

Sie finden die Site-Einstellungen in der Navigationsleiste oben rechts. Es erinnert mich irgendwie an iOS:

So sieht Ihre Standard-Craft-Site aus, wenn Sie beginnen:

Ja, Craft verfügt nicht über die WordPress-Community von Designs. In den meisten Fällen müssen Sie ein eigenes Thema erstellen. Für den Neuling hat WordPress noch einen Vorteil. 

Auf der anderen Seite stellen Sie möglicherweise bereits fest, wie schnell Craft im Vergleich zu WordPress ausgeführt wird.

Von hier aus weiter?

Natürlich können Sie mit dem Erstellen des Beispielinhalts Ihrer Site beginnen, aber Sie müssen sich mit Craft-Themen und Plugins vertraut machen. Hier sind einige Ressourcen, die Ihnen helfen werden:

  • Crafts Template Übersicht
  • Crafts Einführung in Plugins
  • Plugin-Verzeichnis von Straight Up Craft (Drittanbieter)
  • Straight Up Crafts Verzeichnis der Berater
  • Folgen Sie @CraftCMS auf Twitter

Ich ermutige Sie, Craft zu installieren und seine Funktionen weiter zu erkunden. Ich bin begeistert von der Leistung, Kontrolle und Skalierbarkeit, die Craft als Alternative zu WordPress bietet. Ich bin auch ein Yii-Fan und es ist großartig, ein CMS-Tool zu sehen, das auf meinem bevorzugten Framework basiert.

Wenn Sie eine Folge-Serie zum Veröffentlichen mit Craft sehen möchten, schreiben Sie bitte eine Anmerkung in die Kommentare. Ich schätze auch Ihre Fragen und Kommentare und antworte generell. Sie können mich auf Twitter @reifman erreichen oder direkt per E-Mail kontaktieren.

Ich möchte auch Brandon Kelly, Inhaber von Pixel & Tonic, den Machern von Craft, einen Schrei erteilen. Brandon war sehr hilfreich bei der Beantwortung meiner Fragen und gab mir eine Vorschau auf die neue Demonstrationsseite, auf die Sie jetzt zugreifen können sollten.

ähnliche Links

  • Die Craft CMS Website
  • Craft CMS Video Tutorials
  • Einführung in das Yii-Framework (Tuts +)
  • Zehn Gründe, warum wir Handwerk lieben
  • Pixel & Tonic, Schöpfer des Handwerks