Template ohne Code mit Smarty

home smarty

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.

Erstellen Sie ein Webseite mit der Template-Engine Smarty ohne aufwändigen Programm Code. Ein trivialer Beitragsloop wiederholt sich in festen Strukturen.

Smarty Templates ohne Code

Ziel dieses Ansatzes ist es die Template-Engine gleichförmig, homogen zu gestalten und komplexe Programmlogik zu entfernen. Die Arbeit der Template-Engine Smarty wird dabei auf immer wiederkehrende gleichartige Module verteilt.

Im wesentlichen wird die eigentliche Arbeit des Templateparsers Smarty auf die fünf Module aufgeteilt.

  • index.php
  • render.php
  • template.html
  • post.txt
  • config.conf

Der Ansatz ist wie folgt: jeder Post wird in ein eigenes Verzeichnis abgelegt, das den Namen des Beitrags trägt. In jedem dieser verschiedenen Verzeichnisse liegen immer die gleichen Module:

  • index.php
  • config.conf
  • post.txt

Die Datei index.php bindet die eigentliche Smarty-Umgebung ein. Die Datei config.conf enthält Zusatzdaten - derzeit die Navigation zum übergeordneten Verzeichnis. Zu guter letzt, nimmt post.txt den Inhalt des Beitrags auf. Die Module besitzen immer den gleichen Inhalt, lediglich post.txt enthält unterschiedliche Beitragstexte - logisch.

Der Vorteil

Sie können den Content beliebig tief mit thematischen Unterordnern oder Kategorien schachteln, Sie müssen lediglich dafür sorgen, das der per URL gerufene Ordner diese drei Module enthält. Sie können demzufolge neue Ordner anlegen und kopieren diese Module einfach aus einem anderen Vorlage-Ordner dort hinen.

index.php

Die Datei index.php dient dazu das Script render.php zu laden und eine Path-Variable zu setzen. Das Script selbst ist recht übersichtlich:

001  <?php
002     $path = "";
003     include $path.'render/render.php';
004     // $path= dient dazu, das z.B. der CSS-Style aus jeder Ordnerstruktur 
005     // geladen werden kann.
006  ?>

Code

Die Variable $path wird vom render.php genutzt, um in den Templates den Pfad hoch zur root festzulegen, damit diese auch die CSS-Styles laden können. Folglich ist die Variable $path auf der Startseite leer, im ersten Unterordner "../", im zweiten Unterordner "../../", im dritten Unterordner "../../../" usw.

Das ist im übrigen die einzige Anpassung die Sie vornehmen müssen, damit dieses Template-Modell funktioniert.

config.conf

Die Konfigurationsdatei nimmt Zusatzinformationen zum Post auf, die zunächst nichts mit dem Text zu tun haben, derzeit ist es die Navigation zum übergeordneten Verzeichnis.

navigation = "<a href="http://cmsworkbench.de/index.php">« zurück</a>"

Code

Jede diese config.conf enthält diese HTML-Angabe und springt in der Verzeichnisstruktur eine Ebene nach oben. Der Inhalt der Templatevariablen wird in das Template gesetzt.

post.txt

Die Datei post.txt nimmt den eigentlichen Beitragstext auf und hat die folgende Struktur:

Titel des Beitrags
~~~
beitragsbild.jpg
~~~
Den Anleser hier eintragen
~~~
Der Haupt-Text Ihres Beitrags... beliebig viel Text.
~~~
Name der zu ladenden Template-Datei
~~~
Kategorie
~~~
Name des Autor
~~~
2020-06-01
~~~
Schlagwort-1,Schlagwort-2, ...
~~~
Meta-Beschreibung

Code

Der Beitragstext ist mit Delimittern ~~~ versehen, damit render.php die einzelnen Sektionen später an die richtigen Stellen des Templates kopieren kann.

render.php

Der Renderer dieser Template-Engine ist klassisch aufgebaut und enthält keinerlei Logik. Er sorgt dafür, das der Inhalt der Datei post.txt in die passenden Templatevariablen kopiert wird.

