Wir stellen vor: Stacey: die leichte CMS-Alternative

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Die Welt der Content-Management-Systeme bietet mehr als Wordpress, Squarespace und Joomla. Ich zeige Ihnen eine leichte und datenbankfreie Alternative, die sich perfekt zum einfachen Bloggen eignet. Ihr Name ist Stacey..

Wer ist Stacey?

Stacey ist ein leichtgewichtiges PHP-CMS, das von Anthony Kolber entwickelt wurde. Im Gegensatz zu den meisten CMS gibt es keine Datenbank, keine Admin-Oberfläche, nur eine kleine Sammlung von PHP-Dateien. Werfen Sie den Anwendungsordner auf einen PHP-Server und Sie können loslegen.

Stacey speichert Inhalte in Form von Verzeichnissen und Textdateien. Für jeden Eintrag (sei es Blogbeitrag, Portfolio, Tutorial, was auch immer) fügen Sie einen Ordner hinzu, in dem Sie eine begleitende Textdatei platzieren, sowie alle anderen Extras, die Sie möchten. Stacey durchsucht die Ordner und generiert ein Frontend wie jedes andere CMS.

Sie müssen auch nicht mit PHP vertraut sein, um ein Theme zu erstellen. Stacey verwendet eine Vorlagensprache, die es Ihnen ermöglicht, Daten auszugeben und einige grundlegende Tricks auszuführen, aber nichts, was Ihnen den Kopf verdrehen lässt. Wenn Sie mit HTML und CSS vertraut sind, sind Sie in guten Händen.

Warum auch nur mit der Idee flirten?

Manchmal sind die CMS-Pakete, die wir alle kennen (denken Sie an WordPress, Drupal), einfach zu mächtig. Sie haben sich zu enorm leistungsfähigen und vielseitigen Plattformen entwickelt, sind jedoch oft zu komplex, wenn Sie nur gelegentlich einen Blogbeitrag schreiben möchten.

Stacey ist jedoch sehr konzentriert. Es gibt auch ein zusätzliches Sicherheitselement, da sie keine Datenbank zum Hacken hat (Sicherheit ist ein Faktor, der zu einigen datenbankfreien CMS-Ansätzen geführt hat; wie Jekyll, das lokal ausgeführt wird und statisches HTML für die Bereitstellung auf Ihrem Webserver generiert.)

Sie könnten denken, dass die Arbeit mit und das Organisieren von Textdateien ein Rezept für eine Katastrophe ist, aber es ist tatsächlich ziemlich effektiv. Das Templating von Stacey macht es überschaubar und überraschend skalierbar.

Schließlich macht es immer Spaß, einfach mit verschiedenen Dingen zu spielen.

Genug geredet, stellen wir uns vor, damit Sie sich selbst ein Bild machen können.

Erste Verabredung

Um die Funktionen und das Innenleben von Stacey zu demonstrieren, müssen wir uns zunächst einen einfachen Blog erstellen. Ich werde nicht auf den gesamten HTML/CSS-Build eingehen, aber lassen Sie uns einfach die Dateien aufschlüsseln, mit denen ich arbeite.

Hinweis: Wenn Sie an diesem Teil nicht interessiert sind, können Sie gerne zum Kern des Tutorials springen, in dem wir mit der Erstellung unseres CMS beginnen.

Zunächst muss ich mir also Gedanken machen, welche Seiten (und damit Vorlagen) ich benötige. Standard-Blog-Zeug; eine index.html, auf der ich die letzten Blog-Posts auflisten kann, einen einzelnen Post sowie eine Seite zum Anzeigen von Dingen wie "Über mich", "Kontakt" usw. So allgemein wie möglich!

Beginnen wir mit einer Blanco-HTML-Seite:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Metaaaa -->
	<meta charset="utf-8">
	<title>Staceyapp demo</title>
	<meta name="description" content="Demo for Staceyapp">
	<meta name="author" content="Ian Yates">

	<!-- Viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- CSS -->
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons -->
	<link rel="shortcut icon" href="img/favicon.ico" />
	<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />

</head>
<body>


</body>
</html>

Alles klar soweit. Wir benötigen eine style.css (in diesem Fall zusammen mit normalize.css) und ich habe auch ein paar Favicons hinzugefügt.

Sie werden feststellen, dass es außer dem HTML5-Shiv keinen Verweis auf jQuery oder andere JavaScripts gibt. Wir brauchen nicht wirklich welche, warum also die Mühe machen, die Vermögenswerte einzubeziehen? Halte die Dinge schlank und gemein. Unsere Dateistruktur sieht momentan ungefähr so aus:

Zweite Basis

Lassen Sie uns diese statische HTML-Seite schnell zusammenfassen, dann können wir uns darauf konzentrieren, Stacey einzubeziehen. Ich habe eine <header> eingefügt, mit einem Logo und einigen Hauptnavigationslinks:

1	<header class="clearfix">
2
3	<div class="wrapper">
4
5	<h1 class="logo">
6	<a href="#">Demo</a>
7	</h1>
8
9	<nav>
10	<ul>
11	<li><a href="#">Nav Item 1</a></li>
12	<li><a href="#">Nav Item 2</a></li>
13	<li><a href="#">Nav Item 3</a></li>
14	</ul>
15	</nav>
16
17	</div> <!--/ wrapper -->
18
19	</header>

Darunter, zumindest auf der Homepage, gibt es einen Heldenbereich, um Besucher anzuziehen:

		<section class="hero">

			<div class="wrapper">
		
				<h2>I'd Like to Introduce You to a Friend of Mine</h2>
				
			</div> <!--/ wrapper -->
		
		</section>

Sie werden feststellen, dass jeder dieser Abschnitte bisher einen wrapper enthält. Dieser Wrapper bestimmt die Breite unseres Inhalts.

