javascript:jade:start
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
javascript:jade:start [2014/03/18 03:42] – mithat | javascript:jade:start [2014/03/18 04:03] (current) – mithat | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Jade ====== | ====== Jade ====== | ||
- | [[http:// | + | [[http:// |
- | + | ||
- | ===== Getting started ===== | + | |
- | + | ||
- | ==== Installing Jade ==== | + | |
- | To use Jade, you must first have Node.js installed | + | |
- | + | ||
- | 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, | + | |
- | + | ||
- | When I am learning new Node.js modules, I prefer | + | |
- | + | ||
- | When this is done you should see a '' | + | |
- | + | ||
- | ==== Creating an HTML fragment ==== | + | |
- | + | ||
- | === Rendering strings in Jade to HTML === | + | |
- | + | ||
- | 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 '' | + | |
- | <file javascript renderFragment.js > | + | |
- | var jade = require(' | + | |
- | + | ||
- | // Render an HTML fragment from a string literal written in Jade. | + | |
- | var htmlFrag = jade.render(' | + | |
- | + | ||
- | console.log(htmlFrag); | + | |
- | </ | + | |
- | + | ||
- | output: < | + | |
- | + | ||
- | === Compiling strings in Jade into functions === | + | |
- | + | ||
- | You can use the '' | + | |
- | <file javascript compileFragment.js> | + | |
- | var jade = require(' | + | |
- | + | ||
- | // Compile a function that produces an HTML fragment from a string | + | |
- | // literal written in Jade. | + | |
- | var frag = jade.compile(' | + | |
- | + | ||
- | // Render stuff. | + | |
- | var htmlFrag = frag(); | + | |
- | + | ||
- | console.log(htmlFrag); | + | |
- | </ | + | |
- | + | ||
- | output: < | + | |
- | + | ||
- | === jade.renderFile === | + | |
- | + | ||
- | 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 '' | + | |
- | + | ||
- | <file jade myFrag.jade> | + | |
- | h1 Hello, there! | + | |
- | p Nice to meet you. | + | |
- | </ | + | |
- | + | ||
- | <file javascript renderFragmentFile_1.js> | + | |
- | var jade = require(' | + | |
- | + | ||
- | // Render an HTML fragment from a file written in Jade. | + | |
- | var htmlFrag = jade.renderFile(' | + | |
- | + | ||
- | console.log(htmlFrag); | + | |
- | </ | + | |
- | + | ||
- | output: < | + | |
- | + | ||
- | The above produces valid HTML, but it's hard to read. To make the output human-readable, | + | |
- | + | ||
- | <file javascript renderFragmentFile_2.js> | + | |
- | var jade = require(' | + | |
- | + | ||
- | options = { | + | |
- | pretty: true | + | |
- | }; | + | |
- | + | ||
- | // Render an HTML fragment from a file written in Jade. | + | |
- | var htmlFrag = jade.renderFile(' | + | |
- | + | ||
- | console.log(htmlFrag); | + | |
- | </ | + | |
- | + | ||
- | output: < | + | |
- | < | + | |
- | + | ||
- | You can (and should) also take anvantage of the callback that you can pass to '' | + | |
- | <file javascript renderFragmentFile_3.js> | + | |
- | var jade = require(' | + | |
- | + | ||
- | options = { | + | |
- | pretty: true | + | |
- | }; | + | |
- | + | ||
- | // Render an HTML fragment from a file written in Jade. | + | |
- | // Use callback to trap errors. | + | |
- | var htmlFrag = jade.renderFile(' | + | |
- | if (err) { | + | |
- | | + | |
- | } | + | |
- | return html; | + | |
- | }); | + | |
- | + | ||
- | console.log(htmlFrag); | + | |
- | </ | + | |
- | + | ||
- | === Writing output to file === | + | |
- | To write the output created to a file, you'll need to use Node.js' | + | |
- | + | ||
- | <file javascript convertFragment.js> | + | |
- | var jade = require(' | + | |
- | var fs = require(' | + | |
- | + | ||
- | options = { | + | |
- | pretty: true | + | |
- | }; | + | |
- | + | ||
- | // Render an HTML fragment from a file written in Jade. | + | |
- | var htmlFrag = jade.renderFile(' | + | |
- | if (err) { | + | |
- | | + | |
- | } | + | |
- | return html; | + | |
- | }); | + | |
- | + | ||
- | // Write HTML fragment to a file. | + | |
- | fs.writeFile(' | + | |
- | if (err) { | + | |
- | throw(err); | + | |
- | } | + | |
- | }); | + | |
- | </ | + | |
- | + | ||
- | output:< | + | |
- | $ cat myFrag.html | + | |
- | + | ||
- | < | + | |
- | < | + | |
- | </ | + | |
+ | * [[Getting started]] | ||
+ | * [[Templating]] | ||
+ | * [[Modularizing]] |
javascript/jade/start.txt · Last modified: 2014/03/18 04:03 by mithat