Mithat Konar (the wiki)

User Tools

Site Tools

You are here: Mithat Konar (the wiki) » JavaScript stuff » jade
javascript:jade

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
javascript:jade [2014/03/17 23:35] – mithatjavascript:jade [2014/03/18 03:16] – [Creating Web pages] mithat
Line 1: Line 1:
 ====== Jade ====== ====== Jade ======
  
-[[http://jade-lang.com|Jade]] is billed as a template engine for [[http://nodejs.org/|Node.js]], but I think it's better thought of as a language that makes writing HTML easier and also lets you do templating.+[[http://jade-lang.com|Jade]] is billed as a template engine for [[http://nodejs.org/|Node.js]], but it could be thought of as a language that makes writing HTML easier that also lets you do templating.
  
 ===== Getting started ===== ===== Getting started =====
Line 8: Line 8:
 To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an [[http://nodejs.org/download/|installer]]; on Linux, you should be able to [[https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager|use your package manager]]((See http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.)). To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an [[http://nodejs.org/download/|installer]]; on Linux, you should be able to [[https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager|use your package manager]]((See http://lovingthepenguin.blogspot.com/2013/10/node-no-such-file-or-directory.html for a potential gotcha on Debian-based systems.)).
  
-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 <code>npm install jade -g</code>+Once you have Node.js installed, you have the choice of installing the Jade module so it's available system-wide or only for a particular project. To make it available system-wide, open a terminal and enter: <code>npm install jade -g</code>
  
-When I am learning new Node.js modules, I prefer to install them on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter <code>npm install jade</code>+When I am learning new Node.js modules, I prefer to install them on a per-project basis. To do this, open a terminal in your project directory (or navigate to the directory) and enter: <code>npm install jade</code>
  
-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.+When this is done you should see a ''node_modules'' subdirectory inside your project directory. Inside ''node_modules'' will be the Jade modules as well as any other modules Jade depends on.
  
 ==== Creating an HTML fragment ==== ==== Creating an HTML fragment ====
Line 19: Line 19:
  
 The first thing we are going to do is use Jade to produce an HTML fragment from a string literal. This is done with the ''jade.render'' method. The first thing we are going to do is use Jade to produce an HTML fragment from a string literal. This is done with the ''jade.render'' method.
-<file javascript render-fragment.js >+<file javascript renderFragment.js >
 var jade = require('jade'); var jade = require('jade');
  
Line 29: Line 29:
 </file> </file>
  
-output: ''<p>Hello, world</p>''+output: <code><p>Hello, world</p></code>
  
 === jade.compile === === jade.compile ===
  
-You can also create function that when called will return the fragment with the ''jade.compile'' method. +You can use the ''jade.compile'' method to create a function that when called will return the fragment. 
-<file javascript compile-fragment.js>+<file javascript compileFragment.js>
 var jade = require('jade'); var jade = require('jade');
  
Line 47: Line 47:
 </file> </file>
  
-output: ''<p>Hello, world</p>''+output: <code><p>Hello, world</p></code>
  
 === jade.renderFile === === jade.renderFile ===
Line 58: Line 58:
 </file> </file>
  
-<file javascript render-fragment-file1.js>+<file javascript renderFragmentFile_1.js>
 var jade = require('jade'); var jade = require('jade');
  
Line 68: Line 68:
 </file> </file>
  
-output: ''<h1>Hello, there!</h1><p>Nice to meet you.</p>''+output: <code><h1>Hello, there!</h1><p>Nice to meet you.</p></code>
  
-The above produces output that is valid HTML but hard to read. To make the output human-readable, we can pass ''jade.renderFile'' an options object with its ''pretty'' property set to true. (The options argument can be provided to the ''jade.render'' and ''jade.compile'' methods as well.)+The above produces valid HTML, but it's hard to read. To make the output human-readable, we can pass ''jade.renderFile'' an options object with its ''pretty'' property set to true. (The options argument can be provided to the ''jade.render'' and ''jade.compile'' methods as well.)
  
-<file javascript render-fragment-file2.js>+<file javascript renderFragmentFile_2.js>
 var jade = require('jade'); var jade = require('jade');
  
Line 88: Line 88:
 output: <code><h1>Hello, there!</h1> output: <code><h1>Hello, there!</h1>
 <p>Nice to meet you.</p></code> <p>Nice to meet you.</p></code>
 +
 +You can (and should) also take anvantage of the callback that you can pass to ''jade.renderFile'' to handle errors:
 +<file javascript renderFragmentFile_3.js>
 +var jade = require('jade');
 +
 +options = {
 +    pretty: true
 +};
 +
 +// Render an HTML fragment from a file
 +// written in Jade.
 +// Use callback to trap errors.
 +var htmlFrag = jade.renderFile('myFrag.jade', options, function (err, html) {
 +        if (err) {
 +           throw(err);
 +        }
 +        return html;
 +    });
 +    
 +console.log(htmlFrag);
 +</file>
  
 === Writing output to file === === Writing output to file ===
 To write the output created to a file, you'll need to use Node.js' ''fs'' module. To write the output created to a file, you'll need to use Node.js' ''fs'' module.
  
-<file javascript convert-fragment-file.js>+<file javascript convertFragment.js>
 var jade = require('jade'); var jade = require('jade');
 var fs = require('fs'); var fs = require('fs');
Line 104: Line 125:
 var htmlFrag = jade.renderFile('myFrag.jade', options); var htmlFrag = jade.renderFile('myFrag.jade', options);
  
 +// Write fragment to a file.
 fs.writeFile('myFrag.html', htmlFrag); fs.writeFile('myFrag.html', htmlFrag);
 </file> </file>
Line 113: Line 135:
 <p>Nice to meet you.</p> <p>Nice to meet you.</p>
 </code> </code>
 +
 +==== Creating web pages ====
 +
 +In this section, we will use Jade to build a simple but complete web page. It will serve as an introduction to some fundamental Jade language concepts.
 +
 +<file jade myPage.jade>
 +doctype html
 +html
 +    head
 +        title A Simple Site
 +    body
 +        h1 Hello there!
 +        p Nice to meet you.
 +</file>
 +
 +<file javascript buildMyPage.js>
 +var jade = require('jade');
 +var fs = require('fs');
 +
 +options = {
 +    pretty: true
 +};
 +
 +// Render an HTML page from a file
 +// written in Jade.
 +var html = jade.renderFile('myPage.jade', options);
 +
 +// Write HTML to a file.
 +fs.writeFile('myPage.html', html);
 +</file>
 +
 +output:<code>
 +$ cat myPage.html 
 +<!DOCTYPE html>
 +<html>
 +  <head>
 +    <title>A Simple Site</title>
 +  </head>
 +  <body>
 +    <h1>Hello there!</h1>
 +    <p>Nice to meet you.</p>
 +  </body>
 +</html>
 +</code>
 +
 +The basic idea is that Jade uses a shorthand HTML syntax, and indentation is used to nest elements.
 +
 +This should be enough to make you comfortable reading the [[http://jade-lang.com/reference/|Jade Language Reference]], after which you should be able to compose entire web pages in Jade.
 +
 +<WRAP center round info 60%>
 +More later, time permitting.
 +</WRAP>
 +
  
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki