de.json als SVG Bibliothek, Texte, Arrays

home bludit

ChatGPT - Alltägliche Aufgaben mit Prompts meistern   -  Du möchtest wissen, wie du KI richtig nutzt und davon profitieren kannst? Dann wird dir dieses Workbook eine große Hilfe sein. Rainer Hattenhauer zeigt anhand einer Vielzahl praktischer Beispiele aus den unterschiedlichsten Anwendungsbereichen ganz konkret, wie KI dein Leben erleichtern kann. Egal ob du Texte verfassen, recherchieren, Bilder generieren oder deinen eigenen Programmcode erstellen möchtest. Hier kannst du auch ohne Vorkenntnisse direkt loslegen und die gängigen KI-Frontends ausprobieren. Inklusive ChatGPT, DALL-E 2, Midjourney, DeepL Write etc.

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.

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

Als SVG-Icon Bibliothek nutzen

Einen praktischeren Einsatz für die Verwendung der Language-Datei de_DE.json ist die Nutzung als Icon-Bibliothek. Legen Sie beispielsweise eine Liste von SVG-Icons dort ab die Sie in Ihren Templates zentral nutzen möchten.

001  {
002      "theme-data":
003      {
004          "name": "Theme Name",
005          "description": "Theme Beschreibung"
006      },
007      "icon_tags":"<svg...  ...</svg>",
008      "icon_user":"<svg... ...</svg>",
009      "icon_date":"<svg... ...</svg>",
010      "icon_comments":"<svg... ...</svg>",
011      "icon_share":"<svg... ...</svg>"
012  }

Code

Binden Sie das SVG-Icon in Ihrem Template mit dem folgenden Aufruf ein:

...
<?php $L->get('icon_tags'); ?>
...

Code

Einenen Großteil der SVG-Icons können Sie aus dem Bootstrap-CSS nutzen und vor dort die gewünschten SVG-Daten zusammentragen und in der de_DE.json sammeln bzw. einbinden.

Hinweis: Der große Vorteil dieser Variante der Icon-Sammlung liegt darin, das Sie diese nicht als SVG, JPG oder PNG separat im Image-Verzeichnis IMG des Themes liegen haben müssen. Greifen Sie einfach über den Namen auf das Icon zu - ganz einfach. Zudem das $L-Objekt bereits geladen ist, muss es nicht mit global referenziert werden und Sie können die Methode get() sofort nutzen.

Für Textbausteine nutzen

Jedem Theme liegt im gesonderten Ordner languages eine Sprachdatei im JSON-Format vor. Für die deutsche Installation des CMS Bludit ist es die Datei de_DE.json. Die Sprachdatei wird beim Start des CMS geladen und steht im $L-Objekt für den Zugriff bereit.

Möchten Sie beispielsweise einen festen Hinweis auf eine Versionsnummer oder Copyright in Ihrem Template einbinden, dann können Sie das in die Datei:

../bl-theme/languages/de_DE.json

Code

ganz einfach wie im folgenden Beispiel eintragen:

001  {
002      "theme-data":
003          {
004              "name": "ThemeName",
005              "description": "Das Beispiel-Theme ..."
006          },
007      "about-theme":"(c) Oliver Lohse - Kontakt@Oliver-Lohse.de"
008  }

Code

Die Zeilen 001...006 finden Sie bereits in der Sprachdatei des betroffenen Templates vor. Ergänzen Sie das Komma in Zeile 006 und tragen einen Key-Value Paar in Zeile 007 ein und speichern das ganze ab.

Möchten Sie den Inhalt in einem Template speichern, dann können Sie den Aufruf wie folgt umsetzen:

...
046  <?php 
047      global $L;
048      echo $L->get('about-theme'); 
049  ?>
...

Code

Je nachdem wo Sie die Einbindung in Ihrem Theme vornehmen, erscheint dann die hinterlegte CR-Information im Laufe der Seite für den Leser.

Einblendungen auf bestimmten Seiten gefällig?

Möchten Sie hingegen, das solche Einblendungen auf bestimmten individuellen Seiten Ihres Blogs erfolgen, dann tragen Sie doch den Beitrags-Slug (das ist der SEO-URL-Name) als Key wie folgt ein:

...
006          },
007      "global-climate-problems":"Sichern Sie sich einen Platz auf der Arche"
008  }
...

Code

Ruft Ihr Template den Beitrag global-climate-problems auf, liest das folgende Codeschnipsel den dazu passende Text aus:

...
048      echo $L->get($page->slug());
...

Code

Allerdings müssen Sie zuvor durch eine geeignete Abfrage sicherstellen, das dieser Beitrags-Slug auch einen Eintrag in der de_DE.json Datei hat, denn sonst erhalten Sie immer die Anzeige des Slug in Ihrem Template - und das wollen Sie ja nicht. Etwa so:

046  <?php 
047      global $L;
048      if($L->get($page->slug()) != $page->slug()) {;
049          echo $L->get($page->slug());
050      }
051  ?>

Code

Hinweis: die Abfrage if($L->get($page->slug())) würde nicht zum Ziel führen, da der get() im Falle des Nichtexistierens eines Values mindestens den Slug wieder an den Aufrufer zurückgibt, er liefert folglich immer eine gültige Rückgabe (true). Daher muss der IF abfragen, ob es nicht der Slug ist der zurück gegeben wird.

Praxistipp: Sie können mit dieser Technik inhaltsbezogene Banner, Affiliate- oder CTA-Links für jeden Beitrag individuell anzeigen und einblenden - das ist toll (das funktioniert auch für Kategorien). Allerdings erhalten Sie bei großen Webseiten schnell ein Problem: Ändern Sie nachträglich einen Beitrags-Slug, dann müssen Sie diese Änderung auch in der de_DE.json vornehmen. Sollten Sie dies vergessen, erhalten Sie keine Einblendung in dem betreffenden Beitrag mehr - und irgendwann verlieren Sie den Überblick. Der Pflegeaufwand wird früher oder später sehr groß werden und Sie sollten dann doch eher zu einem Plugin greifen das diese Arbeit erledigt. Zudem ist der Zugriff für den Autor über das Backend nicht möglich, die Änderungen müssen vom Admin mit FTP-Zugang vorgenommen werden - es sei denn Sie sind selbst der Admin.

de_DE.json für Arrays nutzen

Bislang haben Sie die Angabe von einzelnen Key-Value-Paaren in der Language-Datei bl-themes/theme/de_DE.json kennengelernt. Natürlich ist es auch dort möglich Arrays abzulegen und aus dem Template auf Array-Variablen in der Json-Datei zuzugreifen.

001  {
002      "theme-data":
003      {
004          "name": "Lowpass",
005          "description": "Ein freundliches Layout."
006      },
007      "cta": 
008      {
009          "key1":"value1",
010          "key2":"value2"
011      }
012  }

Code

Legen Sie beispielsweise das Array cta ab Zeile 007 mit einigen Key-Value Paaren als Demonstration an.

Auf das Array zugreifen

Im Template können Sie auf einzelne Keys des Arrays cta wie im folgenden Coding zugreifen, um die Values auszulesen:

<?php echo $L->get('cta')['key1']; ?>

Code

Das Template zeigt in Folge dessen

value1

Code

an.

Iteration

Genau so gut können Sie durch die Schlüssel mit einer PHP-Schleife iterieren, denn cta ist ein iterierbares Objekt wie es in der PHP-Sprachdefinition für foreach heißt.

<?php 
    foreach($L->get('cta') as $key) {
        echo $key; 
    }
?>

Code

Auch hier zeigt das Template beim Aufruf durch die Schleife:

value1value2

Code

den vollständigen Inhalt von cta an, also value1 und value2.

Mehrdimensionales Array

Möchten Sie beispielsweise Produkt-Gruppen bilden, dann empfiehlt es sich ein mehrdimensionales Array anzulegen, beispielsweise ein Array für CTA und Affiliate-Links. Im Beispiel unten nimmt das cta-Array zwei Buchempfehlungen WordPress 5 und WordPress 5 Das Praxisbuch auf. Sie können diese Produktempfehlungen ganz nach belieben erweitern oder anpassen.

