Pug is a template engine for Express, the middleware and routing solution for Node.js. It is the standard for Express. If you argue intensively with Node.js and Express, no way leads past Pug.
Overview
Pug uses a simplified representation of the HTML site by simple text instructions. These correspond in a practical way to the names of the HTML tags. Since HTML develops a hierarchy and Pug knows no closing tag, the tree structure must develop differently. In addition, Pug uses identations in the text editor. 2 blanks show that the following element is a child element.
Editor configuration
For Pug to function, you must adjust the text editor to an indentation by the TAB key by 2 indentations.
Preparation
Pug presupposes that you work with node.js and use the middleware Express. The simplest way to a functioning environment goes over gradual processing of the components of a node.js installation. This was described already in the previous chapters. If the environment consists of Node and Express, the occupation with Pug has nothing more in its way.
Figure 6-1. Description of the application
Place a file with a name similar to index.js in the newly created listing application. It has the following contents:
1 var express = require('express');2 var app = express();34 app.get('/', function (req, res) {5 res.send('Hello Express!');6 });78 var server = app.listen(3000, function () {});
Now start the Node server:
1 npm start
Figure 6-2. Start the application
Now enter the following URL in the development system of your browser: *http://localhost:3000*. You should then see the “Hello Express!” output.
Figure 6-3. Output of the page
Application structure
Express offers a number of exciting functions. However, here I want to only deal with Pug and therefore the manual producing and use of a view is simpler.
The simplest use of Pug consists of two components . On the one hand the first View, index.pug:
File: index.pug
1 doctype html2 html(lang='en')3 head4 title= title5 body!= body6 h1= title
On the other hand the “Hello Express” example is changed in such a way that now instead of the static text, the View is used (and text reads “Hello Pug”):
File: index.js
1 var express = require('express');2 var app = express();3 app.set('view engine', 'pug');45 app.get('/', function (req, res) {6 res.render('index', {7 title: 'Hello Pug!'8 });9 });1011 var server = app.listen(3000, function () {});
On the other hand Pug is agreed as standard, by which no file extensions must be indicated and the suitable module is first loaded.
This happens through:
app.set('view engine', 'pug');Then instead of res_send, the function res_render is used. The first parameter is the name of the View, which can be indicated without a path (according to standard, it will be searched in view files) and without file extension (according to standard now, pug is used). The second parameter is an object that the local variable intends for the View. Each characteristic of the object is made available as the local variable. In the example, that is the value of title.
Pug views
Instead of HTML, you now write the viewable sites in pug. Again, the just-used example:
File: index.pug
1 doctype html2 html(lang='en')3 head4 title= title5 body!= body6 h1= title
On each line of the View, an HTML tag has to be there first. Instead of spelling in XML form (‘<title></title>’), Pug takes place as simplfied representation here.
title= titleThe left part is the HTML element. An equal sign follows, which determines the coding and thus the treatment of HTML-specific entities such as “<” or “>”. Then JavaScript follows. Since a local variable with the name title was agreed upon, this expression is written down here. Similarly, it functions with h1, which stands underneath the body element. Handling body aims at the fact that Views (layout or master sites) is usually assigned to the variable body (right in the expression) on content sites. Since HTML is supposed to be taken over directly by one site, the operator != will be used but not coded.
Figure 6-4. Output of the view
Handling Partial Views
Partial Views permit a structuring of Views. One Pug View looks, for example, as follows:
File: index.pug
1 doctype html2 html(lang='en')3 head4 title= title5 body!= body6 include navigation7 h1= title
With the instruction include a further View is merged, navigation.pug. Note that this is indicated without quotation marks and clips.
Now this navigation is provided in a further file: views/navigation.pug:
File: navigation.pug
1 div#navigation2 a(href='/') home
Figure 6-5. Output of script
Handling Layout Pages
A layout pag e is a master whose contents are determined by contents pages. That corresponds to the layout page in ASP.NET MVC or the master page in ASP.NET.
As example, a layout page can look as follows:
File: index.pug
1 doctype html2 html(lang='en')3 head4 title= title5 body!= body6 block content7 include navigation
This hardly differs from the previous example. Only the “h1” element in the end is missing.
file: content.pug
1 extends index23 block content4 h1= title5 a(href='http://www.joergkrause.de/') Jörg <Is A Geek> Krause
It refers to the layout page. Now the starting script is adapted, because Pug renders the contents site first, which calls the layout site for its part.
file: index.js
1 var express = require('express');2 var app = express();3 app.set('view engine', 'pug');45 app.get('/', function (req, res) {6 res.render('content', {7 title: 'Hallo Pug!'8 });9 });1011 var server = app.listen(3000, function () {});
Keep the “res.render” function in mind, which now calls content instead of index (line 5).
Now the node server can be started (in the folder where the file package.json stands):
npm start
As long as the standard port was not assigned somewhere else, the browser shows the rendered HTML site now:
http://127.0.0.1:3000/
The entry point is the call of res.renderwith the argument of the contents site, content.pug. Then the engine provides for the shop of the layout site and the processing. Thus, the entire procedure takes place on the server:
Figure 6-6. Output with layout site
It is noticeable that the navigation disappeared. That is the normal behavior. Because now contents of the body element were actually supplied by a contents page and therefore the static contents are overwritten. Certainly there are some options here to change this behavior. This is described exactly in the language reference.