YAML Syntax in Theme Config auslesen

home pico yaml

JavaScript das umfassende Handbuch. JavaScript objektorientiert lernen und verstehen   -  Ein umfassender Einstieg in JavaScript, viele praktische Beispiele und eine Darstellung auch professioneller Techniken - all das zeichnet dieses unverzichtbare Handbuch aus. Es eignet sich sowohl für Anfänger, die JavaScript von Grund auf lernen, als auch für Fortgeschrittene und Profis, die wissen wollen, wie man moderne, dynamische Webanwendungen entwickelt. Hier finden Sie alle wichtigen Techniken - Ajax, jQuery, Node.js, DOM und mehr. Entdecken Sie die neuesten Trends, Techniken und Entwicklungen bis hin zur Steuerung von Microcontrollern. Machen Sie sich mit Objektorientierung, ECMAScript 21 und funktionaler Programmierung vertraut und profitieren Sie von zahlreichen praxisnahen Beispielen für den sofortigen Einsatz. Das perfekte Lehrbuch für moderne Webentwickler!

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Die YAML Syntax anhand einer Liste erläutert, die beispielsweise Affiliate oder CTA Links aufnimmt und die vom Twig-Template ausgelesen werden können.

YAML Syntax in Pico CMS

Wenn Sie in Pico CMS ein Theme bearbeiten oder selbst erstellt haben, dann werden Sie bestimmt über die im Theme-Ordner vorhandene Datei:

pico-theme.yml

Code

gestolpert sein. Diese YAML-Datei nimmt lokale Theme Attribute auf, die speziell in diesem Theme erreichbar sein sollen und die übergeordnete config/config.yml überlagern sollen.

YAML bzw. YML ist eine strukturierte Datei für die Serialisierung (speichern) von Objekten und Daten, sie ist mit JSON oder XML verwandt, bietet jedoch eine noch leichtere Lesbarkeit für den Menschen. Gegenüber JSON, können in YAML auch Kommentare hinterlassen werden.

Eine YAML Liste anlegen

Legen Sie beispielsweise die folgende Liste in der Datei pico-theme.yml an, um einige Affiliate- oder CTA- Werbe-Links durch das Pico Theme auszulesen und anzuzeigen.

017  affiliate:
018      - cta:
019        active:       on
020        title:        WordPress 5
021        description:  Starten Sie mit WordPress 5 durch...
022        tag:          ['tag1','tag2','tag3','tag4']
023        link:         http...link 1
024      - cta:
025        active:       off
026        title:        GIMP-Handbuch
027        description:  Starten Sie mit GIMP durch...
028        tag:          ['tag1','tag2','tag3','tag4']
029        link:         http...link 2

Code

Sie legen auf oberster Ebene das Objekt affiliate an, welches eine Liste mit zwei cta Objekten enthält, welche die Attribute title, description und link enthalten.

Achten Sie penibel auf die korrekte Einrückungstiefe im YML, da der Parser überaus empfindlich auf falsche Einrückung reagiert - er quittiert es meist mit einem Abbruch.

YML Liste im Pico Twig-Theme auslesen

Wollen Sie diese Liste im Pico Theme und Template auslesen, dann können Sie dies mit dem folgenden Codeschnipsel realisieren:

056  {% for key in config.theme_config.affiliate %}
057      <p>          {{ key.title }}       </p>
058      <p>          {{ key.description }} </p>
059      <p>          {{ key.tag[0] }}      </p>
060      <a href="#"> {{ key.link }}        </a>
061  {% endfor %}

Code

Hinweis - Zeile 59 liest das erste Schlagwort aus der Tag-Liste des YAML aus. Für weitere, müssen Sie mit Twig iterieren.

boolean in YAML

Wenn Sie mögen, können Sie auch booleans in YAML verwenden. Die folgenden Values werden von YAML unterstützt:

active: on
active: off
active: yes
active: no

Code

Arrays in YAML

Auch Arrays sind problemlos mit der folgenden Syntax realisierbar:

key: ['keyword-1','keyword-2']

Code

Sie erhalten dann ein iterierbares Objekt, welches Sie mit einer Schleife iterieren müssen, um die Inhalte zu erhalten.

YAML Listen sind eine super Sache, denn Sie können dynamische Inhalte sehr schnell einbauen und das Pico Theme kann diese für den Leser zur Anzeige bringen. Solche YAML Listen können daher sehr gut für Affiliate oder CTA auf Ihrer Webseite genutzt werden. Zudem ist die YAML-Datei klein, lässt sich leicht pflegen und ist auch ruckzuck auf Ihre Webseite hochgeladen - ideal für kurze und spontane Interventionen.

Hinweis - Das oben gezeigte Coding bezieht sich auf die Template-Sprache Twig Symfony und muss für andere Parser entsprechend angepasst werden.

Sie können eigene YAML Listen natürlich auch in der Datei config/config.yml vornehmen, es hat die selbe Wirkung, da diese YAML-Datei ebenfalls von Pico eingelesen wird, allerdings für alle Themes dann gleichermaßen wirkt.

Merhzeiliger Inhalt in YAML

Sie können in YAML Inhalt in Form von Text mindestens in einer Zeile problemlos unterbringen, doch was ist wenn der Text mal länger und größer wird? Kein Problem, denn Sie können durchaus mehrzeiligen Content in YAML erzeugen. Laut der Definition der YAML Syntax, sind dafür zwei Token zuständig, zum einen ist es > (spitze Klammer) oder | (Pipe).

001  key1: >
002      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
003      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
004      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
005      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy...
006  key2: >
007      Lorem ipsum...

Code

Leiten Sie das Value mit > ein, dann können Sie mehrere Zeilen mit Inhalt füllen, die als zusammenhängendes value für key gelten.

Damit dies funktioniert, ist es wichtig, das die Einrückung des mehrzeiligen Textes auf die identische Spaltentiefe erfolgt. Ein etwaiger Umbruch (Linefeed, Return) am Ende des Textes wird natürlich ignoriert.

Das headless CMS Pico setzt als Datenspeicher konsequent auf YAML und bezieht von dort seine Konfiguration, Einstellungen und den eigentlichen Webseitencontent. Die YAML Syntax ist in Pico CMS vollumfänglich gültig, da Bibliotheken aus dem Twig-Symfony-Framework verwendet werden.


 28.01.2024    Kontakt@Oliver-Lohse.de    YAML Syntax

Moderne Frontend-Entwicklung mit React. Alles, was Sie über React wissen müssen!   -  Welcher Frontendentwickler hat noch nicht von React gehört? Diese ursprünglich von Facebook entwickelte JavaScript-Bibliothek hat innerhalb kurzer Zeit eine steile Karriere hingelegt. Sie bildet mittlerweile eine wichtige Grundlage für viele Unternehmensanwendungen, Single Page-Applikationen, sowie viele Apps für iPhone und Android. Erfahren Sie in diesem umfassenden Handbuch des JavaScipt-Experten Sebastian Springer, wie Sie performante Oberflächen gestalten. Mit einfachen und leicht verständlichen Beispielen erlernen Sie die Grundlagen von React, React Native und Redux. Und auch als fortgeschrittener JavaScript-Entwickler profitieren Sie von den vielen Profithemen wie Tests, Animationen, Material Design Components, Server Side Renderung über Debugging bis hin zur Entwicklung von vollständigen mobilen Anwendungen. Dieses Buch ist ein Muss für jeden JavaScript-Entwickler und für jeden, der React lernen möchte!

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Weitere passende Beiträge

de.json als SVG Bibliothek, Texte, Arrays

 bludit  JSON YAML XML


Nutzen Sie die de_DE.json Sprachdatei als Ablageort für SVG-Icons im Template. Der Beitrag zeigt Ihnen, wie Sie diese Icons aus dem Template laden und anzeigen

Parameter in config.yml erstellen und lesen

 pico  YAML Config


Die Datei config.conf speichert im YAML-Format Variablen ab auf die Sie aus den Templates zugreifen und verarbeiten können. Dies ist das Setup der Webseite

Hervorgehobene Beiträge Sticky Posts

 pico  YAML Syntax Featured Sticky


Sie können Beiträge auf Ihrer Webseite nach oben oder auf die Startseite schieben, indem Sie ihnen ein neues Meta-Attribut geben.

Heredoc Mini CMS mit PHP

 php  Heredoc XML JSON YAML


Dieser Beitrag zeigt einen Heredoc Template Parser und mini CMS, erstellt in PHP, unter Nutzung der Heredoc-Syntax. Content, Template und Parser in einer Datei.

Affiliate Links mit YAML und TWIG

 pico  Affiliate CTA YAML


Zufällige Affiliate-Links ohne externe Plugins mit Hilfe von YAML und der Templatesprache Twig in Pico CMS realisieren, das ist sogar wirklich sehr einfach.

Impressum


CMSWorkbench.de ist eine reine Entwickler-Webseite und dient vorwiegend als Wissensspeicher für die Entwicklung von CMS

Datenschutz


Die Webseite verwendet keinerlei Tracking- oder Speicher-Mechanismen, die Rückschlüsse auf Ihre IP oder das Leseverhalten zulassen

Affiliate


Wir sind Mitglied im Amazon Partnernet und können mit Affiliate-Links (* den Betrieb der Seite etwas unterstützen, für Sie ist das natürlich kostenlos

Kontakt


Sie können mit uns über eMail Kontakt aufnehmen, schreiben Sie an Kontakt@Oliver-Lohse.de