Statamic 101

Statamic ist ein modernes PHP-CMS, das sich einfach und intuitiv bedienen lässt. Vom Flat-File-Design bis zum Einsatz von Technologien wie Markdown und YAML können Sie eine hervorragende Arbeit erledigen, ohne überhaupt Code schreiben zu müssen.

In diesem Artikel werden wir den Prozess von der Installation bis zum Aufbau eines Basisportfolios betrachten.

Mit einem Flat-File-Design können Sie die ZIP-Datei, die Sie von der Statamic-Website herunterladen, einfach extrahieren. Es ist keine Datenbank vorhanden, alle Inhalte und Einstellungen werden lokal in einem Host aus verschiedenen Dateien gespeichert. Dies bedeutet auch, dass Sie automatische Sicherungen und Versionierungen für alle Inhalte haben, wenn Sie etwas wie Git verwenden.

Lassen Sie uns die extrahierten Inhalte betrachten und betrachten Sie die Struktur von Statamic.


Die Dateistruktur

Es gibt mehr oder weniger fünf verschiedene Ordner, mit denen Sie höchstwahrscheinlich interagieren werden, und diese sind:

  • _config Hier werden alle Ihre Einstellungen gespeichert
  • _Inhalt Hier legen Sie Ihre Markdown-Dateien ab
  • _add-ons ist für Statamic-Add-Ons
  • _themen Dort bauen Sie Ihr Thema
  • Vermögenswerte Hier können Sie Ressourcen für Ihre Website speichern

Neben diesen haben Sie die folgenden vier Ordner, die Sie wahrscheinlich nicht direkt berühren werden:

  • _app beherbergt den eigenen Quellcode von Statamic
  • _Zwischenspeicher Hier speichert Statamic alle Ihre Inhalte
  • _logs Hier speichert Statamic Ihre Protokolle
  • Administrator ist das Statamic-Admin-Panel

Der erste Schritt jeder Statamic-Site ist das Konfigurieren der Optionen.


Aufbau

Alle Konfigurationsdateien befinden sich wie oben beschrieben im Ordner _config. Die Hauptdatei, die Sie sich ansehen sollten, ist die einstellungen.yaml.

Wenn Sie mit YAML noch nicht vertraut sind, müssen Sie nur wissen, dass es sich um ein Datenformat handelt, das JSON ähnelt, mit der Ausnahme, dass es ein für Menschen lesbareres Format ist. Dies geschieht dadurch, dass keine Trennzeichen wie Semikolons oder Anführungszeichen erforderlich sind. Stattdessen erhält sie ihre Struktur aus Platzierung und Einzug.

Das einstellungen.yaml Die Datei ist wirklich gut dokumentiert, so dass Sie beim Ausfüllen kein Problem haben sollten. Einige der Optionen, die Sie wahrscheinlich prüfen möchten, sind die folgenden:

 _license_key: Geben Sie Ihren Lizenzschlüssel ein _site_name: Mein Portfolio _site_url: http: // localhost: 7000 _theme: portfolio _taxonomy: - sprache _log_enabled: true _cookies.secret_key: Ein zufälliger Schlüssel

Die meisten davon sind ziemlich unkompliziert, wie das Festlegen des Lizenzschlüssels, des Namens und der URL Ihrer Site. Das Thema Option legt fest, welcher Themenordner geladen werden soll. Wir werden gleich darauf eingehen, aber ein Thema ist im Wesentlichen der Ort, an dem Sie festlegen, wie die verschiedenen Seiten Ihrer Website funktionieren werden. Wir werden unser eigenes Thema erstellen, damit Sie es nach Belieben benennen können. Ich habe "Portfolio" gewählt.

Die nächste Option ist ein Array namens Taxonomie. Wenn Sie jemals so etwas wie WordPress verwendet haben, sollten Sie wissen, wozu das dient. Grundsätzlich können Sie jedem Beitrag eine Einstellung oder einen "Typ" hinzufügen. Anschließend können Sie diese Taxonomien verwenden, um Ihren Inhalt zu filtern und benutzerdefinierte Seiten für diese Gruppierungen zu erstellen.