Hier ist ein weiterer Abschnitt, unser Hauptinhaltsbereich, der mit einem <aside> beginnt, in dem wir unsere sekundäre Navigation unterbringen:

		<section class="main clearfix">
		
			<div class="wrapper">	
		
				<aside class="sidebar">
				
					<ul>
						<li><a href="#">How to Skin a Rattlesnake</a></li>
						<li><a href="#">Making Money as a Taxi Driver</a></li>
						<li><a href="#">Rolling Cheese: the Correct Way</a></li>
						<li><a href="#">Photographing Leather</a></li>
					</ul>
				
				</aside><!--/ sidebar -->

Daneben unsere Schnupperartikel, um die Leute in die Blogbeiträge zu führen. Es gibt einige dieser <article>-Elemente:

			<div class="tasters">	
		
					<article>
					
						<h2>How to Skin a Rattlesnake</h2>
						
						<p class="meta">by <a href="#">Billy Tiger</a> on <a href="#">2 November 2012</a> with <a href="#">4 comments</a></p>
						
						<p>You, a bobsleder!? That I'd like to see! Bender, you risked your life to save me! No! The cat shelter's on to me. All I want is to be a monkey of moderate intelligence who wears a suit. that's why I'm transferring to business school!</p>
						
						<p><a href="#">Read more..</a></p>
						
						<hr>
					
					</article>

Nach all unseren Artikeln schließen wir alle Eltern und fügen eine einfache Fußzeile hinzu, die ein paar Links enthält:

				</div><!--/ tasters -->	
			
			</div> <!--/ wrapper -->
		
		</section><!--/ main -->
		
		<footer>
	
			<div class="wrapper">
	
				<p>&copy; Copyright Ian Yates 2012 <a class="atom-rss" href="#">RSS</a> CMS by <a href="http://www.staceyapp.com">stacey</a>
			
			</div> <!--/ wrapper -->
	
		</footer>

Puh, wir sind fertig mit dem Markup! Jetzt das CSS.

Die Vereinbarung abschließen

Unser CSS ist geradlinig. Es gibt keine einzubettenden Bilder, keine Farbverläufe, Randradiuswerte oder obskure CSS3-Effekte. Wir beginnen mit einigen Grundlagen:

/* clearfix */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

    
/* apply a natural box layout model to all elements */
* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

Ich füge diese immer ein - clearfix ist einfach sehr nützlich und * { box-sizing: border-box } ermöglicht eine brillant intuitive Art der Manipulation von Elementen.

Der Rest des CSS ist nur Styling. Es enthält die tolle Tomate namens Farbwert, in die ich derzeit verliebt bin. Das Layout folgt einem Mobile-First-Ansatz mit nur einer Medienabfrage bei 700px, um die Dinge in Spalten zu verschieben und die Basisschriftgröße zu erhöhen.

Also, Endergebnis?

Die anderen Seiten folgen mehr oder weniger dem gleichen Aufbau, was uns eine gute Arbeitsgrundlage bietet. Auf mit dem eigentlichen Tutorial!

Schritt 1: Sammeln von Stacey

Dieses Stück ist einfach; Gehen Sie zum GitHub-Repository von Stacey und laden Sie die neuesten Quelldateien (3.0 zum Zeitpunkt des Schreibens) herunter.

Vieles von dem, was Sie heruntergeladen haben, ist Demo-Zeug, sodass wir einen Großteil des Überschusses beseitigen können. Wir müssen behalten:

Der Ordner "app" und sein Inhalt.
Der Ordner "extension" und sein Inhalt.
Die Datei "htaccess".
Die Datei "index.php".

Außerdem benötigen wir folgende Ordner, diese können aber vorerst komplett geleert werden:

Der Ordner "content".
Der Ordner "public".
Der Ordner "templates".

Schritt 2: Machen Sie Bekanntschaft

Damit die Dinge tatsächlich laufen, müssen Ihre Dateien auf einem php5+-Server gehostet werden. Ob Sie dies auf Ihrem lokalen Computer oder auf einem Live-Webserver tun, liegt bei Ihnen. Auf jeden Fall, sobald Sie Ihr Projekt an der richtigen Stelle haben, besuchen Sie die Root-URL in einem Browser und..

Fairerweise haben wir alle Demo-Inhalte entfernt, also fügen wir jetzt einige erforderliche Dateien hinzu und integrieren unser Blog-Theme, damit die Dinge tatsächlich funktionieren.

Platzieren Sie zunächst die von uns erstellte index.html in den Ordner "templates" unseres Stacey-Projekts. Zweitens müssen wir einige globale Variablen setzen, also legen Sie eine Datei in den Ordner "content", nennen Sie sie "_shared.yml" oder "_shared.txt" und füllen Sie sie mit folgendem:

name: Ian Yates
profession: Web Designer
title: Staceyapp Demo | Webdesigntuts+
description: A demonstration of Stacey; a framework for building simple dynamic html websites. 
email: |
  <webdesign@tutsplus.com>

Alles wird in einem Moment klar.

Um schließlich unsere index.html zu verwenden und eine Seite anzuzeigen, fügen Sie einen Ordner namens "index" zu "content" hinzu. Fügen Sie in diesem Ordner eine Datei namens "index.yml" hinzu.

Wenn Sie nun die Seite aktualisieren, sehen Sie, dass auf unsere index.html verwiesen wird (obwohl es immer noch völlig an Stilen fehlt).

Schritt 3: Wie Staceys Verstand funktioniert

Es ist nur fair, dass ich erkläre, was dort passiert ist. Beim Öffnen einer Seite sucht Stacey nach Inhalten im Inhaltsordner. Sie wird sich immer zuerst die "_shared.yml" ansehen, dort haben wir einige globale Variablen wie den Site-Namen usw. Wenn Sie mit YAML nicht vertraut sind, stellen Sie es sich wie von Menschen lesbares Markup vor. Wir könnten hier auch eine .txt-Datei verwenden, tatsächlich erkennt und analysiert Stacey alle Arten von Dateiformaten.

