jade Getting started with jade Syntax
Example
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}
