Die Entwicklung Mit Automad

0
32

Auswahl des richtigen CMS für ein blog oder eine website kann schwierig sein. Jedes web-Projekt hat seine eigenen Bedürfnisse und Anforderungen, was bedeutet, ein CMS kann eine bessere Passform für eine Website, aber nicht so viel für einen anderen Standort. Einfache Lösungen fehlen könnten einige wesentliche Eigenschaften, während komplexere Systeme erstellen können, ganz einfach-Aufwand, der für eine bestimmte Aufgabe.

Ich will zur Deckung Automad, ein CMS, das ist weniger bekannt, als, sagen wir, ein Ungetüm wie WordPress, aber immer noch bietet einige mächtige Funktionen, wie es unter Beibehaltung der Beweglichkeit der kleinere, einfachere Lösungen, wie z.B. statische site-Generatoren.

Insbesondere Automad füllt eine Lücke zwischen größeren und kleineren Gaben in ein paar wichtige Möglichkeiten:

  • Es ist Datei-basiert, aber nicht benötigen eine Datenbank. Dies sorgt für ein schnelles setup, Portabilität, Sicherheit, Geschwindigkeit und einfache Implementierung.
  • Auch ohne Datenbank, es bietet Datenbank-Funktionen wie suchen, taggen, filtern und Sortieren.
  • Ein multi-layer-caching-engine-caches gespeicherten Inhalte in der Datei system effizient.
  • Das browser-basierte dashboard und die in-Seite (“live”) der edit-Modus ermöglicht die intuitive content-management.

Aber was macht Automad wirklich anders ist, ist die integrierte template-engine. Templating ist eine zentrale Anforderung für die Mai-CMSs, da es erstellt und stellt die Basis für eine Website, die visuelle Darstellung. Da Automad die template-engine ist so nah an den Kern, es ermöglicht Ihnen das erstellen von Vorlagen mit komplexen Navigationen und batch-Prozess Bilder mit einem sauberen und kurze syntax. Du wirst den Unterschied spüren, sobald Sie Ihre Hände auf Sie, und wir werden zu Fuß durch ein Beispiel zusammen in nur ein bisschen.

Aber zunächst ein kurzer überblick über die templating

Als ein designer oder ein Entwickler sind, sind Sie wahrscheinlich neugierig, wie die Entwicklung von themes und templates für Automad. Ich meine, es ist die crux, warum keiner von uns wirklich ein CMS in den ersten Platz. Wenn du das getan hast, jede Ebene der Thematisierung mit WordPress, dann die Arbeit mit Automad fühlen, vage vertraut, und vielleicht sogar einfacher.

Die minimale Anforderung für die Erstellung eines Automad Thema ist eine single .php-Datei und ein Thema.json-Datei gebündelt in einem Unterverzeichnis erstellen Sie innerhalb der top-level – /packages-Verzeichnis in einem Standard-Automad installation:

Pakete/
deinthema/
yourTemplate.php
Thema.json

Das tutorial Paket verschickt mit Automad bietet einen guten Ausgangspunkt für das Verständnis der grundlegenden Konzepte der Themen.

Ein Blick auf die verwendete syntax in Automad Vorlagen

Während es möglich ist zu schreiben-Vorlagen in plain PHP ist es nicht nötig und eigentlich nicht zu empfehlen. Der Grund dafür ist, dass Automad eigenen template-syntax ist kürzer, leichter lesbar, und integriert gut mit der Benutzeroberfläche, indem Sie automatisch mit einer Liste aller Variablen, die in das Armaturenbrett. Es kann nahtlos gemischt in HTML-markup.

Grundsätzlich kann die syntax werden in zwei Gruppen geteilt:

  1. Echo Inhalt: @{ variable }
  2. Aussagen, wie Funktionen, Schleifen und Bedingungen: <@ Funktion @> und <@ Erklärung @>…<@ end @>

Echo Inhalt

Sagen wir, wir möchten, ziehen Sie den Inhalt für einen post in eine Vorlage, und wir haben eine variable zu diesem text bezeichnet. In WordPress, das wäre eine Globale variable (the_content), dass heißt in PHP:

