Democode und Beispieltemplate - Handlebars.js Template Engine

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

WordPress 5

WordPress 5 - Erstellen Sie einen Blog oder eine Website - Mit WordPress können Sie ohne Programmierkenntnisse ein Blog oder eine responsive Website erstellen. In diesem Buch lernen Sie alles, was erforderlich ist. Praxisszenarien für typische Einsatzzwecke unterstützen Sie. Der Rohling steht, nun folgt der Feinschliff - Mithilfe von SEO, Online-Marketing und gutem Content bringen Sie Ihr Projekt auf Kurs. (*

kaufen...

Ein Template mit Handlebars.JS

Handlebars ist eine kostenlose JavaScript Bibliothek die Sie in Ihre HTML-Dokumente einbinden können, um eigene Templates zu erzeugen. Handlebars nutzt dazu einen Trick... es verlagert die Templates in HTML-Tags die zur Laufzeit des Browsers nicht übersetzt werden und zwar in den Script-Tag. Der Inhalt des Script-Tags wird daher vom Browser nicht angezeigt, sondern erst durch das spätere JavaScript ausgewertet.

index.html

Das Beispiel unten zeigt eine einfache Konstruktionsweise eines solchen Handlebars.JS Templates in der HTML-Datei index.html. Die Templatedefinition (hier Bootstrap) wird vom Browser zunächst übergangen und nicht angezeigt.

<!DOCTYPE html>
<html>
  <head>
       <meta charset="utf-8">
        <meta name="viewport"    content="width=device-width, initial-scale=1">
        <meta name="author"      content="Oliver Lohse">
        <link rel="stylesheet" href="style/style.css" type="text/css">
    </head>
<body>

<div id="content"></div>

<script id="template-default" type="text/x-handlebars-template">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4"> {{headPrimary}}  </h1>
            <p class="lead"> {{headSecondary}} </p>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                {{center}} 
            </div>
            <div class="col-sm-3">
                {{{side}}}
            </div>
        </div>
        {{bottom}}
    </div>
</div>
</script>

<script language="JavaScript" src="handlebars-v4.7.6.js" type="text/javascript"></script>
<script language="JavaScript" src="data.js"              type="text/javascript"></script>
<script language="JavaScript" src="render.js"            type="text/javascript"></script>

</body>
</html>

Erst der Aufruf der render.js läd den Inhalt von template-default, ersetzt die Templatevariablen durch den Inhalt der data.js und fügt das Ergebnis in content ein.

data.js

Die data.js nimmt in diesem Handlebars.JS Template den eigentlichen Content, also den Text auf. Der Inhalt ist im Json-Format erzeugt und hat den folgenden Inhalt:

var data = {
headPrimary:   "Titel (Handlebars)",       
headSecondary: "Ein Prototyp mit Handlebars.JS",      
center:        "Ein Templateparser mit der freien JS-Engine Handlebars.",      
side:          "Das Seitenmenue",      
bottom:        "(c) by O.Lohse - 2020"}

Im wesentlichen wird dort die Variable data definiert und vom render.js ausgewertet. Die Templatevariablen müssen dann natürlich exakt den Json-Attributen entsprechen, um das Matching durchzuführen.

render.js

Der Renderer ist übersichtlich gehalten und kann zentralisiert ausgelagert werden.

var template     = Handlebars.compile(document.getElementById("template-default").innerHTML);    
var templateData = template(data);
document.getElementById('content').innerHTML += templateData;

Das obige Handlebars Template Beispiel ist allerdings nur eine von vielem Konstruktionsmöglichkeiten einer Template-Engine mit Handlebars - für mich persönlich die derzeit sinnvollste. Bitte bedenken Sie auch, das Sie die Handlebars JS-Bibliothek von dort herunterladen müssen, damit das Beispiel oben funktioniert.

Im übrigen kann man sich natürlich über den Sinn und Unsinn von Template-Engines streiten, zumal ein neuer Dialekt erlernt werden muss und auch die Performance durchaus leidet. Besonders im Hinblick auf eine JavaScript-Template Engine in dieser Konstruktionsweise, bezweifle ich sehr stark, das diese üppigen Einsatz finden wird. Für solche Fälle würde ich das bereits templatefähige PHP klar vorziehen - zumal PHP vom Browser des Lesers nicht blockiert werden kann wie es bei JavaScript der Fall ist.


Tags: Template • Theme • Engine • JS • JavaScript • offline
Datum: 08.12.2021
Autor: Oliver Lohse

Weitere passende Artikel

_____

So können Sie das freie Feld TEMPLATE in den Beitragseinstellungen verwenden. Fragen Sie es mit dem folgenden Coding des Beitrags ab und steuern das Templating
So steuern Sie die Templatevorgabe in Beiträgen mit dem CMS Bludit. Sie können den Tamplatenamen bei der Erstellung von Beiträgen im Backend angeben.
Brandings der Entwickler sind natürlich eine gute Sache, jedoch dürfen sie auch abgestellt werden. Wie das für das Bludit Theme DEVTHEME geht, lesen Sie hier
Im Bludit Theme DEVTHEME wird das Label "latest Post" angezeigt. Manchmal kann das störend sein. Entfernen Sie das Label doch einfach in der home.php
Mit diesem Coding können Sie verschiedene Templates starten, jenachdem ob der Leser eine Seite, Kategorie, home oder Tag wählt. Bludit kennt vier Seiten-Typen
Wenn Sie Bludit-Themes und Templates entwickeln dann können Sie dem Leser die Möglichket geben das Theme live umzuschalten für den ersten Eindruck.
Das Bludit Theme TYPERITE ist vielversprechend, da es ein Optimum an Customizing ermöglicht. Entfernen Sie das Branding aus dem Footer - das ist erlaubt.

Download -

Download • kostenlos • Plugin • Template
Kostenlose Plugins und Templates für Bludit, Pico CMS, WonderCMS, GetSimple, WordPress und co, zum kostenlosen Download
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.

Templating III ein einfaches Layout anlegen - GetSimple CMS

Template • Theme • Layout • Design • Style
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.
Erarbeiten Sie als Prototypen ein reines HTML-Template das Ihnen zusagt. HTML-Templates sind schneller entwickelt und müssen weniger Restriktionen einhalten.

Standardisiertes PHP Formular Designpattern entwickeln - PHP

Formular • Design • Pattern • Vorlage • Template
Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.

Teil 7 eigene Templateabfragen - Smarty Template Engine

Workshop1 • Template • Engine • Parser
Möchten Sie in Smarty Templates Bedingungen abfragen, dann können Sie den IF Befehl des Smarty Parsers nutzen, um die Ausgabe des Templates zu steuern.

Die richtige Wahl der Templatesprache - Templating Tipps

Template • Entwicklung • PHP • HTML • Code
In welcher Schreibweise sollten Sie CMS Templates erstellen? Gemischt HTML und PHP oder doch lieber waschechtes PHP? Dieser Beitrag erleichtert den Einstieg.
Werden Sie zum Template-Entwickler und beginnen mit leichten Arbeiten, portieren Sie Ihre Templates später in die großen CMS wie WordPress, Bludit oder Joomla
WordPress Easy - Redaktion

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und 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 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.