Sie sucht dann nach einem Ordner, der der URL entspricht. Wir haben das Root im Browser geöffnet, also hat sie den Ordner "index" verwendet, um den Inhalt zu bestimmen. Sobald der Inhaltsordner gefunden wurde, sucht sie in diesem Ordner nach einer .txt- oder .yml-Datei. Der Name dieser bestimmten Datei ist sehr wichtig, da dieser dem Namen der Vorlage entspricht, die sie dann aus dem Ordner "templates" holt. Sie wird alles zusammenmischen und das Ergebnis im Browser anzeigen.

Das Umbenennen unserer .yml-Datei würde bedeuten, eine andere Vorlagendatei zu verwenden:

Nachdem das geklärt ist, lassen Sie uns nun unsere index.html vorzeigbar aussehen lassen.

Schritt 4: Assets verknüpfen

Wir haben unsere CSS-Dateien und unsere Favicons bereits vorbereitet, aber unser Template index.html kann sie im Moment nicht finden. Legen wir sie in den Ordner "public" und stellen Sie sicher, dass die Pfade alle an die richtige Stelle zeigen.

Der Ordner "public" wird uns dank einiger .htaccess-Assistenten direkt im Stammverzeichnis des Projekts zur Verfügung gestellt. Das heißt, wir können auf "/css/styles.css" statt auf "/public/css/styles.css" zeigen. Dazu müssen wir zunächst die "htaccess"-Datei in ".htaccess" umbenennen und sicherstellen, dass unser Server ReWrites zulässt (in den meisten Fällen wird Ihr Server diese Funktion standardmäßig haben).

Stacey stellt uns immer ein paar Variablen zur Verfügung. Zum Beispiel können wir {{ page.root_path }} ausgeben, was uns die Wurzel unseres Projekts gibt. Lassen Sie uns unsere Pfade aktualisieren, um sicherzustellen, dass das CSS und die Favicons verbunden sind:

	<!-- CSS -->
	<link rel="stylesheet" href="{{ page.root_path }}/css/normalize.css">
	<link rel="stylesheet" href="{{ page.root_path }}/css/styles.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons -->
	<link rel="shortcut icon" href="{{ page.root_path }}/img/favicon.ico" />
	<link rel="apple-touch-icon" href="{{ page.root_path }}/img/apple-touch-icon.png" />

Wenn Sie die Seite jetzt neu laden, wird die index.html genau so angezeigt, wie wir sie erstellt haben. Ausgezeichnet.

Schritt 5: Worüber redet sie?

Nun, diese geschweiften Klammern, die ich gerade verwendet habe, um eine Variable auszugeben? Sie sind Teil der Twig-Templatsprache, mit der Stacey kommuniziert. Sie müssen kein Entwickler-Genie sein, um Stacey zu verwenden, aber es gibt einige Möglichkeiten, Dinge auszugeben, die Sie beachten müssen.

Es gibt zwei Arten von Trennzeichen: {% ... %} und {{ ... }}. Ersteres wird verwendet, um Anweisungen wie for-Schleifen auszuführen, letzteres gibt das Ergebnis eines Ausdrucks an die Vorlage aus. - Twig-Dokumentation für Designer

Lassen Sie uns den gleichen Wert noch einmal verwenden, um unser Logo zur Root-URL zu verlinken:

1	<h1 class="logo">
2	<a href="{{ page.root_path }}">Demo</a>
3	</h1>

Sehen wir uns nun einige andere Variablen an; Wir haben ein paar in unserer "_shared.yml" gesetzt und Schlüssel-Wert-Paare verwendet, erinnern Sie sich? Lassen Sie uns diese Werte in unseren Metatags verwenden.

	<!-- Metaaaa -->
	<meta charset="utf-8">
	<title>{{ page.title }}</title>
	<meta name="description" content="{{ page.description }}">
	<meta name="author" content="{{ page.name }}">

Diese Werte werden aus der Datei "_shared.yml" übernommen, es sei denn, wir überschreiben die Variablen in unseren Inhaltsdateien. Wenn wir "title: Margarine" in "index.yml" definieren, wird dieser Wert ausgegeben.

Auf diese Weise können wir Variablen definieren und in den HTML-Templates ausgeben lassen. Lassen Sie uns beispielsweise ein Schlüssel-Wert-Paar für "page_title" in der "index.yml" platzieren. Wir können diese Ausgabe auch im Titel-Metatag haben:

	<!-- Metaaaa -->
	<meta charset="utf-8">
	<title>{{ page.title }} {{ page.page_title }}</title>
	<meta name="description" content="{{ page.description }}">
	<meta name="author" content="{{ page.name }}">

Wenn dieser Wert nicht verfügbar ist, wird er einfach nicht ausgegeben. Wir können jetzt für jede Seite in unserem Projekt einen bestimmten Seitentitel definieren (aber dazu kommen wir gleich). Kommt jetzt alles zusammen?

Schritt 6: Aufteilen

Bereits?! Keine Panik, ich rede davon, unsere Vorlagendateien aufzuteilen. Wenn Sie jemals eine dynamische Website erstellt haben, haben Sie gemeinsame Assets in eigene Dateien aufgeteilt. Der Header unserer index.html wird beispielsweise für alle unsere Vorlagendateien auf dieselbe Weise verwendet, sodass es keinen Sinn macht, mehrere Kopien davon zu haben. Teilen wir es in eine eigene Datei auf:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Metaaaa -->
	<meta charset="utf-8">
	<title>{{ page.title }} | {{ page.page_title }}</title>
	<meta name="description" content="{{ page.description }}">
	<meta name="author" content="{{ page.name }}">

	<!-- Viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- CSS -->
	<link rel="stylesheet" href="{{ page.root_path }}/css/normalize.css">
	<link rel="stylesheet" href="{{ page.root_path }}/css/styles.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- Favicons -->
	<link rel="shortcut icon" href="{{ page.root_path }}/img/favicon.ico" />
	<link rel="apple-touch-icon" href="{{ page.root_path }}/img/apple-touch-icon.png" />