<?php the_content(); ?>

In Automad, wir können das gleiche tun, ohne PHP:

<p>@{ text }</p>

Es ist möglich, Bearbeiten Sie die Ausgabe der Variablen übergibt den Wert an eine Funktion mit Hilfe des pipe-operators ( | ). Das folgende Beispiel zeigt, wie Sie verkürzen einem text zu einem maximum von 100 Zeichen ohne verletzende Worte:

@{ text | verkürzen (100) }

Dies wäre die gleiche Sache, die Sie tun könnten, um zu definieren, den Auszug aus einem Beitrag in WordPress unter Verwendung einer Funktion:

/* Limit Auszug zu 20 Wörter */
Funktion my_custom_excerpt_length( $length ) {
return 20;
}
add_filter( ‘excerpt_length’, ‘wpdocs_custom_excerpt_length’, 999 )
}

Einer der wichtigsten Vorteile der einige CMS-Lösungen, wie Jeykll, ist, dass mit Markdown zu erstellen, Website-content ist eine native Funktion. Automad können das gleiche tun. Sagen wir, wir wollen zum konvertieren von Markdown-text in HTML. Es ist verdammt einfach (und effizient) durch das pipe-operator:

@{ text | markdown }
Using-Anweisungen

Statements sind eine praktische Möglichkeit, um den Inhalt zu definieren und anzuzeigen, bedingt. Im Gegensatz zu Variablen, Anweisungen werden eingeschlossen in < @ … @ > – Trennzeichen. Das folgende Beispiel kann verwendet werden, um eine einfache top-level-Menü mit der nav-Funktion:

<@ nav { Kontext: “/”, Klasse: “nav” } @>

Lassen Sie uns sagen Sie, dass Sie möchten, um Ihre post-Inhalte standardmäßig zeigt aber einen fallback, wenn dieser Inhalt nicht vorhanden für einige Grund. Das ist, wo können wir bedingte Anweisungen und Kontrollstrukturen zu verwenden:

<# Wenn das post-Inhalt ist dann angezeigt wird… #>
<@ if @{ text } @>
<p>…</p>

<# Ansonsten zeigen Sie diese… #>
<@ else @>
<p>Sorry, hier kein Inhalt!</p>

<# OK, keine weiteren Bedingungen. #>
<@ end @>

Möchte eine Schleife erstellen? Dies ist, wo die Anzeige einer Liste der Beiträge oder eine wiederholbare Inhalte, entspricht einem Zustand ist super nützlich. Wir können dies in Automad durch die Bereitstellung eines oder mehrerer glob-Muster in einer foreach-Schleife.

Nehmen wir beispielsweise an, zeigt alle JPG-und PNG-Bilder für einen post abgeschnitten bei 400×300 mit Ihren Bildunterschriften:

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

Hast du das?! Wie im folgenden Beispiel gezeigt, eine Bemerkenswerte Automad feature ist die Möglichkeit zum einbetten von Skalierungs-Optionen für jede passende Datei innerhalb der loop-Anweisung. Keine komplizierten Funktionen zu registrieren, die Größen, die dann aufgerufen werden müssen in der Vorlage!

Es ist erwähnenswert, dass foreach-Schleifen können auch verwendet werden, um die Iteration über Objekte. Automad kennt mehrere Typen von Objekten. Eines der wichtigsten Objekte ist pagelist wegen seiner Fähigkeit zur Ausgabe aller Seiten auf der Website, wie Sie vielleicht tun möchten, wenn die Gebäude-navigation. Bei der Iteration einer pagelist, der Kontext ändert sich mit jeder iteration, um die aktuelle Seite in der Schleife. So ist es möglich, mithilfe von page-Variablen innerhalb der Schleife code-block.

Zum konfigurieren der pagelist, können wir die newPagelist Funktion wie diese:

<@ newPagelist { Kontext: “/”, type: “Kinder” } @>
<ul>
<@ foreach pagelist @>
<li><a href=”@{ url }”>@{ title }</a></li>
<@ end @>
</ul>
Ein sneak peek-hinter den kulissen für Sie die super-geeks 🤓

