Developing With Automad

Die Auswahl des richtigen CMS für einen Blog oder eine Website kann schwierig sein. Jedes Webprojekt hat seine eigenen Bedürfnisse und Anforderungen, was bedeutet, dass ein CMS für eine Website besser geeignet sein mag als für eine andere. Einfachen Lösungen fehlen möglicherweise einige wesentliche Funktionen, während komplexere Systeme für eine bestimmte Aufgabe leicht zu viel Overhead erzeugen können.

Ich möchte Automad vorstellen, ein CMS, das weniger bekannt ist als beispielsweise ein Gigant wie WordPress, aber dennoch einige leistungsstarke Funktionen bietet und gleichzeitig die Wendigkeit kleinerer, einfacherer Lösungen wie statischer Site-Generatoren beibehält.

Insbesondere schließt Automad in mehrfacher Hinsicht eine Lücke zwischen größeren und kleineren Angeboten:

• Es ist dateibasiert, benötigt aber keine Datenbank. Dies gewährleistet eine schnelle Einrichtung, Portabilität, Sicherheit, Geschwindigkeit und einfache Bereitstellung.
• Selbst ohne Datenbank bietet es Datenbankfunktionen wie Suchen, Tagging, Filtern und Sortieren.
• Eine mehrschichtige Caching-Engine speichert im Dateisystem gespeicherte Inhalte effizient zwischen.
• Das browserbasierte Dashboard und der In-Page ("Live")-Bearbeitungsmodus ermöglichen eine intuitive Inhaltsverwaltung.

Aber was Automad wirklich anders macht, ist seine integrierte Template-Engine. Templating ist eine Kernanforderung für viele CMS, da es die visuelle Darstellung einer Website erstellt und festlegt. Da die Template-Engine von Automad so nah am Kern ist, können Sie damit Vorlagen mit komplexen Navigationen erstellen und Bilder in Stapelverarbeitung mit einer sauberen und kurzen Syntax verarbeiten. Sie werden den Unterschied spüren, sobald Sie damit arbeiten, und wir werden gleich ein Beispiel gemeinsam durchgehen.

Aber zuerst ein kurzer Überblick über Templating

Als Designer oder Entwickler sind Sie wahrscheinlich neugierig, wie man für Automad Themes und Templates entwickelt. Ich meine, das ist der Kern, warum wir überhaupt ein CMS nutzen. Wenn Sie sich bereits mit Theming mit WordPress beschäftigt haben, wird Ihnen die Arbeit mit Automad vage bekannt vorkommen und vielleicht sogar einfacher sein.

Die minimale Voraussetzung für die Erstellung eines Automad-Themes ist eine einzelne .php-Datei und eine theme.json-Datei, die zusammen in einem Unterverzeichnis gebündelt sind, das Sie in einem Standard-Automad-Installationsverzeichnis in /packages erstellen.

packages/
  yourTheme/
    yourTemplate.php
    theme.json

Das mit Automad gelieferte Tutorial-Paket bietet einen guten Ausgangspunkt für das Verständnis der grundlegenden Konzepte von Themes.

Ein Blick auf die in Automad-Templates verwendete Syntax

Obwohl es möglich ist, Templates in reinem PHP zu schreiben, ist dies nicht erforderlich und wird sogar nicht empfohlen. Der Grund dafür ist, dass die eigene Template-Syntax von Automad kürzer, lesbarer ist und sich gut in die Benutzeroberfläche integriert, indem sie automatisch alle verwendeten Variablen im Dashboard auflistet. Sie kann nahtlos in HTML-Markup gemischt werden.

Grundsätzlich kann die Syntax in zwei Gruppen unterteilt werden:

1. Ausgabe von Inhalten: @{ variable }
2. Anweisungen, wie Funktionen, Schleifen und Bedingungen: <@ function @> oder <@ statement @>…<@ end @>

Inhalte ausgeben

Nehmen wir an, wir möchten den Hauptinhalt eines Beitrags in eine Vorlage ziehen und haben dafür eine Variable namens text eingerichtet. In WordPress wäre dies eine globale Variable (the_content), die in PHP aufgerufen wird.

<?php the_content(); ?>

In Automad können wir dasselbe ohne PHP tun.

<p>@{ text }</p>

Es ist möglich, die Ausgabe von Variablen zu manipulieren, indem der Wert mithilfe des Pipe-Operators (|) an eine Funktion übergeben wird. Das folgende Beispiel zeigt, wie ein gegebener Text auf maximal 100 Zeichen gekürzt wird, ohne Wörter abzuschneiden.

@{ text | shorten (100) }

Dies wäre dasselbe, was Sie vielleicht tun würden, um den Auszug eines Beitrags in WordPress mithilfe einer Funktion zu definieren.