</head>
<body>
	
		<header class="clearfix">
		
			<div class="wrapper">
		
				<h1 class="logo">
					<a href="{{ page.root_path }}">Demo</a>
				</h1>
			
				<nav>
					<ul>
						<li><a href="#">Nav Item 1</a></li>
						<li><a href="#">Nav Item 2</a></li>
						<li><a href="#">Nav Item 3</a></li>
					</ul>
				</nav>
			
			</div> <!--/ wrapper -->
			
		</header>

Alles bis zum abschließenden </header> wird in allen Vorlagen gleich sein. Schneiden Sie es aus, fügen Sie es in eine neue Datei ein und speichern Sie diese Datei als "head.html" in einem neuen Ordner "partials" im Vorlagenverzeichnis.

Jetzt müssen wir diesen Teil in unsere index.html-Vorlage aufnehmen. Fügen Sie dort, wo Sie es herausgeschnitten haben, diese Codezeile hinzu:

1	{% include 'partials/head.html' %}

Aktualisieren Sie Ihre Homepage und alles sollte genau so aussehen, wie es war, völlig unverändert. Sie können dies natürlich für einige Bereiche der index.html tun; die Fußzeile (einschließlich der schließenden </body>- und </html>-Tags) sollte in einen "footer.html"-Teil eingefügt werden, der Inhalt der Beiseite sowie die sich wiederholenden Artikelproben.

Sobald Sie fertig sind, sollten Sie ein paar Schnipsel in Ihrem "partials"-Ordner und eine etwas leichtere index.html-Vorlage haben, die wie folgt aussieht:

 
{% include 'partials/head.html' %}
	
<section class="hero">

	<div class="wrapper">

		<h2>I'd Like to Introduce You to a Friend of Mine</h2>
		
	</div> <!--/ wrapper -->

</section>

<section class="main clearfix">

	<div class="wrapper">	

		<aside class="sidebar">
		
			{% include 'partials/nav_articles.html' %}
		
		</aside><!--/ sidebar -->
	
		<div class="tasters">	

			{% include 'partials/list_articles.html' %}
			
		</div><!--/ tasters -->	
	
	</div> <!--/ wrapper -->

</section><!--/ main -->

{% include 'partials/footer.html' %}

Schritt 7: Ernst werden

Bis jetzt läuft das, was wir produziert haben, auf eine übermäßig komplizierte Version einer statischen HTML-Seite hinaus, nicht viel, worüber man nach Hause schreiben könnte. Fügen wir nun unseren Verzeichnissen einige aktuelle Inhalte hinzu, damit wir sehen können, wie sie dynamisch ausgegeben werden.

Wie ich bereits erwähnt habe, holt sich Stacey Inhalte aus dem Ordner "content". Sie greift auf die Datei "_shared.yml" zu und checkt dann aus, welcher Ordner mit der aktuellen URL übereinstimmt. Wir haben freundliche URLs aktiviert (vorausgesetzt, Sie haben Ihre .htaccess-Datei richtig umbenannt). Wenn wir also "stacey-master/cheese-burger" besuchen würden, würde sie nach einer YAML-Datei in "content/cheese-burger" suchen.

Andernfalls würde sie nach "content/1.cheese-burger" oder "content/2.cheese-burger" suchen, da wir unseren Ordnernamen auch Zahlen voranstellen können. Auf diese Weise können wir sie indizieren, wenn wir die Ordner jemals durchlaufen müssen (was wir uns gleich ansehen werden).

Wir werden unserem Ordner "content" einige Ordner hinzufügen. Wir haben einen für "Kontakt" und einen für "Über". Sie werden feststellen, dass ihnen eine Zahl vorangestellt ist, was bedeutet, dass wir sie indizieren und zu Navigationszwecken durchlaufen können.

Wir haben dann "articles", die keine eigene .yml-Datei enthalten (um zu verhindern, dass sie zusammen mit den anderen beiden aufgelistet wird) und eine Reihe nummerierter Ordner darin. Dies werden unsere Artikel sein, deren Pfade sein werden:

{root}/articles/leather
{root}/articles/rolling-cheese
{root}/articles/taxi-driver
{root}/articles/snake-skin

Schritt 8: Inhalt

Wir haben Ordner, die uns etwas Inhalt geben, also lassen Sie uns diesen Inhalt nun tatsächlich in die Ordner einfügen. Wie bereits erwähnt, benötigen wir in jedem Ordner eine .yml- oder .txt-Datei, damit Stacey weiß, welche Vorlage verwendet und welche Inhalte sie hineinpumpen soll. Ohne eine solche Datei gibt Stacey einen 404-Fehler zurück (was mich daran erinnert, dass wir irgendwann auch eine 404.html zusammenstellen müssen, lass mich das nicht vergessen..)

Legen Sie in jedem unserer "articles"-Unterordner eine leere Datei ab: "post.yml". Dies wird auf eine "post.html"-Vorlage verweisen, also duplizieren Sie die "index.html"-Vorlage und benennen Sie sie entsprechend um. Guter Anfang - wenn Sie eine der Artikel-URLs besuchen, wird jetzt zumindest eine Seite generiert, wenn auch ein Duplikat unserer Homepage.

In unserer post.yml können wir eine Reihe von Variablen angeben, die wir verwenden können, um unsere post.html-Vorlage zu füllen. Welche Werte Sie auch immer mögen, solange es sich um Schlüssel-Wert-Paare handelt, wie folgt:

1	key1: value1
2	key2: value2
3	key3: value3

Die Werte können HTML-Syntax oder (noch nützlicher) Markdown enthalten. Hinzufügen eines "|" und ein Zeilenumbruch nach dem Schlüssel rendert den Inhalt automatisch als Markdown und umschließt den Inhalt nach dem Parsen in <p>-Tags. Die "post.yml" für unseren Ordner "articles/1.leather" sieht beispielsweise so aus:

