ExpressJS - Templating

Pug ist eine Template-Engine für Express. Template-Engines werden verwendet, um die Unordnung unseres Servercodes mit HTML zu beseitigen und Zeichenfolgen wild mit vorhandenen HTML-Vorlagen zu verknüpfen. Pug ist eine sehr leistungsstarke Template-Engine mit einer Vielzahl von Funktionen, darunterfilters, includes, inheritance, interpolationusw. Es gibt viel zu tun.

Um Pug mit Express zu verwenden, müssen wir es installieren,

npm install --save pug

Nachdem Pug installiert ist, legen Sie es als Vorlagen-Engine für Ihre App fest. Siedon'tmüssen es "verlangen". Fügen Sie Ihrem Code den folgenden Code hinzuindex.js Datei.

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

Erstellen Sie nun ein neues Verzeichnis mit dem Namen views. Darin erstellen Sie eine Datei namensfirst_view.pugund geben Sie die folgenden Daten ein.

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

Fügen Sie Ihrer App die folgende Route hinzu, um diese Seite auszuführen:

app.get('/first_template', function(req, res){
   res.render('first_view');
});

Sie erhalten die Ausgabe als - Hello World!Pug konvertiert dieses sehr einfach aussehende Markup in HTML. Wir müssen nicht das Schließen unserer Tags verfolgen, keine Klassen- und ID-Schlüsselwörter verwenden, sondern '.' und'#'um sie zu definieren. Der obige Code wird zuerst in - konvertiert

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pug kann viel mehr als nur das HTML-Markup vereinfachen.

Wichtige Eigenschaften des Mops

Lassen Sie uns nun einige wichtige Merkmale von Pug untersuchen.

Einfache Tags

Tags werden entsprechend ihrer Einrückung verschachtelt. Wie im obigen Beispiel,<title> wurde innerhalb der eingerückt <head>Tag, also war es drin. Aber die<body> Tag war auf dem gleichen Einzug, also war es ein Geschwister der <head> Etikett.

Wir müssen keine Tags schließen, sobald Pug auf das nächste Tag auf derselben oder einer äußeren Einrückungsstufe trifft, wird das Tag für uns geschlossen.

Um Text in ein Tag einzufügen, haben wir drei Methoden:

Space seperated

h1 Welcome to Pug

Piped text

div
   | To insert multiline text, 
   | You can use the pipe operator.

Block of text

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

Bemerkungen

Pug verwendet dieselbe Syntax wie JavaScript(//)zum Erstellen von Kommentaren. Diese Kommentare werden in die HTML-Kommentare konvertiert (<! - Kommentar ->). Zum Beispiel,

//This is a Pug comment

Dieser Kommentar wird wie folgt konvertiert.

<!--This is a Pug comment-->

Attribute

Um Attribute zu definieren, verwenden wir eine durch Kommas getrennte Liste von Attributen in Klammern. Klassen- und ID-Attribute haben spezielle Darstellungen. Die folgende Codezeile behandelt das Definieren von Attributen, Klassen und IDs für ein bestimmtes HTML-Tag.

div.container.column.main#division(width = "100", height = "100")

Diese Codezeile wird in die folgende konvertiert. - -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

Werte an Vorlagen übergeben

Wenn wir eine Mops-Vorlage rendern, können wir ihr tatsächlich einen Wert aus unserem Routen-Handler übergeben, den wir dann in unserer Vorlage verwenden können. Erstellen Sie einen neuen Routenhandler mit den folgenden Anweisungen.

var express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

Erstellen Sie eine neue Ansichtsdatei im Ansichtsverzeichnis mit dem Namen dynamic.pug, mit folgendem Code -

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

Öffnen Sie localhost: 3000 / dynamic_view in Ihrem Browser. Sie sollten die folgende Ausgabe erhalten -

Wir können diese übergebenen Variablen auch im Text verwenden. Um übergebene Variablen zwischen den Text eines Tags einzufügen, verwenden wir#{variableName}Syntax. Wenn wir im obigen Beispiel beispielsweise Grüße aus TutorialsPoint einfügen möchten, hätten wir Folgendes tun können.

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

Diese Methode zur Verwendung von Werten wird aufgerufen interpolation. Der obige Code zeigt die folgende Ausgabe an. - -

Bedingungen

Wir können auch bedingte Anweisungen und Schleifenkonstrukte verwenden.

Betrachten Sie Folgendes:

Wenn ein Benutzer angemeldet ist, sollte die Seite angezeigt werden "Hi, User" und wenn nicht, dann die "Login/Sign Up"Verknüpfung. Um dies zu erreichen, können wir eine einfache Vorlage wie - definieren

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

Wenn wir dies mit unseren Routen rendern, können wir ein Objekt wie im folgenden Programm übergeben -

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

Sie erhalten eine Nachricht - Hi, Ayush. Wenn wir jedoch kein Objekt oder ein Objekt ohne Benutzerschlüssel übergeben, erhalten wir einen Anmeldelink.

Include und Komponenten

Pug bietet eine sehr intuitive Möglichkeit, Komponenten für eine Webseite zu erstellen. Wenn Sie beispielsweise eine Nachrichten-Website sehen, ist die Überschrift mit Logo und Kategorien immer festgelegt. Anstatt dies in jede von uns erstellte Ansicht zu kopieren, können wir die verwendenincludeMerkmal. Das folgende Beispiel zeigt, wie wir diese Funktion verwenden können -

Erstellen Sie 3 Ansichten mit dem folgenden Code:

HEADER.PUG

div.header.
   I'm the header for this website.

CONTENT.PUG

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG

div.footer.
   I'm the footer for this website.

Erstellen Sie dazu eine Route wie folgt:

var express = require('express');
var app = express();

app.get('/components', function(req, res){
    res.render('content');
});

app.listen(3000);

Gehen Sie zu localhost: 3000 / Komponenten, Sie erhalten die folgende Ausgabe -

include kann auch verwendet werden, um Klartext, CSS und JavaScript einzuschließen.

Es gibt viele weitere Funktionen von Pug. Diese sind jedoch nicht in diesem Lernprogramm enthalten. Sie können Pug at Pug weiter erkunden .