Ich füge nur eine Taxonomie hinzu; die Sprachtaxonomie, denn in unserem Beispielportfolio werden wir die Programmiersprachen der einzelnen Werke angeben. Sie müssen keine Taxonomie für jede benutzerdefinierte Eigenschaft erstellen. Wir werden andere Dinge in unserem Portfolio haben, wie Links und Beschreibungen. Eine Taxonomie gilt für Felder, die mehrere Einträge gemeinsam haben, und für Felder, für die Sie möglicherweise eine benutzerdefinierte Seite erstellen möchten.

Das log_enabled Wenn Sie diese Einstellung aktivieren, wird die Protokollierung aktiviert, sodass Sie Probleme anzeigen können, die im Admin-Panel auftreten. Sie werden im gespeichert _logs Ordner, den wir zuvor gesehen haben. Schließlich ist die letzte Option, die ich erwähnt habe, der geheime Schlüssel, der zum Verschlüsseln des Cookies verwendet wird.

Diese Datei kann jetzt gespeichert werden. Bevor wir uns jedoch dem Inhalt zuwenden, nehmen wir uns einen Moment Zeit, um die Portfolio-Vorlage einzurichten, damit wir sehen können, was wir tun.


Theme-Grundlagen

Wie bei den meisten modernen Frameworks können Sie beim Laden einer Seite diese aus mehreren wiederverwendbaren Komponenten zusammenstellen. Eine Seite in Statamic besteht aus a Layout, ein Vorlage, und ein Inhaltsdatei. Sowohl die Layoutdateien als auch die Vorlagen können optional auch aus mehreren Teilen bestehen, die als Teilstücke bezeichnet werden.

Das Layout ist die äußere Hülle, in der Ihre Vorlage platziert wird. Dies wird normalerweise verwendet, um den Boilerplate-HTML-Code wie den head-Abschnitt zu speichern, und den Grundtext, den alle Seiten benötigen, die dieses Layout verwenden, z.

Das Vorlage ist eine bestimmte Ansicht für eine einzelne Seite. Sie können eine Homepagevorlage, eine Kontaktseitenvorlage usw. haben. Sie müssen keine Seite pro Seite erstellen, aber ich würde eine pro Seite empfehlen Art der Seite.

In diesen Vorlagen können Sie Variablen verwenden, die in den tatsächlichen Inhaltsdateien gespeichert sind. Angenommen, Sie benötigen eine Seite, die einen Index der Bücher anzeigt, die Sie gerade lesen, und dann eine weitere Seite, um eine Liste der angezeigten Shows anzuzeigen. Anstatt den Großteil des Codes für jede Seite zu replizieren, können Sie eine Vorlage zum Anzeigen einer Liste von Objekten erstellen und dann die Details der Liste aufrufen, die aus der Inhaltsdatei selbst abgerufen werden soll.

Das Inhaltsdatei-Wie der Name schon sagt, ist dies die tatsächlich angezeigte Ressource. Dies kann von einer wirklich einzigartigen Webseite bis zu einem einzelnen Blogeintrag reichen. Wir werden in einem Moment näher darauf eingehen.

Anstatt alle diese verschiedenen Komponenten manuell zu erstellen, bietet Statamic eine Art Starter-Vorlage, die Ihnen eine grundlegende Struktur für den Einstieg bietet. Sie können den Themenordner von Github herunterladen.

Legen Sie einfach den gesamten Ordner in den Ordner _themen Verzeichnis und benennen Sie den Ordner in 'portfolio' um (da dies der Name des Themes ist, den wir in der Einstellungsdatei angegeben haben). Sie müssen auch das umbenennen kindling.js Datei aus dem Ordner Js und der kindling.css Datei aus dem CSS-Verzeichnis an portfolio.js und portfolio.css da es ein spezielles Tag gibt, um diese automatisch einzuziehen.

Das ist alles, was wir jetzt brauchen, aber um eine bessere Vorstellung von dem zu bekommen, worüber ich bezüglich des Layouts und der Vorlage gesprochen habe, werfen wir einen Blick auf diese Dateien. Öffnen Sie zunächst die Datei mit dem Namen default.html von dem Layouts Mappe. Dies entspricht dem Standardlayout, das Sie möglicherweise erraten haben.

     _site_name    layout_content    

