Template ohne Code mit Smarty

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

home » smarty » strukturtemplate ohne code mit dem smarty template parser

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).


FlightCMS
2024-01-28
Beitrag,Sortieren,Datum,Titel,ASC,DESC
post

JavaScript - Das umfassende Handbuch. JavaScript lernen und verstehen. Inkl. objektorientierter und funktionaler Programmierung - Umfassender Einstieg in JavaScript, praktische Beispiele und eine Darstellung professioneller Techniken. Eignet sich für Anfänger, die JavaScript von Grund auf lernen, als auch für Profis, die wissen wollen, wie man moderne, dynamische Webanwendungen entwickelt. Hier finden Sie alle Techniken: Ajax, jQuery, Node.js, DOM und mehr. Neueste Trends, Techniken und Entwicklungen bis hin zur Steuerung von Microcontrollern. Objektorientierung, ECMAScript 21 und funktionale Programmierung mit praxisnahen Beispielen für sofortigen Einsatz.

Wir können mit so genannten Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Impressum


CMSWorkbench ist ein Tec- und Entwickler-Seite, rund um die Webtechniken der Content Management Systeme.

Datenschutz


Diese Webseite nutzt keine Cookies oder sonstige Speichermechanismen, die einen Rückschluss auf das Leserverhalten zulassen.

Kontakt


Sie können mit der Redaktion oder dem Administrator via eMail unter der Adresse: Kontakt@Oliver-Lohse.de aufnehmen.