Automad template-interpreter geschrieben in reinen PHP-und it-Prozesse templates on-the-fly. Daher kein extra build-Prozess ist erforderlich. Die Liste der Systemvoraussetzungen ist auch eher kurz. Ein web-server (Apache oder Nginx), PHP 5.4+ ist schon genug, um eine site zu betreiben. Seiten werden nur gerendert, wenn der Inhalt geändert hat oder nach system-updates.

Automad multi-layer-caching-engine speichert die gerenderte Seiten zu trennen .html-Dateien sowie alle gecrawlten Daten im Dateisystem als eine Art content-Objekt. Das Objekt wird auch verwendet, um die Geschwindigkeit der Seite suchen und filtern.

Durch diesen Mechanismus ist es möglich, entweder Bearbeiten Sie die Inhalte einer Website direkt in die Produktion der online-Hilfe der browser-basierten dashboard oder Bearbeiten einer Website lokal und bereitstellen über Git oder schlicht rsync.

Lassen Sie code schreiben!

Der beste Weg, um Bekanntschaft mit nichts auf der Webseite einfach erstellen von Webseiten. Hier sind einige Beispiele, wie wir bekommen würde, mit dem begonnen, mit Automad.

Beispiel 1: Rekursive navigation

Erstellen einer Website-Struktur der navigation ist ein gutes Beispiel für die Verwendung der Rekursion in templates. Konzeptionell ist die Schaffung einer solchen rekursiven navigation teilt sich in drei Schritte:

  1. Die Definition einer wiederverwendbaren code-snippet zu erstellen, die einen einzelnen Zweig der site-Struktur, die nennt sich bedingt
  2. Konfigurieren von dynamischen pagelist, die automatisch enthält nur die Kinder von den aktuellen Kontext
  3. Definition der root-Seite der Website-Struktur (zum Beispiel auf der homepage) und rufen die rekursive snippet zunächst

Lassen Sie uns brechen diese Schritte nach unten in größerem detail…

Die Definition einer wiederverwendbaren code-snippet

In Automad, code-Blöcke definiert werden, um wiederverwendet werden zu einem späteren Zeitpunkt mithilfe des snippet-Schlüsselwort. In Bezug auf dieses Beispiel, das folgende snippet nennen sich bedingt, wenn die Schleife durch eine pagelist und die aktive Seite der Laufenden iteration hat selbst Kinder Seiten:

<@ snippet navigation @>
<ul class=”menu-list”>
<@ foreach pagelist @>
<li>
<a href=”@{ url }”>@{ title }</a>
<# Snippet-Aufruf rekursiv. #>
<@ navigation @>
</li>
<@ end @>
</ul>
<@ end @>
Konfigurieren von dynamischen pagelist

Die pagelist konfiguriert werden, eine für Kinder geben. Der Kontext (oder die Eltern-Seite) ändert sich immer rekursiv in das snippet oben definiert sind, dass Art und Weise. Die pagelist wird automatisch nur die Kinder Seiten des aktuell bearbeiteten Seite.

<@ newPagelist {
Typ: ‘Kinder’
} @>
Definition der root-Seite

Im letzten Schritt wird das root-Kontext der Navigationsbaum definiert und das snippet muss einmal aufgerufen werden, um zu initiieren, die Rekursion. Die with-Anweisung wird hier verwendet, um den Kontext zu ändern, um die homepage.

<div class=”menu”>
<@ mit ‘/’ @>
<@ navigation @>
<@ end @>
</div>

Einen kompletten Arbeitstag tutorial-Vorlage ist bereits im Preis enthalten Automad.

Beispiel 2: Arbeiten mit Dateien

Da Bilder sind super wichtig für content-management, mit Ihnen zu arbeiten sollte so einfach und intuitiv wie möglich zu machen. Automad die template-Sprache bietet praktische Methoden für grundlegende Bildbearbeitung, wie Größenänderung und zuschneiden. Wenn Sie eine einzelne Bild-oder Durchlaufen eine Reihe von Bildern, Größenänderung Optionen übergeben werden können, um eine with-Anweisung oder foreach-Schleife. Überprüfen Sie heraus die