Wie ich bereits erwähnt habe, ist das Layout ein guter Ort, um Code zu platzieren, der auf mehreren Seiten (oder eher Vorlagen) erforderlich ist. Aus diesem Grund enthält das Standardlayout in dieser Datei nur die grundlegende Gliederung einer HTML-Datei. Jetzt haben wir noch nicht wirklich darüber gesprochen, aber Statamic verfügt über eine eigene Templating Engine, die recht einfach zu finden ist. Sie platzieren im Grunde nur ein Tag an der Stelle, an der etwas eingefügt werden soll, ähnlich wie bei Lenkern, wenn Sie damit vertraut sind.

Dieses Layout enthält ein paar Tags, von denen ich dachte, dass ich sie durchgehen würde. Der erste ist _site_name. Dieses Tag bezieht sich eigentlich auf die Eigenschaft, die wir in der einstellungen.yaml Datei. Sie finden diese Konvention in ganz Statamic. Sie können YAML-Optionen entweder global oder auf Dateibasis festlegen. Sie können diese Optionen dann erhalten, indem Sie einfach ein Tag mit ihren Namen in Ihre Vorlagen einfügen.

Der nächste Tag, der eigentlich zweimal erscheint, ist der Thema Etikett. Helfer in Statamic sind mehr wie unabhängige Module, daher können mehrere verschiedene Funktionen an denselben Namen angehängt werden. Sie können auf die einzelnen Funktionen mit einem Doppelpunkt und dem Namen des gewünschten Befehls zugreifen.

Das Thema Bei diesem Tag werden Ressourcen geladen, die für dieses Thema spezifisch sind. Es kann verwendet werden, um Dinge wie Skripte und Stylesheets, aber auch Bilder wie Teilbilder einzulesen. Mit dieser Hilfsfunktion können Sie im Grunde nur den Namen der gewünschten Ressource angeben und den Pfad zum aktuellen Vorlagenverzeichnis angeben. So zum Beispiel, wenn Sie schreiben würden:

 theme: js src = "unterstrichen.js"

Es würde das durch einen Link zu einer Datei mit dem Namen ersetzen unterstrichen.js im js-Ordner des aktuellen Themas. Wenn für den Befehl js oder css kein src-Parameter festgelegt ist, wird standardmäßig davon ausgegangen, dass Sie sich auf eine js- oder css-Datei mit dem Namen des aktuellen Designs beziehen. Aus diesem Grund haben wir diese Dateien umbenannt. Es ist nur eine Frage der Bequemlichkeit, so dass wir sie nicht angeben müssen und die Quelle ein wenig bereinigt.

Der nächste Tag, der aufkommt, ist layout_content. Das ist ähnlich Ausbeute in anderen Templating Engines, und es gibt im Grunde an, wo die innere Vorlage eingefügt werden soll.

Das letzte, was ich in dieser Datei tun möchte, ist den Link zu jQuery zu entfernen, da ich ihn nicht verwenden werde (wenn Sie dies tun, können Sie ihn natürlich verlassen)..

Als nächstes gehen wir zur Standardvorlagendatei (templates / default.html). Es sollte leer sein. Der Bildung halber fügen wir einen Tag mit dem Namen "" hinzu Inhalt Dadurch wird der Inhalt der aktuell geladenen Seite eingefügt.

Um es zusammenzufassen: Wenn Sie zu einer Seite gehen, wird zuerst die Layoutdatei geladen, und dann, wo auch immer layout_content Tag wird platziert Diese Vorlage wird eingefügt. Diese Vorlage gibt dann nur das aus, was sich auf der aktuellen Seite befindet.

Speichern Sie diese Dateien und lassen Sie uns zum Inhalt übergehen.


Der Inhalt

Inhalt in Statamic wird standardmäßig in Markdown-Dateien angegeben, und die geladene Standarddatei wird aufgerufen page.md. Genauso wie ein Standard-Webserver index.html lädt, wenn keine Datei angegeben ist, lädt Statamic page.md.

Es ist auch erwähnenswert, dass Routen oder URL-Links in Ihrer Site von der Site definiert werden _Inhalt Verzeichnis. Zum Beispiel, wenn Sie einen Ordner mit dem Namen erstellen Demo in dem _Inhalt Verzeichnis und darin eine Datei mit dem Namen link.md, Dies wird der URL entsprechen / Demo / Link. Wenn du einen platzierst page.md Datei in, wird es geladen, wenn Sie zu navigieren /Demo/ da es der Standarddateiname ist.

