Erste Schritte mit Craft CMS

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:

1

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

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

1

cd ontherocks

2

chmod 777 craft/storage/

3

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

1

curl -L http://download.buildwithcraft.com/craft/2.3/2.3.2627/Craft-2.3.2627.zip -o /tmp/Craft.zip

2

unzip /tmp/Craft.zip -d BaseCraft

3

cp -R BaseCraft/craft/app craft/app

4

rm -R BaseCraft && rm /tmp/Craft.zip

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

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:

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

1

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

1

/**

2

 * Database Configuration

3

 *

4

 * All of your system's database configuration settings go in here.

5

 * You can see a list of the default settings in craft/app/config/defaults/db.php

6

 */

7

8

return array(

9

        'server'      => 'localhost',

10

        'user'        => 'rocks_user',

11

        'password'    => 'yourpassword',

12

        'database'    => 'ontherocks',

13

        'tablePrefix' => 'craft',

14

);

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:

1

##

2

# Host Database

3

#

4

# localhost is used to configure the loopback interface

5

# when the system is booting.  Do not change this entry.

6

##

7

127.0.0.1       localhost 

8

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: Benutzername: admin, Kennwort: Kennwort.

Das Craft Dashboard

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

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 dies lesen - hier klonen 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:

1

git clone 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.

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.

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

Hier ist ein bisschen mehr in der Live-Vorschau:

Craft bietet einfachen Zugriff auf frühere Versionen:

Die Craft Media Library

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

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:

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

1