page_title: Photographing Leather
date: 7 Nov 2012
author: Stephanie Jiggers
intro: |
  You can see how I lived before I met you. When I was first asked to make a film about my nephew, Hubert Farnsworth, I thought "Why should I?" Then later, Leela made the film.
content: |
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sie erkennen den page_title als die Variable, die wir zuvor in den Meta-Titel der Seite eingefügt haben. Wir haben eine Datumszeichenfolge, einen Autor, einen Einführungsabsatz und den Inhalt angegeben. Sowohl das Intro als auch der Inhalt werden aufgrund des "|" als Markdown geparst. und der Zeilenumbruch.

Schritt 9: Aussetzen

Lassen Sie uns diese Variablen nun tatsächlich in unser post.html-Template ausgeben. Zuerst entfernen wir das gesamte <section class="hero">-Element; wir brauchen es nirgendwo anders als auf der Homepage. Als Nächstes entfernen wir die {% include 'partials/list_articles.html' %}-Anweisung aus unserem Tasters-Element.

In die verbleibende Lücke fügen wir statisches HTML wieder ein, das wir mit dynamischem Inhalt füllen können.

<article>

	<h2>Title</h2>
	
	<p class="meta">by <a href="#">Author Name</a> on <a href="#">Date</a> with <a href="#">Comments</a></p>
	
	Content
					
</article>

Ersetzen Sie nun die Werte durch die Variablen, die wir festgelegt haben:

<article>

	<h2>{{ page.page_title }}</h2>
	
	<p class="meta">by <a href="#">{{ page.author }}</a> on <a href="#">{{ page.date }}</a> with <a href="#">Comments</a></p>
	
	{{ page.content }}
					
</article>

Die Anzahl der Kommentare muss vorerst als statische Daten verbleiben, aber das klären wir später. Mit etwas Glück haben Sie so etwas:

Wiederholen Sie dies nun für alle "post.yml"-Dateien in Ihrem Artikelordner!

Schritt 10: Bedingungen

Okay, wir haben das Setzen und Ausgeben von Variablen behandelt. Schauen wir uns nun die bedingten (if)-Anweisungen von Stacey an.

Wir werden am Ende jedes Beitrags einige Links hinzufügen, um zum nächsten und vorherigen Eintrag zu navigieren. Zunächst müssen wir herausfinden, ob es Einträge (Geschwisterordner) gibt, auf die verlinkt werden kann. Glücklicherweise stellt uns Stacey zu jedem Zeitpunkt eine breite Palette von Variablen zur Verfügung; Wir haben bereits eine Reihe von Variablen innerhalb der "page." gesehen und verwendet. Umfang. Innerhalb einer Seite können wir auch page.siblings verwenden, um diese spezielle Prüfung für uns durchzuführen:

1	{% if page.siblings %}
2	<!--do something-->
3	{% endif %}

So sieht die if-Anweisung unserer Templating-Engine aus - ähnlich einer if-Anweisung in einer beliebigen Skriptsprache. Was wir hier sagen, ist "Wenn Geschwistereinträge vorhanden sind, tun Sie etwas". Lassen Sie uns einige Teiltöne einfügen, wenn es Einträge gibt, auf die verlinkt werden soll; ein Teil für einen vorherigen Link, ein anderer für einen nächsten:

1	{% if page.siblings %}
2	{% include 'partials/link_prev.html' %}
3	{% include 'partials/link_next.html' %}
4	{% endif %}

Wir müssen jetzt die Teiltöne machen, die wir Stacey gerade angewiesen haben (wenn sie nicht da sind, bekommt sie einen Wutanfall). link_prev.html enthält dies:

1	<span class="link_prev">← <a href="#">Article Title</a></span>

und link_next.html dies:

1	<span class="link_next"><a href="#">Article Title</a> →</span>

Laden Sie Ihre Seite neu, Sie sollten in etwa so aussehen:

Damit diese dynamisch generiert werden, die richtigen Titel anzeigen und auf die richtigen Beiträge verlinken, müssen wir noch einmal in den variablen Umfang von Stacey eintauchen. Wir verwenden eine for/endfor-Schleife, die jeden Wert anzeigt, der in den Variablen page.previous_sibling und page.next_sibling vorhanden ist. Da es jeweils nur einen geben kann, generieren wir einen Link mit den richtigen Angaben:

1	{% for sibling in page.previous_sibling %}
2	<span class="link_prev">← <a href="{{ sibling.url }}">{{ sibling.page_title }}</a></span>
3	{% endfor %}

und

1	{% for sibling in page.next_sibling %}
2	<span class="link_next"><a href="{{ sibling.url }}">{{ sibling.page_title }}</a> →</span>
3	{% endfor %}

Wie Sie sehen, hat Stacey alle Werte, die wir brauchen, vorbereitet und uns alle Seitendetails für die Geschwisterordner unseres aktuellen Eintrags gegeben. Brillant.

Schritt 11: Primäre Navigation

Wir werden ziemlich gut darin, oder? Wie wäre es, wenn wir weitere Werte durchlaufen und einige Links für unsere Top-Level-Seiten ausgeben? Wir platzieren diese in der Kopfzeile oben auf jeder Seite. Hier ist, was wir in partals/head.html haben:

1	<nav>
2	<ul>
3	<li><a href="#">Nav Item 1</a></li>
4	<li><a href="#">Nav Item 2</a></li>
5	<li><a href="#">Nav Item 3</a></li>
6	</ul>
7	</nav>

Wie durchlaufen wir die Ordner in unserem Stammverzeichnis? Welche Ordner sind das? Wir konzentrieren uns auf 1.about und 2.contact - dies sind die beiden, die aufgelistet werden. Um durchgeschleift zu werden, müssen sie nummeriert werden - wir werden es auch notwendig machen, dass eine .yml-Datei vorhanden ist. Wir schauen also auf Kinder in der Wurzel, und so hat Stacey sie auch für uns vorbereitet. Ersetzen Sie die Listenelemente durch diese Schleife:

	<nav>
		<ul>
			{% for child in page.root %}
				{% if child.page_title %}							
					<li><a href="{{ child.url }}">{{ child.page_title }}</a></li>
				{% endif %}	
			{% endfor %}
		</ul>
	</nav>

