User Tools

Site Tools


javascript:jade

This is an old revision of the document!


Jade

Jade is billed as a template engine for Node.js, but I think it's better thought of as a language that makes writing HTML easier and also lets you do templating.

Getting started

Installing Jade

To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an installer; on Linux, you should be able to use your package manager1).

Once you have Node.js installed, you have the choice of installing it so it available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter

npm install jade -g

Until I get a good grasp of using Jade, I want to install it on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter

npm install jade

When this is done you should see a node_modules subdirectory. Inside that directory will be the Jade modules as well as any other modules Jade depends on.

Creating an HTML fragment

The first thing we are going to do is use Jade to produce an HTML fragment. This is done with the jade.render method.

var jade = require('jade');
 
// Render an HTML fragment from a string literal
// written in Jade.
var htmlFrag = jade.render('p Hello, world');
 
console.log(htmlFrag);

You can also create function that when called will return the fragment with the jade.compile method.

var jade = require('jade');
 
// Compile a function that produces an HTML fragment
// from a string literal written in Jade.
var frag = jade.compile('p Hello, world');
 
// Render stuff.
var htmlFrag = frag();
 
console.log(htmlFrag);
1)
See also http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.
javascript/jade.1395096509.txt.gz · Last modified: 2014/03/17 22:48 by mithat

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki