Template-Engines mit Express verwenden

Eine template engine ermöglicht es Ihnen, statische Template-Dateien in Ihrer Anwendung zu verwenden. Zur Laufzeit ersetzt die Template-Engine Variablen in einer Template-Datei mit aktuellen Werten und verwandelt die Vorlage in eine HTML-Datei, die an den Client gesendet wird. Dieser Ansatz erleichtert die Gestaltung einer HTML-Seite.

Der Express-Anwendungsgenerator verwendet Pug als Standardwert, aber es unterstützt auch Handlebars, und EJS, unter anderem.

Um Template-Dateien zu rendern, setzen Sie folgende Anwendungs-Einstellungen-Eigenschaften, in der Standardeinstellung app.js, die vom Generator erstellt wurde:

views, das Verzeichnis, in dem sich die Template-Dateien befinden. Eg: app.set('views', './views'). Dies ist standardmäßig im Verzeichnis views im Root-Verzeichnis der Anwendung.
view engine, die zu verwendende Template-Engine. Um zum Beispiel die Mückenvorlagen-Engine zu verwenden: app.set('view engine', 'pug').

Installieren Sie dann das entsprechende Template Engine npm Paket; zum Beispiel um Pug:

$ npm install pug --save

Express-konforme Template-Engines wie MUG exportieren eine Funktion namens __express(filePath, options, callback), welche res.render() aufruft, um den Template-Code zu rendern.

Einige Template-Engines folgen nicht dieser Konvention. Die @ladjs/consolidate Bibliothek folgt dieser Konvention, indem sie alle populären Template-Engines von Node.js abbildet, und arbeitet daher nahtlos in Express.

Nachdem die View Engine gesetzt ist, müssen Sie nicht die Engine angeben oder das Template Engine Modul in Ihrer App laden; Express lädt das Modul intern, zum Beispiel:

app.set('view engine', 'pug');

Erstelle dann eine Pug Template Datei namens index.pug im views Verzeichnis mit folgendem Inhalt:

html
  head
    title= title
  body
    h1= message

Erstelle eine Route um die index.pug Datei zu rendern. Wenn die view engine Eigenschaft nicht gesetzt ist, musst du die Erweiterung der view Datei angeben. Andernfalls können Sie es auslassen.

app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' });
});

Wenn du eine Anfrage an die Startseite stellt, wird die index.pug Datei als HTML dargestellt.

Der View Engine-Cache speichert nicht den Inhalt der Templateausgabe, sondern nur die zugrunde liegende Vorlage selbst. Die Ansicht wird noch mit jeder Anfrage neu gerendert, auch wenn der Cache eingeschaltet ist.