Teil 5 Templates anlegen

Default Template-Verzeichnis

Programmatisch sind nun alle Arbeiten an Ihrem eigenen Content Management System erledigt, jetzt kommt das Templating. Die Template-Engine Smarty erwartet die Existenz des Template-Verzeichnis /templates im Wurzelverzeichnis, dort sollten alle Templates abgelegt werden. Die Lage des Ordners kann aber gerne umdefiniert werden. Wie das geht, können Sie hier nachlesen:

Smarty Konfiguration

Ein Template entsteht

Im fünften Teil des zweiten Workshops beginnt der kreative Teil der Entwicklung, die Erstellung neuer HTML-Templates. Die Template-Engine Smarty arbeitet mit ähnlichen Template-Tokens, wie sie bereits im Teil 1 verwendet wurden, sie werden jedoch um das $ Dollarzeichen erweitert und sehen so aus: {$...}.

{include file="head.html"}

    <div class="container-fluid py-4 bg-light shadow">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <div class="text-center"><a href="/"><img src="{$logo}" class="img-fluid"></a></div>
                </div>
                <div class="col-sm-9 my-auto">
                    <h1> {$title} </h1>
                    <p class="lead"> {$description} </p>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-5">
        <div class="row">
            <div class="col-sm-3">
                {include file="navigation.html"}
            </div>
            <div class="col-sm-9">
                {$content}
                <p class="small opacity-50">
                    {$content|count_characters} Zeichen in 
                    {$content|count_sentences} Sätzen
                </p>
            </div>
        </div>
    </div>

{include file="footer.html"}

Layouts einbinden

Ebenfalls neu ist jetzt die Möglichkeit, mehrfach benötigte Template-Elemente wie den Footer oder Head auszulagern und zur Laufzeit mit {include file="footer.html"} dynamisch einzuhängen - das ist super praktisch und war in der ersten Version des CMS noch nicht möglich.

Mit Hilfe des include können Sie komplexe Templates und Layouts in kleine übersichtliche Häppchen zerlegen, die Sie später für eine größere Komposition nutzen können, indem sie einfach an den passenden Stellen des Layouts eingehängt werden. Das Templating funktioniert nun fats wie ein Legobaukasten.

Oliver Lohse
2024-02-19
eigenes CMS entwickeln programmieren Templates
post
0