{#

2

    # About template

3

  # -------------------

4

	#

5

	# Single about template

6

	#

7

	#

8

	#}

9

{% extends "_layouts/site" %}

10

11

{% block main %}

12

13

	<header class="alt">

14

		<div class="flex">

15

			<div class="g1-flex4 g2-flex6 g3-flex12">

16

				<h1 class="alpha center reverse">{{ title }}</h1>

17

			</div>

18

		</div>

19

	</header>

20

	<section class="info-hero alt">

21

		<div class="flex">

22

			<div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">

23

				{% if entry.infoHeroTopText %}

24

				<h1 class="delta reverse center subfont">{{ entry.infoHeroTopText }}</h1>

25

				{% endif %}

26

27

				{% if entry.infoHeroBottomText %}

28

				<p class="epsilon center reverse">{{ entry.infoHeroBottomText }}</p>

29

				{% endif %}

30

31

			</div>

32

		</div>

33

	</section>

34

	<section class="alt">

35

		<div class="flex">

36

			<div class="g1-flex4 g2-flex6 g3-flex10 g3-offset1">

37

				{% if entry.firstSectionHeader %}

38

				<h1 class="beta center">{{ entry.firstSectionHeader }}</h1>

39

				{% endif %}

40

41

				{% if entry.firstSectionSubheader %}

42

				<p class="delta center subfont caps">{{ entry.firstSectionSubheader }}</p>

43

				{% endif %}

44

			</div>

45

		</div>

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.

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:

Ein genauerer Blick auf Happy Lagerseiten

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

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.

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:

1

{% extends "_layouts/site" %}

2

3

{% block main %}

4

5

    <header class="alt">

6

		<div class="flex">

7

			<div class="g1-flex4 g2-flex6 g3-flex12">

8

				<h1 class="alpha center reverse">{{ title }}</h1>

9

			</div>

10

		</div>

11

	</header>

12

13

	{% for entry in craft.entries.section('Services').find() %}

14

	<div class="flex">

15

		<div class="g1-flex4 g2-flex6 g3-flex12">

16

			<p class="delta alt">

17

				<a href="{{ entry.url }}">

18

					{{ entry.title }}

19

				</a>

20

			</p>

21

		</div>

22

	</div>

23

	{% endfor %}

24

25

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

1

{#

2

 # Services entry template

3

 # -------------------

4

 #

5

 # This template gets loaded whenever a Work entry’s URL is

6

 # requested. That’s because the Work section’s Template setting is

7

 # set to “services/_entry”, the path to this template.

8

 #}

9

10

{% extends "_layouts/site" %}

11

12

{% block main %}

13

  {% set currentUrl = craft.request.getUrl() %}

14

  {% set lastSegment = craft.request.getLastSegment() %}

15

  {% if lastSegment != 'services' %}

16

    <nav class="subnav">

17

      <div class="flex">

18

        <div class="g1-flex4 g2-flex6 g3-flex12">

19

          <ul>

20

            {% for entry in craft.entries.section('Services').type('servicesDetail').find() %}

21

            <li>

22

              <a href="{{ entry.url }}" class="{% if entry.url == currentUrl %}current{% endif %} subfont caps">

23

                {{ entry.title }}

24

              </a>

25

            </li>

26

            {% endfor %}

27

          </ul>

28

        </div>

29

      </div>

30

    </nav>

31

  {% endif %}

32

33

  {% if lastSegment == 'services' %}

34

35

    <header class="alt2">

36

      <div class="flex">

37

        <div class="g1-flex4 g2-flex6 g3-flex12">

38

          <h1 class="alpha center reverse">{{ entry.title }}</h1>

39

        </div>

40

      </div>

41

    </header>

42

43

    <section class="alt">

44

      <div class="flex">

45

        <div class="g1-flex4 g2-flex6 g3-flex8 g3-offset2">

46

          {% if entry.indexHeading %}

47

            {{ entry.indexHeading }}

48

          {% endif %}

49

        </div>

50

      </div>

51

    </section>

52

53

    <section>

54

      <div class="flex">

55

        {% for entry in craft.entries.section('Services').type('servicesDetail').order('postDate desc').find() %}

56

          <div class="g1-flex4 g2-flex2 g3-flex4">

57

            <a href="{{ entry.url }}" class="services-entry-wrap">

58

              {% set image = entry.featuredImage.first() %}

59

              {% if image %}

60

                <img src="{{ image.getUrl('thumb') }}" alt="image.title"/>

61

              {% endif %}

62

              <h3 class="center">{{ entry.title }}</h3>

63

              {% if entry.shortDescription %}

64

                {{ entry.shortDescription }}

65

              {% endif %}

66

            </a>

67

          </div>

68

      {% endfor %}

69

    </div>

70

    {% else %}

71

      {% include "includes/articlebody" %}

72

73

    {% endif %}

74

  </section>

75

76

  {% if lastSegment != 'services' %}

77

  <section class="service-points">

78

    {% for block in entry.servicesBody %}

79

    <div class="flex">

80

      <div class="service-point">

81

        <div class="g1-flex4 g2-flex3 g3-flex4">

82

          <h4>{{ block.heading }}</h4>

83

          {{ block.text }}

84

        </div>

85

        <div class="g1-flex4 g2-flex3 g3-flex8">

86

          {% set photo = block.image.first() %}

87

          {% if photo %}

88

          <img class="" src="{{ photo.url }}" alt="{{ photo.title }}">

89

          {% endif %}

90

        </div>

91

      </div>

92

    </div>

93

    {% endfor %}

94

  </section>

95

96

  <section class="services-work-entry">

97

      {% set entries = craft.entries.section('Work').limit(1).offset(2) %}

98

      {% for entry in entries %}

99

      {% set asset = entry.featuredImage.last() %}{% if asset %}

100

      <div style="background-image: url('{{ asset.url }}')">

101

      {% endif %}

102

      <div class="flex">

103

        <div class="g1-flex4 g2-flex3 g3-flex6">

104

            <a href="{{ entry.url }}">

105

              {% set asset = entry.featuredImage.first() %}{% if asset %}

106

              <img src="{{ asset.url }}" alt="{{ asset.title }}" width="616" height="204">

107

              {% endif %}

108

            </a>

109

        </div>

110

        <div class="g1-flex4 g2-flex3 g3-flex6">

111

          <div class="summary-wrap">

112

            <h2 class="callout-border"><a href="{{ entry.url }}">{{ entry.title }}</a></h2>

113

            <h3><a href="{{ entry.url }}">{{ entry.heading }}</a></h3>

114

            {% if entry.subheading %}

115

            <p>{{ entry.subheading }}</p>

116

            {% endif %}

117

            <p><a href="{{ entry.url }}" class="view-more hero-cta">View More</a></p>

118

          </div>

119

        </div>

120

      </div>

121

    </div>

122

    {% endfor %}

123

  </section>

124

  {% endif %}

125

126

127

{% endblock %}

128

129

130

{% block foot %}

131

  {{ parent() }}

132

  <script type="text/javascript" src="/assets/lib/shapes-polyfill.min.js"></script>

133

{% endblock %}

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:

1

cd ~/Sites/craftcms/public

2

mv htaccess .htaccess

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

1

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

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.

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

1

nano ./craft/config/db.php

Geben Sie Ihre Anmeldeinformationen in die folgenden Felder ein:

1

/**

2

 * Database Configuration

3

 *

4

 * All of your system's database configuration settings go in here.

5

 * You can see a list of the default settings in craft/app/etc/config/defaults/db.php

6

 */

7

8

return array(

9

10

        // The database server name or IP address. Usually this is 'localhost' or '127.0.0.1'.

11

        'server' => 'localhost',

12

13

        // The database username to connect with.

14

        'user' => 'root',

15

16

        // The database password to connect with.

17

        'password' => 'your-password',

18

19

        // The name of the database to select.

20

        'database' => 'craft',

21

22

        // The prefix to use when naming tables. This can be no more than 5 characters.

23

        'tablePrefix' => 'craft',

24

25

);

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

1

chmod 744 ./craft/app

2

chmod 744 ./craft/config

3

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.

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:

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

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