001  <?php
002      require_once($path.'libs/Smarty.class.php');  // $path-Variable + Verzeichnis
003      $smarty               = new Smarty();
004      $smarty->template_dir = $path.'templates';    // $path-Variable + Verzeichnis
005      $smarty->compile_dir  = $path.'templates_c';  // $path-Variable + Verzeichnis
006      $smarty->config_dir   = '.';                  // immer das Config-File im aktuellen Verzeichnis suchen
007    
008      $smarty->configLoad('config.conf');           // config.conf des aktuellen Verzeichnis laden
009      $navigation = $smarty->getConfigVars('navigation');
010
011      $fileContent = file_get_contents ("post.txt");
012      $textBausteine = explode("~~~", $fileContent);
013
014      $smarty->assign('path',            trim($path)); // $path-Variable auch in das Template damit CSS geladen wird
015      $smarty->assign('title',           trim($textBausteine[0]));
016      $smarty->assign('teaser',          trim($textBausteine[1]));
017      $smarty->assign('headline',        trim($textBausteine[2]));
018      $smarty->assign('content',         trim($textBausteine[3]));
019      $smarty->assign('template',        trim($textBausteine[4]));
020      $smarty->assign('categorie',       trim($textBausteine[5]));
021      $smarty->assign('author',          trim($textBausteine[6]));
022      $smarty->assign('date',            trim($textBausteine[7]));
023      $smarty->assign('metakeywords',    trim($textBausteine[8]));
024      $smarty->assign('metadescription', trim($textBausteine[9]));
025      $smarty->assign('status',          trim($textBausteine[10]));
026      $smarty->assign('navigation',      trim($navigation));
027
028      $smarty->display(trim($textBausteine[4]));
029  ?>

Code

Sie können bereits die Variable $path erkennen, die eine Pfadangabe zum übergeordneten Verzeichnis darstellt. Diese ist erforderlich, damit der Parser immer seine benötigten Verzeichnisse, wie templates, finden kann. template-*.html

Zum Schluss fehlt noch das Template selbst, das Smarty für die Darstellung nutzen soll. Alle Templates werden aus dem Verzeichnis templates bezogen (ich drucke den Code hier nicht ab, da bekannt sein sollte wie die Smarty-Templates funktionieren).

Wie bereits im Beitrag erwähnt, der Ansatz ist simpel, denn alles wird mit gleichartigen Modulen identisch verarbeitet. Landingpages und Beiträge sind technisch betrachtet daher gleich, lediglich Landingpages enthalten statt des Beitragstextes ein individuelles Menü-Layout das Sie slebst mit Bootstrap-Mitteln frei anlegen können - schauen Sie sich bitte das Beispiel im Download genau an).


 28.01.2024    Kontakt@Oliver-Lohse.de    Template

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.

Weitere passende Beiträge

Teil 3 einfaches Smarty-Template anlegen

 smarty  Template


Legen Sie ein erstes sehr einfaches TPL Template für die Template-Engine Smarty an und lassen den Inhalt eines Artikels und Beitrags laden und rendern.

Teil 3 einfaches Layout für GetSimple

 get-simple  Layout Template Design


Teil 3 - Ein GetSimple Template erstellen. In Verbindung mit dem freien und beliebten CSS-Framework Bootstrap eine leichte Sache auf dem Weg zum eigenen Blog.

Teil 1 funktionfähiges Template für GS

 get-simple  Template Layout Design


Teil 1 - Der Einstieg in das Templating mit dem freien CMS GetSimple - der Name ist Programm, denn dieses CMS ist klar und leicht beherrschbar strukturiert.

Kleinste PHP Template-Engine

 php  Template Parser klein


Das ist die kleinste PHP Template-Engine, bzw. das kleinste PHP-CMS der Welt, erstellt mit der Programmiersprache PHP und 7 Zeilen Code.

Fehlerausgaben in Smarty unterdrücken

 smarty  Fehler Template


So verhindern Sie die Ausgabe von Warnungen und Meldungen in der Template Engine Smarty. Besonder hilfreich während der Entwicklung in kleinen Projekten.

Democode für Handlebars.JS

 handlebarsjs  Demo Template


Dieser Beitrag zeigt ein einfaches Demo Template für die JavaScript basierte Template Engine Handlebars. Dieses Template ist sogar offline funktionsfähig.

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