Teil 6 HTML-Templates

Inhalt

Templates anlegen

Die Templates des Basic-CMS sind im wesentlichen leere HTML-Vorlagen, die an bestimmten Stellen so genannte Tokens statt Beitragsinhalt besitzen. Die Tokens im Format {xyz} fungieren als Platzhalter.

MVC Design Pattern: Die Templates

Tokens werden zur Laufzeit des CMS von der View mit den echten Daten des Beitrags ersetzt und im MVC-Modell an den Controller weiter nach oben gereicht.

<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <style>
        ul {
            float:              left;
            margin-right:       1em;
            list-style-type:    none;
            padding-left:       0px;
        }
        li {
            background-color:   STEELBLUE;
            margin-bottom:      0.8em;
            padding:            0.8em;
        }
        a {
            text-decoration:    none;
            font-weight:        bold;
            color:              #ffffff;
        }
    </style>
</head>
<body>
    <div class="container-fluid bg-light py-4 shadow-lg">
        <div class="container">
            <h1> {title} </h1>
            <p class="lead"> {description} </p>
        </div>
    </div>

    <div class="container pt-5">
        <div class="text-center"><a href="/"><img src="{logo}" class="img-fluid w-25"></a></div>
        <p> {content} </p>
    </div>
</body>
</html>

basic.template

Das basic.template ist ein ganz einfaches Beispiel-Template. Mit Hilfe des Bootstrap-CSS Frameworks, kann es responsiv auf allen Endgeräten sinnvoll angezeigt werden. Bootstrap wird dynamisch zur Laufzeit hinzu-gelinkt. Die verwendeten Template-Tokens, entsprechen den Metadaten aus den Beiträgen, neu hinzugegkommen ist {content} welcher den Beitragstext aufnimmt aun speichern soll.

CSS Style

In diesem Prototyp ist der CSS-Style innerhalb des Templates angelegt, es macht später mehr Sinn diesen wie üblich als

style.css

in einem separaten Verzeichnis zu lagern. Auch das CSS-Framework Bootstrap wird dynamisch hinzugelinkt, dies sollten Sie später ebenfalls herunterladen, um es in einem Style-Verzeichnis zu lagern, denn hat einmal der Server des Bootstrap-Projektes ein Verbidungsproblem oder ist 'down', dann funktioniert Ihre Webseite ebenfalls nicht mehr.

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Sprachen bzw. Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 25 Jahren arbeite ich in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen.

Oliver Lohse
2024-02-11
ein eigenes CMS entwickeln programmieren
post
Kontakt@Oliver-Lohse.de