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:13] – [Creating a simple web page] mithat | javascript:jade [2014/03/18 03:16] – [Creating Web pages] mithat | ||
---|---|---|---|
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:// | To use Jade, you must first have Node.js installed on your system. On Windows and MacOS, you can use an [[http:// | ||
- | Once you have Node.js installed, you have the choice of installing | + | Once you have Node.js installed, you have the choice of installing |
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: < | 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: < | ||
Line 33: | Line 33: | ||
=== jade.compile === | === jade.compile === | ||
- | 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(' | ||
Line 88: | Line 88: | ||
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 115: | Line 136: | ||
</ | </ | ||
- | ===== 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 182: | ||
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. | ||
+ | </ | ||