001  {
002      "theme-data":
003      {
004          "name": "Lowpass",
005          "description": "Ein freundliches Layout."
006      },
007      "cta":
008      {
009          "wordpress-5": 
010          {
011              "titel":"Wordpress 5",
012              "beschreibung":"Erstellen Sie einen Blog oder eine Website..",
013              "image":"https://www.amazon.de/.../wp5.png",
014              "link":"https://www.amazon.de/..." 
015          },
016          "wordpress-5-praxisbuch": 
017          {
018              "titel":"WordPress 5 Das Praxisbuch",
019              "beschreibung":"WordPress ist weltweit das beliebteste CMS-Tool...",
020              "image":"https://www.amazon.de/.../wp5-praxisbuch.png",
021              "link":"https://www.amazon.de/..." 
022          }
023      }
024  }

Code

Die beiden Buchempfehlungen sind gleichartig strukturiert, es gibt einen titel, eine beschreibung, ein bild und einen link zum Produkt selbst. Wenn Sie noch weitere Attribute benötigen, dann tragen Sie diese im gleichen Schema ein.

049  foreach($L->get('cta') as $key) {
050      echo '<img src="'.$key['image'].'">';
051      echo '<h1>'.$key['titel'].'</h1>';
052      echo '<p>'.$key['beschreibung'].'</p>';
053      echo '<a href="'.$key['link'].'">kaufen...</a>';
054  }

Code

Möchten Sie im Template die Inhalte geeignet als Affiliate-Link anzeigen, dann ist das Coding oben ein guter Start in Ihr individuelles Design.

Zeile 49 holt die einzelnen Buchempfehlungen (Zeile 11 und 16) aus der cta-Tabelle und in den Zeilen 50, 51, 52 und 53 werden dann die einzelnen Attribute des Produktes ausgegeben.

Vorteilhaft bei dieser Array-Struktur ist, das es ein übergeordnetes Array cta gibt, welches Sie automatisch iterieren können ohne dabei die Anzahl der Produkte zuvor kennen zu müssen. Die Anzahl der Produktlinks kann dynamisch ermittelt werden und die Liste an Buchempfehlungen kann beliebig lang sein.

Mit Hilfe dieses Mechanismus können Sie leicht beliebig viele Banner oder Affiliate-Links in der Json-Datei anlegen, um diese dann im Template anzeigen zu lassen. Vorteilhaft hierbei ist, das Sie keinerlei Limitationen unterworfen sind, legen Sie so viele Einträge an wie Sie wollen.


 21.12.2023    Kontakt@Oliver-Lohse.de    JSON YAML XML

Angular das große Handbuch zum JavaScript-Framework. Einführung und fortgeschrittene TypeScript-Techniken   -  Angular ist das JavaScript-Framework für professionelle Webapplikationen - hier lernen Sie es umfassend kennen! Christoph Höller macht Sie mit allen relevanten Technologien, Standards und Kernbestandteilen des Frameworks vertraut. Am Praxisbeispiel einer Projektverwaltung führt Ihnen der Webprofi die Komponenten und Konzepte von Angular vor. Formulare, Routing, HTTP-Anbindung und Testing - hier lernen Sie Schritt für Schritt, wie Sie eigene Angular-Webapplikationen erstellen. Inkl. aller neuen Features und Komponenten. Aktuell inkl. Material Design.

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

Neues Datenbanfeld in JSON anlegen

 wondercms  Attribut JSON


Mit diesem Trick legen Sie neue Datenbank-Felder in der JSON-Datenbank des WonderCMS vollkommen automatisiert an - mit nur einer Codezeile im WonderCMS Theme.

Kommentare in JSON-Files machen

 php  JSON Kommentar


Wie können Sie Programm Kommentare in json Dateien und Files vornehmen? Gibt es einen Kommentar-Token oder einen anderen Trick um in json zu kommentieren?

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.

YAML Syntax in Theme Config auslesen

 pico  YAML Syntax


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

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.

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