javascript:jade:getting_started
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| javascript:jade:getting_started [2014/03/18 03:48] – created mithat | javascript:jade:getting_started [2014/03/18 03:56] (current) – mithat | ||
|---|---|---|---|
| Line 12: | Line 12: | ||
| ===== Creating an HTML fragment ===== | ===== Creating an HTML fragment ===== | ||
| - | ==== Rendering | + | ==== Rendering Jade strings |
| 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 '' | 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 '' | ||
| Line 26: | Line 26: | ||
| output: < | output: < | ||
| - | ==== Compiling | + | ==== Compiling Jade strings |
| You can use the '' | You can use the '' | ||
| Line 44: | Line 44: | ||
| output: < | output: < | ||
| - | ==== jade.renderFile | + | ==== Rendering a file full of Jade ==== |
| In a lot of cases, you will want to render code that is stored in a file rather than in a string literal or variable. You can do that with the '' | In a lot of cases, you will want to render code that is stored in a file rather than in a string literal or variable. You can do that with the '' | ||
| Line 63: | Line 63: | ||
| output: < | output: < | ||
| + | |||
| + | === Adding options === | ||
| The above produces valid HTML, but it's hard to read. To make the output human-readable, | The above produces valid HTML, but it's hard to read. To make the output human-readable, | ||
| Line 81: | Line 83: | ||
| output: < | output: < | ||
| < | < | ||
| + | |||
| + | === Using the callback function === | ||
| You can (and should) also take anvantage of the callback that you can pass to '' | You can (and should) also take anvantage of the callback that you can pass to '' | ||
| Line 102: | Line 106: | ||
| </ | </ | ||
| - | ==== Writing output to file ==== | + | ==== Writing output to a file ==== |
| To write the output created to a file, you'll need to use Node.js' | To write the output created to a file, you'll need to use Node.js' | ||
| Line 136: | Line 140: | ||
| </ | </ | ||
| + | ===== 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 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 javascript buildMyPage.js> | ||
| + | var jade = require(' | ||
| + | var fs = require(' | ||
| + | |||
| + | options = { | ||
| + | pretty: true | ||
| + | }; | ||
| + | |||
| + | // Render an HTML page from a file written in Jade. | ||
| + | var html = jade.renderFile(' | ||
| + | if (err) { | ||
| + | | ||
| + | } | ||
| + | return html; | ||
| + | }); | ||
| + | |||
| + | // Write HTML to a file. | ||
| + | fs.writeFile(' | ||
| + | if (err) { | ||
| + | throw(err); | ||
| + | } | ||
| + | }); | ||
| + | </ | ||
| + | |||
| + | output:< | ||
| + | $ cat myPage.html | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | The basic idea is that Jade uses a shorthand HTML syntax where indentation is used to nest elements. | ||
| + | |||
| + | This should be enough to make you comfortable reading the [[http:// | ||
javascript/jade/getting_started.1395114486.txt.gz · Last modified: 2014/03/18 03:48 by mithat