Statamic enthält einige Demo-Inhalte, aber Sie können einfach alles löschen _Inhalt Verzeichnis für dieses Beispiel (oder für den Moment beiseite legen).

Beginnen wir mit einer einfachen Homepage. An der Wurzel der _Inhalt Erstellen Sie eine Datei mit dem Namen page.md mit den folgenden:

 --- title: Home --- # Willkommen auf der Seite title

Alle Inhaltsdateien sind in zwei Abschnitte unterteilt. die YAML-Frontmaterie und der Inhalt. Im oberen Teil (zwischen den gestrichelten Linien) können Sie Standard-YAML für diese Datei angeben. Dies ist eine gute Möglichkeit, Optionen zum Anpassen der Vorlagendateien festzulegen. Der zweite Teil ist der Bereich Markdown, in dem Sie den Inhalt der aktuellen Seite einfügen. Sie können sowohl Standard-Markdown- als auch Statamic-Helper-Tags verwenden.

Diese Seite wird mit den Standardlayout- und Vorlagendateien geladen, die wir gerade eingerichtet haben. Wenn Sie jedoch andere verwenden möchten, können Sie diese als Optionen im Abschnitt YAML oben mit angeben _Layout und _Vorlage beziehungsweise.

Wenn Sie einen Server im Stammverzeichnis Ihres Statamic-Verzeichnisses erstellen:

 php -S localhost: 7000

… Und navigiere dann zu http: // localhost: 7000 In Ihrem Browser sollten Sie das H1-Tag mit unserer Willkommensnachricht sehen.

Dies ist alles, was Sie wissen müssen, um Seiten in Statamic zu erstellen. Wenn Sie eine ziemlich statische Site erstellen, reicht dies aus. Für viele Websites müssen wir jedoch dynamische Daten hinzufügen können. Dies kann in Form von Blogbeiträgen, Shop-Artikeln oder in unserem Fall Portfolio-Arbeiten erfolgen.


Einträge

Es gibt keine Datenbank in Statamic. Daher werden diese Einträge in Markdown-Dateien genauso wie die gerade erstellte Seite gespeichert. Es wurden jedoch ein paar Schritte unternommen, um mehrere Funktionen auf subtile Weise einzuführen, um Dinge zu optimieren und im Admin zu funktionieren.

Zunächst können Sie die Dateien mit einem speziellen Datumsformat benennen, damit sie nach Datum sortiert und gefiltert werden können. Sie tun dies, indem Sie den Titel mit einem vorangestellten Titel anhängen Jahr Monat Tag Muster. Wenn Sie einen Beitrag mit dem Namen "foobar" erstellen möchten, würden Sie ihn folgendermaßen benennen:

 2013-09-15-foobar.md

Alle Einstellungen, die für den Beitrag erforderlich sind, werden oben im Bereich für vordere Materie angezeigt, und der Inhalt wird darunter platziert. Dies folgt dem oben beschriebenen Format der Seiten.

Dies ist zwar ziemlich cool, es entspricht jedoch der manuellen Eingabe von Beiträgen in eine Datenbank eines herkömmlichen Systems. Es gibt noch eine andere Möglichkeit!

Statamic wird mit einem wirklich netten Admin geliefert, der das alles für Sie erledigen kann, aber um es einrichten zu können, müssen wir ihm sagen, welche Felder diese Art von Eintrag haben soll. Dies geschieht in einer entsprechend benannten Datei fields.yaml.

In unserem Beispiel erstellen wir einen Ordner mit dem Namen _content funktioniert, und innerhalb der funktioniert Ordner erstellen wir eine Datei mit dem Namen fields.yaml. In der fields.yaml Datei müssen wir angeben, welche Eigenschaften unsere 'Einträge' enthalten sollen, und die einzelnen Typen für jede dieser Einstellungen.

