Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CMS
Code

Erste Schritte mit Craft CMS

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Introduction to Craft CMS.
Introduction to Craft CMS

German (Deutsch) translation by Wei Zhang (you can also view the original English article)

Final product image
What You'll Be Creating

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 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:

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

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".

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

Create the ontherocks MySQL database

Klicken Sie in PHPMyAdmin auf die ontherocks-Datenbank. Klicken Sie dann auf Import und wählen Sie die Datei in ~/Sites/ontherocks/SQL/ontherocks.sql:

Import the ontherocks SQL database using PHPMyAdmin

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

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:

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:

Update the database for Craft CMS

Sie können sich mit den folgenden Anmeldeinformationen anmelden: Benutzername: admin, Kennwort: Kennwort.

Craft Administrative Login

Das Craft Dashboard

Hier ist das Dashboard - sieht ein bisschen wie WordPress aus, oder?

Craft Administrative Dashboard Look Familiar

Hier ist die On the Rocks Homepage:

Craft Demo Site On the Rocks

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 dies lesen - hier klonen Die neue Site heißt Happy Lager:

Craft Demo Site Happy Lager

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

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

Craft Demo Site About Page Top

Unter der Falte:

Craft Demo Site About Page Bottom

Hier ist die Services Seite:

Craft Demo Site Services Example

Seite mit den Crafts-Einträgen

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

Craft Dashboard Entries - Like WordPress Posts

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

Singles sind einmalige Seiten mit einem einzigartigen Design, z. B. der Startseite Ihrer Website. Channels beziehen sich auf Einträge, die nach Datum organisiert sind, z. B. ein Blog oder ein News-Bereich. 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.

Craft Dashboard Edit Entry

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):

Craft Edit Entry with Components and Positioning

Diese Fähigkeit wird von Craft als Matrix bezeichnet und ermöglicht eine stärkere Komposition und Gestaltung 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, das die Matrix zeigt:

Hier ist die Live-Vorschau - einfach wunderschö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:

Craft Editing Live Preview Mode

Hier ist ein bisschen mehr in der Live-Vorschau:


Craft bietet einfachen Zugriff auf frühere Versionen:

Craft Editing - Ready Access to Past Revisions

Die Craft Media Library

Image-Assets sind nach Gruppen organisiert und auf der Seite Assets verfügbar:

Craft Asset Management

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

Sehen Sie sich den Inhalt hinter Teilen der Happy Lager-Startseite genauer an, insbesondere wenn Sie den Inhalt bearbeiten:

Home page content within the Craft editing system

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

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 der Happy Lager-Demonstrationswebsite zugeordnet sind. Beachten Sie, wie sie der Hauptnavigationsleiste entsprechen.

Craft Dashboard Sections

Die Homepage und die About-Seite sind Singles. Die News- und Work-Seite sind Kanäle. Die Seite Services 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:

Craft Dashboard Creating routes for friendly URL mapping

Ein genauerer Blick auf Happy Lagerseiten

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

Craft Demonstration Site Whats On Tap
Hier können Sie sehen, wie die obigen Elemente als separate Einträge im Arbeitskanal nach Datum geordnet bearbeitet werden.

Sehen Sie sich die Seite Services - How It Made unter http://happylager.dev/index.php/services an. Es ist eine Struktur, deren Elemente eine vordefinierte Reihenfolge haben.

Craft Demonstration Site How Its Made

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:

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:

Einträge bearbeiten

Das Bearbeiten von Einträgen in Craft ist sehr ähnlich wie WordPress, jedoch mit erweiterten Layout-Funktionen, die normalerweise Plugins erfordern.

Jeder Abschnitt kann mehrere benutzerdefinierte Eintragstypen haben. Der Abschnitt "News" enthält hier beispielsweise 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 völlig neue Version.

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:

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

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

Ich habe die Datenbank über PHPMyAdmin erstellt.

Create Database for CraftCMS in PHPMyAdmin

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

Geben Sie Ihre Anmeldeinformationen in die folgenden Felder ein:

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

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

Craft CMS Installation Home Page

Registrieren Sie Ihr erstes Administratorkonto:

Craft Register Your Administrator Account

Richten Sie Ihre Site-Eigenschaften ein:

Craft Configure Your General Site Settings

Und das ist es:

Craft Installation Complete

Hier ist wieder dein Dashboard:

Craft Your New Site 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:

Craft Settings Panel

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

Craft Default Site Without Real Template

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.

Wohin von hier aus?

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:

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 aussprechen. 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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.