/* Limit excerpt to 20 words */
function my_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 )
}

Einer der Hauptvorteile einiger CMS-Lösungen wie Jeykll ist, dass die Verwendung von Markdown zur Erstellung von Website-Inhalten eine native Funktion ist. Automad kann dasselbe tun. Nehmen wir an, wir möchten Markdown-Text in HTML konvertieren. Mit dem Pipe-Operator ist das ziemlich einfach (und effizient).

@{ text | markdown }

Verwendung von Anweisungen

Anweisungen sind eine praktische Möglichkeit, Inhalte zu definieren und sie bedingt anzuzeigen. Im Gegensatz zu Variablen sind Anweisungen in <@ … @>-Begrenzern eingeschlossen. Das folgende Beispiel kann verwendet werden, um ein einfaches Menü auf oberster Ebene zu erstellen, indem die nav-Funktion verwendet wird.

<@ nav { context: "/", class: "nav" } @>

Nehmen wir an, Sie möchten standardmäßig den Inhalt Ihres Beitrags anzeigen, aber einen Fallback anzeigen, falls dieser Inhalt aus irgendeinem Grund nicht vorhanden ist. Hier können wir bedingte Anweisungen und Kontrollstrukturen verwenden.

<# If the post content exists then display... #>
<@ if @{ text } @>
  <p>...</p>

<# Otherwise, display this... #>
<@ else @>
  <p>Sorry, no content here!</p>

<# OK, no more conditions. #>
<@ end @>

Möchten Sie eine Schleife erstellen? Hier ist es super nützlich, eine Liste von Beiträgen oder beliebige wiederholbare Inhalte anzuzeigen, die einer Bedingung entsprechen. Dies können wir in Automad tun, indem wir ein oder mehrere Glob-Muster in einer foreach-Schleife angeben.

Zum Beispiel: Lassen Sie uns alle JPG- und PNG-Bilder eines Beitrags anzeigen, zugeschnitten auf 400x300, mit ihren Bildunterschriften.

<@ foreach in "*.jpg, *.png" { width: 400, height: 300, crop: true } @>
  <img src="@{:fileResized}" width="@{:widthResized}" height="@{:heightResized}">
  <p>@{:caption}</p>
<@ end @>

Haben Sie das bemerkt?! Wie dieses Beispiel zeigt, ist eine bemerkenswerte Funktion von Automad die Möglichkeit, Größenänderungsoptionen für jede passende Datei innerhalb der Schleifenanweisung einzubetten. Keine komplizierten Funktionen mehr, um Größen zu registrieren, die *dann* in der Vorlage aufgerufen werden müssen!

Es ist erwähnenswert, dass foreach-Schleifen auch verwendet werden können, um über Objekte zu iterieren. Automad kennt mehrere Objekttypen. Eines der wichtigsten Objekte ist pagelist, da es alle Seiten der Website ausgeben kann, wie Sie es beim Erstellen von Navigationen wünschen könnten. Beim Iterieren einer pagelist ändert sich der Kontext mit jeder Iteration zur aktuellen Seite in der Schleife. Auf diese Weise ist es möglich, Seitenvariablen innerhalb des Codeblocks der Schleife zu verwenden.

Um die pagelist zu konfigurieren, können wir die newPagelist-Funktion wie folgt verwenden:

<@ newPagelist { context: "/", type: "children" } @>
<ul>
  <@ foreach in pagelist @>
    <li><a href="@{ url }">@{ title }</a></li>
  <@ end @>
</ul>

Ein kleiner Einblick hinter die Kulissen für euch Super-Nerds 🤓

Der Template-Interpreter von Automad ist in reinem PHP geschrieben und verarbeitet Templates on the fly. Daher ist kein zusätzlicher Build-Prozess erforderlich. Die Liste der Systemanforderungen ist ebenfalls recht kurz. Ein Webserver (Apache oder Nginx) und PHP 5.4+ reichen bereits aus, um eine Website zu betreiben. Seiten werden nur gerendert, wenn sich Inhalte geändert haben oder nach System-Updates.

Die mehrschichtige Caching-Engine von Automad speichert die gerenderten Seiten in separaten .html-Dateien sowie alle gecrawlten Daten im Dateisystem als eine Art Content-Objekt. Dieses Objekt wird auch verwendet, um die Seitensuche und -filterung zu beschleunigen.

Aufgrund dieses Mechanismus ist es möglich, entweder den Inhalt einer Website direkt in der laufenden Produktion online über das browserbasierte Dashboard zu bearbeiten oder eine Website lokal zu bearbeiten und sie über Git oder einfaches rsync bereitzustellen.

Lasst uns Code schreiben!

Der beste Weg, sich mit etwas im Web vertraut zu machen, ist, einfach Websites zu bauen. Hier sind einige Beispiele, wie wir mit Automad damit beginnen würden.

