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.
The Express application generator uses Pug as its default, but it can generate apps configured for Handlebars-compatible engines such as hbs, EJS, among others.
For apps created by the generator, these settings are added to the generated app.js. For apps you create without the generator, set the following application setting properties yourself:
views, das Verzeichnis, in dem sich die Template-Dateien befinden. Eg:app.set('views', './views'). Dies ist standardmäßig im Verzeichnisviewsim 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').
Then install the corresponding Express-compatible template engine npm package; for example to install Pug:
npm install pug --saveyarn add pugpnpm add pugbun add pugExpress-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.
For example, install hbs or any other Express-compatible Handlebars view engine instead of the raw handlebars package by itself.
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= messageErstelle 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!' });});import { type Request, type Response } from 'express';
app.get('/', (req: Request, res: Response) => { 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.