Sie können aus dem, was wir zuvor mit for/endfor-Schleifen gemacht haben, herausfinden, was vor sich geht. Wir haben gesagt, dass für jedes Kind, das im Stammordner ("content"-Ordner) vorhanden ist, die Details ausgegeben werden, wenn eine page_title-Variable für dieses Kind vorhanden ist. Unser Ordner "3.articles" wird in diesem Fall ignoriert.

Was Sie vielleicht überraschen wird, ist, dass Ordner in umgekehrter numerischer Reihenfolge wiederholt werden. Dies ist logisch, wenn man bedenkt, dass neuere Blogeinträge die höheren Nummern haben, die frühesten natürlich 1,2,3 usw. Die zuletzt geöffneten Ordner werden zuerst ausgegeben. Ich denke, ich werde die Nummern in meinen Ordnern "Über" und "Kontakt" umdrehen, damit sie günstiger angezeigt werden.

Damit dies tatsächlich etwas ausgibt, müssen die erforderlichen .yml-Dateien in den Ordnern 1.about und 2.contact vorhanden sein - stellen Sie also sicher, dass Sie sie haben. Auch hier müssen Sie sie "page.yml" oder etwas Ähnliches nennen und sicherstellen, dass im Vorlagenordner eine Vorlage mit diesem Namen vorhanden ist. Das alles kommt jetzt von selbst!

Schritt 12: Sekundärnavigation

Wir machen gute Fortschritte, jetzt müssen wir einen ähnlichen Satz von Links für unser Subnav ausgeben, also geben wir die vorhandenen Unterordner aus. Platzieren Sie dies im Teil "nav_articles.html":

{% for child in page.root %}
  {% if child.children %}
    <ul>
    {% for child in child.children %}
    	<li><a href="{{ child.url }}">{{ child.page_title }}</a></li>
    {% endfor %}
    </ul>
  {% endif %}
{% endfor %}

Wir sagen, dass für jedes indexierbare Kind ("1.about, 2.contact, 3.articles"), wenn dieses Kind eigene Kinder hat, ein <ul>-Element ausgegeben wird. Geben Sie für jedes dieser untergeordneten Elemente ein Listenelement mit Titel und URL aus.

Wir haben nur einen Ordner mit Kindern, unseren Ordner "articles", aber wenn wir mehr hätten, vielleicht zum Beispiel eine Mappe, dann würde auch dieser ausgegeben. In solchen Situationen kann es ratsam sein, die Untermenüs klar zu trennen, aber das ist in diesem Fall nicht zu befürchten.

Sie sollten nun ein dynamisch ausgegebenes Untermenü haben, das Sie zu jedem einzelnen Artikel verlinkt. Noch wichtiger ist, dass Sie fast eine voll funktionsfähige Website haben! Ich werde nur die Vorlage "page.html" bereinigen, indem ich die vorherigen und nächsten Links sowie alle nicht benötigten Metadaten entferne. Der Body der Vorlage sieht jetzt so aus:

			<article>
		
				<h2>{{ page.page_title }}</h2>
						
				{{ page.content }}
								
			</article>

Ziemlich einfach.

Schritt 13: Startseiteninhalt

Die Beiträge auf der Homepage entsprechen mehr oder weniger der Sekundärnavigation. Lassen Sie uns diese auf die gleiche Weise ausgeben und nach Bedarf zusätzliche Variablen und Markup-Bits hinzufügen. In partials/list_articles.html verwenden wir dasselbe für/if/for-Arrangement:

{% for child in page.root %}
  {% if child.children %}

    {% for child in child.children %}
    
    
    	
    	
    	
    {% endfor %}

  {% endif %}
{% endfor %}

Fügen wir nun das Markup zusammen mit den richtigen Variablen zur Schleife hinzu:

{% for child in page.root %}
  {% if child.children %}

    {% for child in child.children %}
    
		<article>
		
			<h2><a href="{{ child.url }}">{{ child.page_title }}</a></h2>
			
			<p class="meta">by <a href="#">{{ child.author }}</a> on <a href="#">{{ child.date }}</a> with <a href="{{ child.url }}">4 comments</a></p>
			
			{{ child.intro }}
			
			<p><a href="{{ child.url }}">Read more..</a></p>
			
			<hr>
		
		</article>
					   	
    {% endfor %}

  {% endif %}
{% endfor %}

Getan! Schauen wir uns nun einige Extras an, um die Site ein wenig aufzupeppen.

Schritt 14: Kein Kommentar

Diskussionen und Community sind oft in Blogs vorhanden, aber da wir keine Datenbank betreiben, ist es für uns schwierig, unser eigenes Kommentarsystem zu verwalten. Stattdessen stützen wir uns auf einen Drittanbieterdienst und lassen ihn die harte Arbeit für uns erledigen. Hier stehen viele Optionen zur Auswahl. Facebook ermöglicht es Ihnen, die Kommentar-API zu verwenden, die es Ihnen ermöglicht, die gesamte Leistung des weltweit größten sozialen Netzwerks zu nutzen. Eine Einschränkung bei der Entscheidung für ihren Dienst besteht jedoch darin, dass Sie die mit dieser Methode erstellten Inhalte technisch nicht besitzen. Ihre Kommentare sind nicht Ihre eigenen. Wer kann sagen, was in Zukunft passieren wird und welche Rechte Sie an den Inhalten haben oder haben möchten?

Stattdessen setzen wir heute auf Disqus, das wir kürzlich auch auf Tuts+ implementiert haben.

Gehen Sie weiter, melden Sie sich für ein kostenloses Konto an und Sie können die Details Ihrer Domains eingeben.