Beispiel 1: Rekursive Navigation

Die Erstellung einer Website-Baum-Navigation ist ein gutes Beispiel für die Verwendung von Rekursion in Templates. Konzeptionell kann die Erstellung einer solchen rekursiven Navigation in drei Schritte unterteilt werden:

1. Definieren eines wiederverwendbaren Code-Snippets zur Erstellung eines einzelnen Astes des Website-Baums, das sich bedingt selbst aufruft.
2. Konfigurieren einer dynamischen pagelist, die automatisch nur Kinder ihres aktuellen Kontexts enthält.
3. Definieren der Wurzelseite des Website-Baums (z. B. der Homepage) und erstmaliges Aufrufen des rekursiven Snippets.

Zerlegen wir diese Schritte im Detail...

Definieren eines wiederverwendbaren Code-Snippets

In Automad können Codeblöcke mit dem Schlüsselwort snippet definiert werden, um sie später wiederzuverwenden. Bezüglich dieses Beispiels ruft das folgende Snippet sich bedingt selbst auf, wenn es durch eine pagelist iteriert und die aktive Seite der aktuellen Iteration selbst Unterseiten hat.

<@ snippet navigation @>  
  <ul class="menu-list">       
    <@ foreach in pagelist @>
      <li>
        <a href="@{ url }">@{ title }</a>
        <# Call snippet recursively. #>
        <@ navigation @>
      </li>
    <@ end @>
  </ul>
<@ end @>

Konfigurieren einer dynamischen pagelist

Die pagelist muss als children-Typ konfiguriert werden. Der Kontext (oder die Elternseite) ändert sich im obigen Snippet auf diese Weise rekursiv. Die pagelist enthält dann automatisch nur die Unterseiten der gerade verarbeiteten Seite.

<@ newPagelist { 
  type: 'children'
} @>

Definieren der Wurzelseite

Im letzten Schritt muss der Stammkontext des Navigationsbaums definiert und das Snippet einmal aufgerufen werden, um die Rekursion zu initiieren. Die with-Anweisung wird hier verwendet, um den Kontext zur Homepage zu ändern.

<div class="menu">
  <@ with '/' @>
    <@ navigation @>
  <@ end @>
</div>

Ein vollständiges funktionierendes Tutorial-Template ist bereits in Automad enthalten.

Beispiel 2: Arbeiten mit Dateien

Da Bilder für die Inhaltsverwaltung von entscheidender Bedeutung sind, sollte die Arbeit mit ihnen so einfach und intuitiv wie möglich sein. Die Template-Sprache von Automad bietet praktische Methoden für grundlegende Bildbearbeitungsaufgaben wie Größenänderung und Zuschneiden. Beim Verwenden eines einzelnen Bildes oder beim Iterieren über eine Reihe von Bildern können Größenänderungsoptionen an eine with-Anweisung oder eine foreach-Schleife übergeben werden. Schauen Sie sich das Tutorial an, das mit Automad geliefert wird, um schnell loszulegen.

<@ foreach in '*.jpg, *.png' { width: 400, height: 300, crop: true } @>
  <# Code to be used for each image in the filelist. #>
  <img 
  src="@{ :fileResized }" 
  alt="@{ :basename }"
  title="@{ :file }"
  width="@{ :widthResized }"
  height="@{ :heightResized }"
  >
  <p>@{ :caption | markdown }</p>
<@ else @>
  <# Code to be used when the list of images is empty. #>
<@ end @>

Anstatt ein Glob-Muster in der foreach-Schleife zu verwenden, ist es auch möglich, das filelist-Objekt zu verwenden.

Wenn Sie sich den obigen Beispielcode ansehen, werden Sie die Verwendung bestimmter Laufzeitvariablen bemerken, um auf Bildeigenschaften innerhalb eines Codeblocks zuzugreifen. Während die Variable :file die Originaldatei darstellt, bezieht sich :fileResized auf den Pfad der größenveränderten und gecachten Version. Die Variable :caption ermöglicht es Ihnen, den Begleittext zu erhalten, der zusammen mit der Datei gespeichert ist.

---

Was werden Sie bauen?

Wir haben hier nur an der Oberfläche von Automad gekratzt, aber hoffentlich gibt Ihnen alles, was wir behandelt haben, eine gute Vorstellung von den Möglichkeiten, die es für die Inhaltsverwaltung bietet. Während es in der CMS-Welt keine Einheitslösung gibt, wird es wahrscheinlich Szenarien geben, in denen ein CMS, das irgendwo zwischen den robusten und den schlanken Optionen angesiedelt ist, nützlich sein wird.

Additional Resources

• Automad Dokumentation
• Tutorials
• Demo-Themes