Democode für Handlebars.JS

home handlebarsjs

KI für Content Creation - Texte, Bilder, Audio und Video erstellen mit ChatGPT und Co   -  Nominiert für den Tiger-Award 2024 in der Kategorie „Business Bestseller“. Schnell und effektiv Content erstellen mit ChatGPT und DeepL. Texte optimieren für SEO mit Semrush und Yoast. Bilder, Audio und Videos kreieren mit DALL-E, Midjourney, Adobe Firefly, Adobe Podcast u.v.m. KI-Tools sinnvoll in den gesamten Content-Marketing-Prozess integrieren. KI-Technologien wie ChatGPT und Co. erleichtern Content Creation um ein Vielfaches – Sie müssen nur wissen, wie diese Tools effektiv eingesetzt werden können.

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Weitere Beiträge


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

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>

Code

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"}

Code

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;

Code

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.


 28.01.2024    Kontakt@Oliver-Lohse.de    Demo Template

Mit Unity ganz ohne Vorkenntnisse eigene Spiele entwickeln   -  Nutzen Sie die geniale Game Engine, um eigene Spiele zu entwickeln! Von der ersten Scene bis zum komplexen Multiplayer-Spiel zeigt Ihnen Erfolgsautor Thomas Theis Schritt für Schritt, wie es geht. Mit dem integrierten C#-Kurs lernen Sie alle Objekte und Befehle direkt so kennen, wie Sie in Unity-Skripten aussehen - ganz ohne Vorkenntnisse und externe Software!

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Weitere passende Beiträge

Plugin Schritt für Schritt schreiben

 bludit  Schritt Demo


Die Entwicklung eines Plugins für das CMS Bludit ist einfach. Der Beitrag zeigt Ihnen Schritt für Schritt wie Sie vorgehen müssen um an Ihr Ziel zu gelangen.

Beispiel Plugin für Pico CMS

 pico  Demo Beispiel


Dieser Beitrag zeigt Ihnen, wie Sie ein erstes Plugin für PICO entwickeln. Die wenigen Zeilen Code verdeutlichen die Arbeitsweise der Plugins in diesem CMS

Template ohne Code mit Smarty

 smarty  Template


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

Teil 3 einfaches Smarty-Template anlegen

 smarty  Template


Legen Sie ein erstes sehr einfaches TPL Template für die Template-Engine Smarty an und lassen den Inhalt eines Artikels und Beitrags laden und rendern.

Teil 3 einfaches Layout für GetSimple

 get-simple  Layout Template Design


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.

Teil 1 funktionfähiges Template für GS

 get-simple  Template Layout Design


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.

Kleinste PHP Template-Engine

 php  Template Parser klein


Das ist die kleinste PHP Template-Engine, bzw. das kleinste PHP-CMS der Welt, erstellt mit der Programmiersprache PHP und 7 Zeilen Code.

Fehlerausgaben in Smarty unterdrücken

 smarty  Fehler Template


So verhindern Sie die Ausgabe von Warnungen und Meldungen in der Template Engine Smarty. Besonder hilfreich während der Entwicklung in kleinen Projekten.

Impressum


CMSWorkbench.de ist eine reine Entwickler-Webseite und dient vorwiegend als Wissensspeicher für die Entwicklung von CMS

Datenschutz


Die Webseite verwendet keinerlei Tracking- oder Speicher-Mechanismen, die Rückschlüsse auf Ihre IP oder das Leseverhalten zulassen

Affiliate


Wir sind Mitglied im Amazon Partnernet und können mit Affiliate-Links (* den Betrieb der Seite etwas unterstützen, für Sie ist das natürlich kostenlos

Kontakt


Sie können mit uns über eMail Kontakt aufnehmen, schreiben Sie an Kontakt@Oliver-Lohse.de