Nachdem Sie alle erforderlichen Angaben gemacht haben, finden Sie Optionen zum Implementieren von Disqus auf Ihrer Site. Es gibt Plugins für alle Arten von bekannten Plattformen, aber wir brauchen das universelle Einbettungs-Snippet:

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'snaptin'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Wir müssen dies in unsere Seiten einbetten, auf denen Kommentare erforderlich sind. Es liegt ganz bei Ihnen, wie Sie das machen - Sie können dies einfach kopieren und dort einfügen, wo die Kommentare erscheinen (in "post.html"), oder Sie können die Dinge in eine separate js-Datei aufteilen, wodurch die Dinge etwas sauberer bleiben .

Sie müssen das Element, in das Kommentare eingefügt werden, in die Vorlage "post.html" einfügen:

			<div id="disqus_thread"></div>

	        <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

	        <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

Ich habe es einfach unter den nächsten und vorherigen Link gesteckt. Trennen Sie nun das Javascript und legen Sie es in einer Datei in einem neuen js-Ordner innerhalb des öffentlichen Verzeichnisses ab:

//disqus snippet
var disqus_shortname = 'snaptin'; 
(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

Ich habe diese Datei disqus.js genannt und werde sie teilweise in die Fußzeile ziehen.

Hinweis: Auf einigen Seiten gibt das Skript eine kleine Warnung aus (prüfen Sie den Web-Inspektor), wenn es nach dem #disqus_thread-Div sucht und es nicht finden kann. Kein massives Problem, aber wenn Sie ein js-Genie sind und es lösen möchten, fühlen Sie sich frei!

1	<!--required js-->
2	<script src="{{ page.root_path }}/js/disqus.js"></script>

Cool! Wir haben jetzt Kommentare zu jedem Beitrag! Disqus kümmert sich für uns um alles und zeichnet Kommentare für die URL jedes Beitrags auf (wenn Sie also die URL aus irgendeinem Grund ändern, erwarten Sie, dass Ihre Kommentare verschwinden). Es ist auch schön, dass das eingefügte Markup vollständig flüssig ist (also gut in unser fluis-Layout passt) und einige der einfachen Stile übernimmt, die wir festgelegt haben, wie Linkfarben usw.

Hinterlasse ein paar Kommentare, wir brauchen sie, um das nächste Stück zu testen.

Schritt 15: Kommentare zählen

Nachdem wir Platz für den Kommentar jedes Beitrags in den Metadaten gemacht haben, wollen wir ihn nun mit einigen echten Daten füllen. Disqus ermöglicht uns dies mit einem anderen js-Snippet (das Sie in Ihrem disqus.com-Dashboard finden). Auch hier können Sie es so einfügen, wie es ist, oder einfach nehmen, was wir brauchen und es der Datei disqus.js hinzufügen:

(function () {
    var s = document.createElement('script'); s.async = true;
    s.type = 'text/javascript';
    s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());

Dadurch wird die Datei count.js abgerufen. Jetzt müssen wir mit #disqus_thread alle Links anhängen, an denen die Kommentaranzahl angezeigt werden soll. Zum Beispiel in unserer post.html:

1	<p class="meta">by <a href="#">{{ page.author }}</a> on <a href="#">{{ page.date }}</a> with <a href="{{ page.url }}#disqus_thread">Comments</a></p>

und in partials/list_article.html:

1	<p class="meta">by <a href="#">{{ child.author }}</a> on <a href="#">{{ child.date }}</a> with <a href="{{ child.url }}#disqus_thread">Comments</a></p>

Die "Comments" werden, sobald alles geladen ist, durch die mit der URL verknüpfte Kommentaranzahl ersetzt:

Schritt 16: 404

Dank der .htaccess-Datei sind wir alle eingerichtet, 404-Weiterleitungen zu verwenden, wenn jemand eine defekte URL eingibt. Jetzt müssen wir nur noch eine 404.html-Datei in den öffentlichen Ordner legen. Da diese Datei in keiner Weise von Stacey geparst wird, können wir keine Variablen oder Inhalte, die wir woanders haben, verwenden (Schade). Aus diesem Grund ist es am besten, eine eigenständige Datei zu haben, die vollständig in sich geschlossen ist und alle Stile und Inhalte direkt im HTML-Format enthält.

Folgendes ist mir (schnell) eingefallen, beachten Sie die eingebetteten Stile im Kopf des Dokuments:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Metaaaa -->
	<meta charset="utf-8">
	<title>404</title>
	<meta name="description" content="You might want to try that again.">
	<meta name="author" content="Ian Yates">

	<!-- Viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- CSS -->
	<style>
	* {margin: 0; padding 0;}
	body, html {background: tomato; font: 100%/1.5em Helvetica, Arial, sans-serif; color:white; text-align: center}
	h2 {font-size: 20em; line-height: 1em; letter-spacing: -0.05em;}
	p {font-size: 1.5em; padding: 0 0 1.5em;}
	a, a:visited {color: white; text-decoration: underline;}
	a:hover {text-decoration: none;}	
	</style>
	
	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>
<body>
		
	<h2>404</h2>
	
	<p><strong>You might want to try that again.</strong></p>
		

	<footer>

		<p>&copy; Copyright Ian Yates 2012 CMS by <a href="http://www.staceyapp.com">stacey</a>
				
	</footer>	
				
</body>
</html>

Fahren Sie fort und erstellen Sie diese Datei. Werfen Sie es in den öffentlichen Ordner und besuchen Sie dann eine unsinnige URL in Ihrem Projekt.

Schritt 17: Freunde mit Vorteilen

Stacey bietet viel mehr, direkt nach dem Auspacken, daher ist es eine gute Idee, zu den ursprünglichen Quelldateien zurückzukehren und sich anzusehen, was angeboten wird. Zum Beispiel gibt es eine RSS-Vorlage, auf die wir verlinken können und die aus dem gesamten Inhalt einen Feed generiert. Es sieht aus wie das:

<?xml version="1.0" encoding="utf-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">

  <title>{{ page.name }}'s {{ page.feed_name }}</title>
  <subtitle>{{ page.profession }}</subtitle>
  <link href="http://{{ page.base_url }}/{{ page.permalink }}" hreflang="en" rel="self" type="application/atom+xml"/>
  <link href="http://{{ page.base_url }}/" hreflang="en" rel="alternate" type="text/html"/>
  
  <updated>{{ page.site_updated }}</updated>
  <generator uri="http://staceyapp.com/" version="{{ page.stacey_version }}">Stacey</generator>

  <author>
    <name>{{ page.name }}</name>
    <uri>http://{{ page.base_url }}</uri>
  </author>

  <id>tag:{{ page.domain_name }},{{ page.current_year }}:/{{ page.permalink }}</id>
  <rights>©{{ page.current_year }} {{ page.name }}</rights>
  {% include 'partials/feed/feed-loop.atom' %}

</feed>

Wir fügen dieses "feed.atom" unserem Vorlagenordner hinzu. Wir brauchen dann auch noch ein paar Partials, die Sie im Quellcode finden, also werfen Sie auch diesen ganzen "feed"-Ordner in das Partials-Verzeichnis:

Sie können diese Atom-Dateien in jedem Text- oder Code-Editor bearbeiten. Sie können also die Art und Weise ändern, wie Ihr Feed generiert wird. In "feed-entry.atom" möchten Sie beispielsweise den Seitentitel ändern:

1	<title>{{ page.page_title }}</title>

Das setzt voraus, dass Sie die Variable zu Beginn des Tutorials geändert haben. Jetzt müssen wir den Feed verlinken, damit die Leute ihn abrufen können. Wir brauchen eine .yml-Datei im Ordner "content", dann können wir darauf verweisen. Erstellen Sie eine Datei content/feed/feed.yml und platzieren Sie diese darin:

1	feed_name: I'd like to Introduce you to Someone

und jetzt müssen wir den Link in unserer partials/footer.html aktualisieren:

1	<a class="atom-rss" href="{{ page.root_path }}/feed">RSS</a>

Getan! Auch hier können Sie die Anzeige Ihres Atom-Feeds ändern. Spielen Sie also mit Variablen in diesen Dateien.

Hinweis: Vielleicht möchten Sie auch den Json-Feed und die sitemap.xml ausprobieren, die auf die gleiche Weise funktionieren.

Schritt 18: Zusätzliche Medien

Der Inhalt unseres Blogs ist im Moment ziemlich einfallslos, nur ein paar Schnipsel Blindtext. Wir können natürlich Markdown verwenden, aber wir können noch mehr anzeigen. Stacey stellt uns einige zusätzliche Vorlagen und Funktionen zur Verfügung, die uns helfen, Bilder, Dateien und andere Medien auszugeben. Zunächst müssen wir die Teiltöne einfügen, die Sie in der Quelle finden:

Diese gehören in templates/partials/assets. Jeder verarbeitet einen anderen Dateityp (Sie können genau ändern, wie das Markup ausgegeben wird), also wie verwendet Stacey sie tatsächlich? Stacey durchsucht erneut den Inhalt der Post-Ordner und fügt alle zusätzlichen Dateien, die sie findet, zu ihrer Bank mit Seiteninformationen hinzu.

Platzieren wir zum Beispiel ein paar Bilder in unserem Post-Ordner content/3.articles/1.leather.

Danach findet Stacey die zusätzlichen Assets und indiziert sie. Fügen Sie den media.html-Teil in die post.html-Vorlage ein und Sie können loslegen!

1	{% include 'partials/assets/media.html' %}

Was Sie jetzt mit den Bildern machen, liegt bei Ihnen; Sie könnten ganz einfach ein js-Diashow-Skript (in den öffentlichen Ordner) einfügen und diese Bilder drehen lassen. Oder zeigen Sie sie mit CSS anders an. Wie du willst.

Was ist mit anderen Medientypen? Wir können Videos einbetten, aber wie wäre es mit einer YouTube-Einbettung? Das würde mit einem zusätzlichen Stück HTML geschehen. Holen Sie sich Ihren Einbettungscode:

1	<figure class="embed">
2	<iframe width="420" height="315" src="http://www.youtube.com/embed/zd7c5tQCs1I" frameborder="0" allowfullscreen></iframe>
3	</figure>

Fügen Sie es in eine neue HTML-Datei in dem Ordner ein, in dem Sie es haben möchten, und lassen Sie dann Stacey den Inhalt analysieren und die Seite generieren!

Hinweis: Die zusätzliche Figur, die ich dort um den iframe gewickelt habe, soll uns ein flüssiges Video geben. Mit diesem zusätzlichen CSS:

.embed {
	position: relative;
	padding: 0px;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.embed iframe, .embed object, .embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

wir bekommen (fast) bombensichere Fließfähigkeit.

Kaffee?

Nun, ein schöner gemeinsamer Abend ist zu Ende und ich hoffe, Ihnen zumindest die Augen für die Welt der CMS-Alternativen geöffnet zu haben. Es gibt noch viel mehr, was Sie mit einem solchen System erreichen können - ich bin gespannt, was Sie sich einfallen lassen.

Stacey ist einfach, aber leistungsstark genug, um grundlegende Blogging-Anforderungen zu erfüllen. Sie ist flexibel und offen für Vorschläge. Vielleicht gibt es hier eine Romanze, die darauf wartet, aufzublühen? Bei Fragen oder Gedanken, beschäftigt euch in den Kommentaren. Danke fürs Lesen!

Zusätzliche Ressourcen

Stacey auf GitHub
Stacey auf Twitter
Twig-Template-Sprache
Um einen lokalen MAMP-Server unter OS X einzurichten, lesen Sie Chris Coyiers First Moments with MAMP, Ryan Olsens Developing WordPress Locally With MAMP oder How to Set Up a Killer WordPress Testing Environment Locally on Nettuts+.