Sie können entweder Ihre Feldmenge (die Liste der Felder) in angeben _config / fieldsets / Verzeichnis und ziehen Sie eine Definition ein, oder Sie können die Definition einfach hier eingeben (oder Sie können beides tun, um eine vorhandene Definition zu erweitern). Für unser einfaches Beispiel möchte ich nur die Definition hier einfügen, da wir sie nirgendwo wiederverwenden werden:

 Typ: Datum Felder: Sprache: Typ: Tags Anzeige: Programmiersprache erforderlich: true Beschreibung: Typ: Textanzeige: Beschreibung erforderlich: Falscher Link: Typ: Textanzeige: Link erforderlich: True Inhalt: Typ: ausgeblendet

Die erste Eigenschaft teilt Statamic lediglich mit, dass diese Eingabedateien eine Datumseigenschaft haben und entsprechend benannt werden sollen. Als nächstes öffnen wir ein YAML-Objekt mit dem Namen Felder enthält alle Eigenschaften unserer Einträge.

Der erste ist der Sprache Feld, das, wenn Sie sich erinnern, die Taxonomie ist, die wir in erstellt haben einstellungen.yaml. In jeder Eigenschaft müssen wir ihren Typ angeben (oder er verwendet standardmäßig ein Textfeld), seinen Anzeigetext (der standardmäßig der Eigenschaftsname ist) und ob er erforderlich ist. Es gibt weitere Optionen, die Sie einstellen können, einschließlich Anweisungen und dem Standardwert. Weitere Informationen zu diesen Optionen finden Sie auf der Statamic-Website. Neben diesen Einstellungen können verschiedene Feldtypen ihre eigenen benutzerdefinierten Optionen haben.

Für die Sprache Eingabe, ich habe es eingestellt, um die Etikett type, mit dem Sie mehrere Tags für diese Option festlegen können. Es ist nur eine andere Art der Eingabe für die Eingabe des Werts im Administrator. Sie können alle verschiedenen Feldtypen in der Statamic-Dokumentation oder im offiziellen Statamic-Spickzettel unter 'Feldtypen' anzeigen..

Das Beschreibung und Verknüpfung sind ziemlich gleich Beides sind Textfelder, außer dass eines erforderlich ist und das andere nicht. Neben den von Ihnen angegebenen Feldern werden alle Einträge mit einem Titel- und Inhaltsfeld versehen. Wir wollen nicht wirklich ein inhaltliches Feld - in unseren Werken werden sie eher wie Links sein - also habe ich es eingestellt versteckt.

Der letzte Schritt, bevor wir zum Admin gehen, ist das Erstellen eines page.md Datei in der funktioniert Verzeichnis. Dies ist nicht erforderlich, aber der Administrator versucht, den Titel dieses Eintragstyps von hier aus abzurufen. Daher ist es eine gute Idee, ihn einfach zu platzieren. Erstellen Sie dazu eine page.md Datei in der funktioniert Ordner mit nur dem Titel "Works":

 --- Titel: Werke ---

Der Admin

Um in den Admin einzusteigen, müssen Sie zuerst einen Benutzer erstellen. Dies ist eine einfache YAML-Datei in der Konfig Mappe. Der Name der Datei ist der Benutzername, den Sie zum Anmelden verwenden, und in der Datei konfigurieren Sie die Details und das Kennwort des Benutzers.

Erstellen Sie einen neuen Benutzer mit dem Benutzernamen Editor. Dazu erstellen wir eine Datei namens editor.yaml innerhalb der _config / users / Mappe. Geben Sie die folgenden Daten ein (außer mit Ihren Daten anstelle von meinen Daten):

 --- Vorname: Gabriel Nachname: Manricks Rollen: [Admin] E-Mail: [email protected] Kennwort: Kennwort --- Der Herausgeber dieses Portfolios

Die meisten dieser Spalten sind ziemlich geradlinig und ich denke nicht, dass sie einer Erklärung bedürfen. Das einzige erwähnenswerte Feld ist das Rollen Rahmen. Zur Zeit Administrator Dies ist die einzige verfügbare Option. In Zukunft können Sie jedoch die Bearbeitungsberechtigungen des Benutzers anpassen.

Erwähnenswert ist auch, dass das Passwort nicht im Klartext bleibt. Nach dem ersten Login wird Statamic das Passwort zusammen mit einem Salting-Code mit einem Hash versehen und dieses stattdessen einschließen.

Alles nach den gestrichelten Linien wird als Inhalt für diesen Benutzer gespeichert und kann als eine Art Biografie für ihn verwendet werden.

Speichern Sie nun diese Datei und navigieren Sie zu, wenn der Webserver noch ausgeführt wird /Administrator in Ihrem Browser Dies öffnet die Anmeldekonsole, in der Sie diese Eigenschaften eingeben können. Wenn Sie sich das erste Mal anmelden, müssen Sie dies zweimal tun, einmal, um das Kennwort zu kennzeichnen, und das zweite Mal, um sich tatsächlich anzumelden.


Das Statamic Login

Sobald Sie angemeldet sind, sehen Sie eine Liste unserer Seiten. Enthalten ist unsere Homepage sowie der Eintragstyp 'Works'. Lassen Sie uns einen Blick darauf werfen, was unsere Feldererklärung für uns getan hat. Klicke auf das Erstellen Link innerhalb der Arbeitet Bar.

Sie sollten ein schönes Formular sehen, das alle von uns angegebenen Felder und den Titel enthält. Fügen Sie einige Posts hinzu, um es auszuprobieren.

Mit einigen gespeicherten Beiträgen haben wir die erste Runde abgeschlossen. Sie wissen jetzt, wie Sie Seiten, Designs, Benutzer und Einträge erstellen. Dies ist ein großartiger erster Schritt. Statamic hat jedoch noch viel mehr zu bieten.


Die Templating Engine

Einige Beiträge zu erstellen ist schön, aber was wäre besser, wenn wir sie tatsächlich auf einer Seite anzeigen könnten. Dazu müssen wir die Standardvorlage bearbeiten.

Dies ist unsere erste echte Interaktion mit der enthaltenen Templating-Engine, aber keine Sorge, das intuitive Design von Statamic macht das Auffinden leicht.

Eine vollständige Liste der verfügbaren Tags finden Sie in der Dokumentation von Statamic. Alles was wir wirklich für dieses Beispiel brauchen, ist das Einträge Tag, der zum Einlesen von Einträgen aus einem bestimmten Ordner in der verwendet wird _Inhalt Verzeichnis. Es gibt viele optionale Eigenschaften, mit denen Sie nach Datum oder nach Bedingungen wie Taxonomien oder sogar Standardeigenschaften filtern können. Wir werden es einfach halten und die Eigenschaften einfach nach Datum auflisten (Standardeinstellung)..

Hier ist die komplette neue Standardvorlage (templates / default.html):

 

Portfolio

entries: Listing folder = "funktioniert" / entries: Listing

Sprache

Titel - Beschreibung

In diesem Code erstellen wir eine Tabelle und durchlaufen alle Einträge im Verzeichnis 'Works'. Diese Art von Block-Tags, bei denen Sie mehr HTML-Code einfügen, weist neue Platzhalter zu. Neben dem Zugriff auf Dinge wie alle Attribute des Beitrags erhalten Sie auch spezielle Hilfsvariablen, die Ihnen Informationen wie den aktuellen Index oder den ersten oder letzten Beitrag anzeigen können. Wir werden keine dieser Variablen verwenden. Alles was wir brauchen ist, den Titel, die Sprache, die Beschreibung und den Link anzuzeigen. Wenn Sie jedoch die Seite in Ihrem Browser laden, werden Sie wahrscheinlich feststellen, dass anstelle der Sprache nur "Array" angezeigt wird..

Dies liegt daran, dass wir diese Eigenschaft als Typ-Tag festlegen, was bedeutet, dass sie mehrere Sprachen enthalten kann. Obwohl Sie möglicherweise nur eine Sprache eingegeben haben, wird sie dennoch in einem Array gespeichert. Glücklicherweise enthält Statamic Modifikatoren.


Modifikatoren

Um diese Anleitung abzuschließen, wollen wir uns ein paar Modifikatoren ansehen, die es uns ermöglichen, diese Seite noch besser zu machen.

Das erste und größte Problem ist, dass die Sprache auftaucht. Wenn Sie sich das Statamic-Cheat-Sheet ganz unten links ansehen, wird ein Abschnitt mit dem Namen angezeigt List Shortcuts. Statamic ist zwar keine Modifikation, aber Sie können diese Wörter an das Ende einer Listenvariablen anhängen. Stattdessen wird eine Zeichenfolgendarstellung zurückgegeben. Die, die ich in dieser Situation verwenden möchte, ist der Standard _Liste Helfer. Dies führt dazu, dass mehrere Werte im Array durch ein Komma und ein Leerzeichen getrennt werden. Dies ist das, was wir in unserer Situation wollen.

