jade Getting started with jade
Remarks
Pug (formerly known as jade) is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers.
- Produces HTML
- Supports dynamic code
- Supports reusability (DRY)
Versions
| version | release date |
|---|---|
| 0.0.2 | 2010-07-03 |
| 1.0.0 | 2013-12-22 |
| 1.11.0 | 2015-06-12 |
Installation or Setup
Before to launch you to code with Pug, you need to have some prerequisits.
You will need to install:
After installing NodeJS, you can check in your terminal the correct installation doing:
$ node -v
If successful, it will print the number of Node's version.
To install Pug into your project, the preferred and easy way is through NPM (Node Package Manager). If you are familiar with that, simply execute this line of code in your Terminal:
$ npm install pug
If you want to install globally, you can type:
$ npm install pug-cli -g
and run with
$ pug --help
Syntax
Pug (old name is Jade) is a clean, whitespace sensitive syntax for writing HTML. Here is a simple example:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) bar(1 + 5)
body
h1 Pug - node template engine
#container.col
if youAreUsingPug
p You are amazing
else
p Get on it!
p.
Pug is a terse and simple templating language with a
strong focus on performance and powerful features.
Produces following output as HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pug</title>
<script type="text/javascript">
if (foo) bar(1 + 5)
</script>
</head>
<body>
<h1>Pug - node template engine</h1>
<div id="container" class="col">
<p>You are amazing</p>
<p>Pug is a terse and simple templating language with a strong focus on performance and powerful features.</p>
</div>
</body>
</html>
Here are the rules to render Pug to HTML code:
- By indenting the text, the HTML tree will be build. indenting could be used with spaces or tabs. This could not be mixed!
- HTML tags are written without
<and>. Attributes are places between round brackets. - Comment could be made with
//or<!-- -->. Comments with//-are not visible in the rendered HTML. - With
#{ }will an offered model generated:#{header} #{user.username}. - The
#(hashtag) without braces will adivelement created with the text as ID. Example#myIDwill be rendered as<div id="myID"></div>. - With a
.(point) will adivgenerated with a class attribute. Example:.myClasswill be rendered as<div class="myClass"></div> - With
=(equality sign followed by a space), a variable will be retrieved. Exaple:h1= title - A
!=(not equal to) retrieved a variable without escaping. - A
-(hyphen) allows you to write JavaScript. Example:- console.log("foo"); - Linking to an external file can as follow:
script(src="/js/chat.js") - Inline script could by using this
script.. - A directive for adding the basic layout:
extends ../layout. - At
layout.pughappens the inserting by usingblock content - Use of partials could on two ways:
- by partial:
!= partial(template file name/options). - By include:
include ../includes/footer
- by partial:
- The inverse of include is
extend. This allows from a page "htmlblockparts" to send to a layout page for example:extend layout - Concatenating happens with the
+(plus) or#(hashtag) char. The plus is used at JavaScript code. The hashtag in HTML and renders the content: `p The name is: #{myName}
Using pug with Node.js
var pug = require('pug');
// compile
var fn = pug.compile('string of pug', options);
var html = fn(locals);
// render
var html = pug.render('string of pug', merge(options, locals));
// renderFile
var html = pug.renderFile('filename.pug', merge(options, locals));
Options
- filename Used in exceptions, and required when using includes
- compileDebug When false no debug instrumentation is compiled
- pretty Add pretty-indentation whitespace to output (false by default)
