javascript:jade
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
javascript:jade [2014/03/18 00:15] – [Installing Jade] mithat | javascript:jade [2014/03/18 03:30] – [Creating an HTML fragment] mithat | ||
---|---|---|---|
Line 16: | Line 16: | ||
==== Creating an HTML fragment ==== | ==== Creating an HTML fragment ==== | ||
- | === jade.render | + | === 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 '' | 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 22: | Line 22: | ||
var jade = require(' | var jade = require(' | ||
- | // Render an HTML fragment from a string literal | + | // Render an HTML fragment from a string literal written in Jade. |
- | // written in Jade. | + | |
var htmlFrag = jade.render(' | var htmlFrag = jade.render(' | ||
Line 31: | Line 30: | ||
output: < | output: < | ||
- | === jade.compile | + | === Compiling strings in Jade into functions |
- | You can also create function that when called will return the fragment with the '' | + | You can use the '' |
<file javascript compileFragment.js> | <file javascript compileFragment.js> | ||
var jade = require(' | var jade = require(' | ||
- | // Compile a function that produces an HTML fragment | + | // Compile a function that produces an HTML fragment from a string |
- | // from a string literal written in Jade. | + | // literal written in Jade. |
var frag = jade.compile(' | var frag = jade.compile(' | ||
Line 51: | Line 50: | ||
=== jade.renderFile === | === jade.renderFile === | ||
- | In a lot of cases, you will want to render code that is stored in a file rather than in a string | + | In a lot of cases, you will want to render code that is stored in a file rather than in a string literal |
<file jade myFrag.jade> | <file jade myFrag.jade> | ||
Line 61: | Line 60: | ||
var jade = require(' | var jade = require(' | ||
- | // Render an HTML fragment from a file | + | // Render an HTML fragment from a file written in Jade. |
- | // written in Jade. | + | |
var htmlFrag = jade.renderFile(' | var htmlFrag = jade.renderFile(' | ||
Line 79: | Line 77: | ||
}; | }; | ||
- | // Render an HTML fragment from a file | + | // Render an HTML fragment from a file written in Jade. |
- | // written in Jade. | + | |
var htmlFrag = jade.renderFile(' | var htmlFrag = jade.renderFile(' | ||
Line 88: | Line 85: | ||
output: < | 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 === | === Writing output to file === | ||
Line 100: | Line 117: | ||
}; | }; | ||
- | // Render an HTML fragment from a file | + | // Render an HTML fragment from a file written in Jade. |
- | // written in Jade. | + | var htmlFrag = jade.renderFile(' |
- | var htmlFrag = jade.renderFile(' | + | if (err) { |
+ | | ||
+ | } | ||
+ | return html; | ||
+ | }); | ||
- | // Write fragment to a file. | + | // Write HTML fragment to a file. |
- | fs.writeFile(' | + | fs.writeFile(' |
+ | if (err) { | ||
+ | throw(err); | ||
+ | } | ||
+ | }); | ||
</ | </ | ||
Line 115: | Line 140: | ||
</ | </ | ||
- | ===== Creating | + | ==== 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. | 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. | ||
Line 161: | Line 186: | ||
The basic idea is that Jade uses a shorthand HTML syntax, and indentation is used to nest elements. | 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:// | + | This should be enough to make you comfortable reading the [[http:// |
+ | |||
+ | <WRAP center round info 60%> | ||
+ | More later, time permitting. | ||
+ | </ | ||