Um es auszuprobieren, ersetzen Sie das Sprache tag mit sprachliste. Aktualisieren Sie Ihren Browser und die Sprachen sollten jetzt korrekt angezeigt werden.

Als Nächstes fügen wir dem Titel einen Modifikator hinzu, um ihn ganz in Großbuchstaben darzustellen. Wenn Sie jemals etwas wie die Smarty-Templating-Engine verwendet haben, funktioniert das genauso. Sie fügen am Ende des Variablennamens eine Pipe hinzu und fügen dann einen Modifikator hinzu. In unserem Beispiel müssen Sie nur den Anruf an ersetzen Titel mit title | upper und diese sind kettenfähig, so dass Sie unbegrenzt weitere Rohre hinzufügen können.

Jetzt fügen wir einfach ein paar CSS hinzu, um alles zu stylen. Denken Sie daran, das geht in die css / portfolio.css Datei:

 body background: # FAFAF5;  h1 font: 800 64px 'Raleway', serifenlos; Rand unten: 28px;  table font: 15px 'Coustard', serif;  td padding: 10px 10px 0 10px;  p margin-bottom: 15px;  .lang p background: # CA9F53; Farbe: #FFF; Polsterung: 3px 5px; Textausrichtung: rechts;  .work text-align: left;  .work a border-bottom: 1px solid # 000; Textdekoration: keine;  .title font-weight: 600; Farbe: # 000;  .desc color: # 666; 

Diese beiden Schriftarten stammen von Google-Schriftarten. Sie müssen also den folgenden Link oben in Ihre Standardlayoutdatei einfügen:

     _site_name     layout_content   

Wenn alles geklappt hat, sollten Sie die folgende Seite sehen (außer bei den von Ihnen hinzugefügten Werken):


Fazit

In diesem Lernprogramm habe ich Sie durch den gesamten Prozess geführt, von der Installation des Frameworks über das Einrichten aller Elemente bis hin zum Erstellen eines neuen Eintragstyps und dem Erstellen eines benutzerdefinierten Designs. Es ist viel zu tun, und es ist nur möglich, wie einfach Statamic die Dinge macht.

Wir haben bereits eine Menge Funktionalität gesehen und haben noch nicht einmal an das Erstellen eigener Module und die Erweiterung von Statamic mit PHP gedacht, aber ich denke, das Erstaunlichste ist bisher, dass wir keine einzige PHP-Zeile schreiben mussten das gesamte Tutorial! Das ist etwas zu prahlen.

Ich denke, die Hauptfrage, die die Leute haben könnten, lautet: "Soll ich sie verwenden?" Oder "Was sollte dies in meinem aktuellen Repertoire ersetzen?" Es ist wichtig zu beurteilen, wozu Statamic dient. Wenn Sie ein neues Startup erstellen und die Flexibilität eines voll entwickelten Frameworks benötigen, können Sie sicher sein, dass es in Statamic ausgeführt werden kann. Es wäre jedoch eine Menge benutzerdefinierten Codes, der den Zweck verfehlt. Ich denke, dass dies als Blogging-Plattform oder CMS gedeihen wird.

Aus einem Hintergrund in WordPress stammend, fühlt sich dies wie ein direkter Nachfolger an. In der Theorie folgen viele der gleichen Konventionen, aber sie werden alle viel intelligenter implementiert. Das Vergleichen der erforderlichen Code-Mengen wird zum Scherz. In Zukunft bietet Statamic eine unglaubliche API zum Erstellen von benutzerdefinierten Tags, Hooks, neuen Feldtypen und mehr. Sie können sich vorstellen, dass Statamic es so schlank und einfach macht, wie Sie es vielleicht erwartet haben.

Ich hoffe, Ihnen hat dieser Artikel gefallen, wenn Sie Fragen haben, zögern Sie nicht, mich unter twitter @gabrielmanricks oder auf dem IRC-Kanal Tuts + web dev auf freenode (#nettuts) zu fragen..