Bludit CMS

Bludit CMS Workbench - Codeschnipsel, um das eigene Bludit CMS anzupassen



Smarty, multipler Content

Teil 4 - der Templatebau-Reihe für das überaus populäre Template-System Smarty. Legen Sie nun Ordner für Ihre Texte des Contant an, um verschiedene Inhalte laden zu können.

Wenn Sie sich bis hier vorgearbeitet haben, dann existiert bereits ein erstes Template in Ihrer Smarty Engine das Sie weiter ausbauen sollten. Bisher war das Template nur wenig flexibel und konnte nur einen Content darstellen. In der nächsten Ausbaustufe werden verschiedene Inhalte programmatisch gesteuert ausgegeben.

Ordner "texte"

Zu Beginn müssen Sie einen neuen Ordner anlegen in dem Sie zukünftig die reinen Textdefinitionen ablegen werden, Sie trennen dadurch den Content noch besser vom Code.

+-- radelle.de
       |
       +-- libs
|
+-- texte
| |
| beitrag_a.php
| beitrag_b.php
| default.php
|
+-- templates
| |
| artikel.tpl
|
+-- templates_c
|
index.php

Legen Sie im Ordner texte gleich zwei neue Dateien mit dem Namen beitrag_a.php, default.php und beitrag_b.php an.

beitrag_a.php

In der Datei des Beitrags A können Sie das folgende Listing übernehmen:

01  <?php
02  $titel_var   =
03    "Das ist der Titel Beitrag A";
04
05  $anleser_var =
06    "Beitrag A ist der erste Beispieleitrag";
07
08  $inhalt_var  =
09    "<p>Der Inhalt des Beitrags A - der Haupttext.</p>";
10
11    $autor_var   = "Oliver Lohse";
12    $mail_var    = "test@gmail.com";
13    $datum_var   = "12-2019";
14  $footer_var  = "(c) Oliver Lohse";
15 ?>

Für Beitrag B ist es exakt das gleiche Listing, nur sollten Sie A durch B ersetzen, um einen Unterschied im Browser sehen zu können. Die Variablen $titel_var, $anleser_var, $inhalt_var, $autor_var, $mail_var, $datum_var und $footer_var werden später noch in der index.php benötigt.

default.php

Die Textkonserve default.php soll einen Inhalt symbolisieren, wenn der Leser keinen Parameter übergibt. Es zeigt dann ein Menü mit Auswahloptionen (Links) zu den Beiträgen.

01  <?php
02  $titel_var   =
03    "Default";
04
05  $anleser_var =
06    "Sie muessen eine Wahl treffen";
07
08  $inhalt_var  =
09    "<p>Default wird geladen, der Anwender hat keinen Wert uebergeben.</p>
10    <p><a href='../index.php?artikel=beitrag_a'>Beitrag A</a></p>
11    <p><a href='../index.php?artikel=beitrag_b'>Beitrag B</a></p>";
12
13    $autor_var   = "Oliver Lohse";
14    $mail_var    = "test@gmail.com";
15    $datum_var   = "12-2019";
16  $footer_var  = "(c) Oliver Lohse";
17 ?>

Da

artikel.tpl

Das HTML-Template sollten Sie etwas anpassen. Prinzipiell ist es immer noch das gleiche Template wie Sie es in den ersten Beiträgen gesehen haben, Sie sollten es wie folgt komplettieren.

01 <!DOCTYPE html>
02 <html lang="de">
03 <head>
04  <meta charset="utf-8">
05  <meta http-equiv="X-UA-Compatible" content="IE=edge">
06  <meta name="viewport" content="width=device-width, initial-scale=1">
07  <meta name="description" content="">
08  <meta name="author" content="Oliver Lohse">
09
10 <title>{$titel_tmpl}</title>
11   
12  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
13 </head>
14
15 <body>
16
17  <div class="container">
18
19 <br>
20        
21  <div class="jumbotron">
22  <h1 class="display-4">{$titel_tmpl}</h1>
23  <hr class="my-4">
24  <p class="lead">{$anleser_tmpl}</p>
25  </div>
26               
27 {$inhalt_tmpl}
28
29 <hr class="my-4">
30 {$autor_tmpl} - {$datum_tmpl} - {$mail_tmpl}
30
29 <footer style="position: fixed; padding: 10px; bottom: 0px; left: 0px; right: 0px; background-color: #ffffff; text-align: center;">
30  {$footer_tmpl}
31  </footer>
32
33  </div>
34       
35  <br><br>
36   
37 </body>
38 </html>

