Webdesign

Erste Schritte in CraftCMS

Nachdem die Installation von Craft vorgenommen wurde und sowohl das Front- wie auch das Backend erreichbar ist, benötigt es ein paar erste Schritte, damit mindestens mal irgend ein Inhalt im Frontend angezeigt wird. Für den einfacheren Einstieg sind diese ersten Punkte hier beschrieben.

Installation von Redactor

Um einen Wysiwyg-Editor für den Inhalt zu bekommen, wird das Plugin "Redactor" installiert. Dieses bietet einen einfachen und schlichten Editor. Das Plugin kann über den Plugin-Store kostenlos heruntergeladen und direkt installiert werden. Ein weiteres Setup ist hierbei vorerst nicht nötig.

Erste Felder erstellen

Um irgendwas im Frontend angezeigt zu bekommen, müssen zuerst ein paar Felder im Backen erstellt werden, die dann auch gefüllt werden können. Es bietet sich an, hier erstmal mit einem PageTitle und einem PageContent zu beginnen.

Page Title

Das Feld "Page Title" wird als reines Textfeld erfasst.

Page Content

Das Feld "Page Content" wird als Redactor Feld erfasst.

Erstellung einer Sektion

Für die Hauptseiten wird als erstes eine Sektion erstellt. Der Name kann hierbei z.B. Main Pages heissen. Dies generiert den Slug mainPages. Als Sektions-Typ wird "Struktur" gewählt, damit die Seiten in mehreren Ebenen erstellt werden können.

Website-Einstellungen

Die Einstellungen der Sektion sind sehr wichtig. Das Eintrags-URI-Format lautet:

{parent.uri}/{slug}

Bei der Vorlage wird der folgende Pfad eingetragen:

pages/_entry

Eintragstyp bearbeiten

Zurück auf der Sektionen-Übersicht, wird der Eintragstyp "MainPages" bearbeitet.

• Titelfeld anzeigen -> deaktivieren
• Titelformat -> {{pageTitle}}
• Feld-Layout -> Content-Tab hinzufügen (inkl. PageContent und PageTitle)

Damit sind die Vorbereitungen abgeschlossen und es kann der erste Eintrag (die erste Seite) erstellt werden.

Erstellung der Startseite

Um die Startseite der Website zu erstellen, wird ein neuer Eintrag in der Sektion "Main Pages" erstellt. wichtig ist hierbei der Slug. Hier muss zwingend folgender Slug eingetragen werden, damit die Seite als Startpunkt fungiert:

__home__

Wird das Frontend nun aufgerufen, wird versucht, die gerade erstellte Seite mit dem Slug __home__ aufzurufen. Das klappt allerdings nicht, da das entsprechende Template noch nicht vorhanden ist. Um dieses Problem zu lösen, brauchen wir endlich einen Code-Editor. ;)

Basic Template-Setup

Als Basis wird im Ordner /templates folgende Dateistruktur angelegt:

_layouts
  base.twig
  site.twig
pages
  _entry.twig

Die Dateien base.twig und site.twig kümmern sich um das Basis-Layout aller Seiten. Die Datei _entry.twig beinhaltet das eigentliche Template, bzw. den eigentlichen Hauptinhalt der angezeigten Frontend-Seite.

Das Frontend ist da!

Nachdem diese Dateien erstellt wurden, sollte das Frontend angezeigt werden. Das ist ein guter Startpunkt für das nächste Projekt.

---

by tetrikus