Fügen Sie einen CSS-Style hinzu, um es optisch ansprechender zu gesatlten, ich habe mich für Bootstrap (https://getbootstrap.com/) entschieden und es in Zeile 012 eingehängt. Zudem sollten Sie die obligatorischen Angaben zu Metainfos und zur Zeichencodierung ebenfalls eingefügen. Alles was Sie hinter class finden, sind spezielle CSS-Klassen des Bootstrap die lediglich zur Formatierung des Inhaltes dienen, sie machen die Seite "schön". Sie können die CSS-Klassen auch gerne weglassen oder ein anderes CSS-Framework nutzen wie zum Beispiel UIkit (https://getuikit.com/).

index.php

Der zentrale Ausgangspunkt ist nach wie vor die Datei index.php in der Sie wie folgt Kontrollstrukturen implementieren die in der Lage sind externe Parameter auszuwerten.

01  <?php
02 require_once('libs/Smarty.class.php');
03    $smarty = new Smarty();
04   
05  @require("texte/default.php");
06   if(isset($_GET['artikel'])) {
07    $artikel = $_GET['artikel'];
08    @require("texte/".$artikel.".php");
09  }
10
11  $smarty->assign('titel_tmpl',   $titel_var);
12  $smarty->assign('anleser_tmpl', $anleser_var);
13  $smarty->assign('inhalt_tmpl',  $inhalt_var);
14  $smarty->assign('autor_tmpl',   $autor_var);
15  $smarty->assign('mail_tmpl',    $mail_var);
17  $smarty->assign('datum_tmpl',   $datum_var);
18  $smarty->assign('footer_tmpl',  $footer_var);
19 
20 $smarty->display('artikel.tpl');
21 ?>

Die Datei index.php ist in der Zwischenzeit auch etwas erweitert worden, es werden ein Anleser, der Autor und ein Datum zusätzlich gefüllt.

Die Magie passiert in den Zeilen 05 bis 09. Der erste require läd die Default-Textkonserve im Ordner texte. Der folgende if prüft ob der Anwender etwas in der GET-Variable artikel übergeben hat und nutzt dann diesen Inhalt als Namen der zu ladenenden Textkonserve aus dem Ordner texte. Hat der Anwender hingegen nichts eingegeben, dann bleibt die default.php als Textbaustein nach wie vor geladen.

Run it

Rufen Sie die Domain im Browser wie folgt auf: http://radelle.de/?artikel=beitrag_a und Sie erhalten die folgende Anzeige. Versuchen Sie auch artikel=beitrag_b.

Geben Sie statt des konkreten Beitrags einfach nur den Domain-Namen ein, dann springt das Default-Template an und wird von Smarty geladen:

Die Beitragsvorlage Default können Sie daher wie ein Menü verwenden, von dem aus der Leser weiter verzweigen kann.

Anmerkung - Diese kleine Templatestruktur kann bereits einfach strukturierten Inhalt mit einer Navigationsebene aufnehmen und sinnvoll für den Leser aufbereiten. Allerdings ist dieses Template noch nicht in der Lage praktikabel mit Parametern umzugehen die nicht existieren oder falsch sind, es muss ein sauberes Fehlermanagement implementiert werden. Die Navigationstiefe ist sehr flach und bietet nur eine Schachtelungsebene an, mindestens eine weitere Navigationsstufe wäre wünschenswert. Aber keine Sorge die Template Engine Smarty kann auch das für Sie leisten. Der Text selbst ist ebenfalls noch ein Problem, da Umlaute wie öäüÖÄÜß nicht automatisch konvertiert werden dies sollte ebenfalls durch die Template Engine möglich sein.




Empfehlungen


Smarty Template Engine

Teil 1 - des Template-Workshops mit Smarty zeigt Ihnen was Smarty eigentlich ist und kann. Verschaffen Sie sich einen Überblick für eigene Projekte.


Smarty installieren

Teil 2 - des Template-Workshops zur Template-Engine. Installieren Sie Smarty auf dem Webserver Ihres Providers. Legen Sie ein paar grundlegende Ordner an um loszulegen.


Smarty Template-Abfragen

Teil 7 - Implementieren Sie im Template einfache Kontrollstrukturen, um bestimmte Bereiche im Template ein- oder auszuschalten.


Smarty Template anlegen

Teil 3 - des Template-Workshops in dem Sie ein erstes Template anlegen und Daten anzeigen lassen können - die erste Webseite zeigt sich.


Smarty Textbausteine, Code

Teil 6 - Trennen Sie den Programmcode vom Text. Dieser Beitrag zeigt Ihnen wie Sie dies mit wenigen Zeilen Code realisieren können.


Smarty Textkonvertierung HTML

Teil 5 - Deutschen sonderzeichen wie ü und ä müssen zwingend in HTML konforme Zeichen umgewandelt werden. Die Smarty Modifier erlauben solche manipulationen im Template.




Es wurden noch keine Kommentare verfasst, sei der erste!

About

Tipps. Tricks, Snippets, Hacks und Codings zum CMS Bludit, Automad, WordPress, Joomla, GetSimple, Typesetter, Nibbleblog oder den angesagten Template Engines wie Smarty.


Impressum - Datenschutz - Copyright - RSS - Kontakt

Leser heute

2790