{
"name": "jade",
"description": "Jade template engine",
"version": "0.27.7",
"author": {
"name": "TJ Holowaychuk",
"email": "tj@vision-media.ca"
},
"repository": {
"type": "git",
"url": "git://github.com/visionmedia/jade"
},
"main": "./index.js",
"bin": {
"jade": "./bin/jade"
},
"man": [
"./jade.1"
],
"dependencies": {
"commander": "0.6.1",
"mkdirp": "0.3.x",
"coffee-script": "~1.4.0"
},
"devDependencies": {
"mocha": "*",
"markdown": "*",
"stylus": "*",
"uubench": "*",
"should": "*",
"less": "*",
"uglify-js": "*"
},
"component": {
"scripts": {
"jade": "runtime.js"
}
},
"scripts": {
"prepublish": "npm prune"
},
"readme": " [](http://travis-ci.org/visionmedia/jade)\n\n# Jade - template engine\n\n Jade is a high performance template engine heavily influenced by [Haml](http://haml-lang.com)\n and implemented with JavaScript for [node](http://nodejs.org). For discussion join the [Google Group](http://groups.google.com/group/jadejs).\n\n## Test drive\n\n You can test drive Jade online [here](http://naltatis.github.com/jade-syntax-docs).\n\n## README Contents\n\n- [Features](#a1)\n- [Implementations](#a2)\n- [Installation](#a3)\n- [Browser Support](#a4)\n- [Public API](#a5)\n- [Syntax](#a6)\n - [Line Endings](#a6-1)\n - [Tags](#a6-2)\n - [Tag Text](#a6-3)\n - [Comments](#a6-4)\n - [Block Comments](#a6-5)\n - [Nesting](#a6-6)\n - [Block Expansion](#a6-7)\n - [Case](#a6-8)\n - [Attributes](#a6-9)\n - [HTML](#a6-10)\n - [Doctypes](#a6-11)\n- [Filters](#a7)\n- [Code](#a8)\n- [Iteration](#a9)\n- [Conditionals](#a10)\n- [Template inheritance](#a11)\n- [Block append / prepend](#a12)\n- [Includes](#a13)\n- [Mixins](#a14)\n- [Generated Output](#a15)\n- [Example Makefile](#a16)\n- [jade(1)](#a17)\n- [Tutorials](#a18)\n- [License](#a19)\n\n<a name=\"a1\"/>\n## Features\n\n - client-side support\n - great readability\n - flexible indentation\n - block-expansion\n - mixins\n - static includes\n - attribute interpolation\n - code is escaped by default for security\n - contextual error reporting at compile & run time\n - executable for compiling jade templates via the command line\n - html 5 mode (the default doctype)\n - optional memory caching\n - combine dynamic and static tag classes\n - parse tree manipulation via _filters_\n - template inheritance\n - block append / prepend\n - supports [Express JS](http://expressjs.com) out of the box\n - transparent iteration over objects, arrays, and even non-enumerables via `each`\n - block comments\n - no tag prefix\n - AST filters\n - filters\n - :stylus must have [stylus](http://github.com/LearnBoost/stylus) installed\n - :less must have [less.js](http://github.com/cloudhead/less.js) installed\n - :markdown must have [markdown-js](http://github.com/evilstreak/markdown-js), [node-discount](http://github.com/visionmedia/node-discount), or [marked](http://github.com/chjj/marked) installed\n - :cdata\n - :coffeescript must have [coffee-script](http://jashkenas.github.com/coffee-script/) installed\n - [Emacs Mode](https://github.com/brianc/jade-mode)\n - [Vim Syntax](https://github.com/digitaltoad/vim-jade)\n - [TextMate Bundle](http://github.com/miksago/jade-tmbundle)\n - [Coda/SubEtha syntax Mode](https://github.com/aaronmccall/jade.mode)\n - [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs)\n - [html2jade](https://github.com/donpark/html2jade) converter\n\n<a name=\"a2\"/>\n## Implementations\n\n - [php](http://github.com/everzet/jade.php)\n - [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)\n - [ruby](http://github.com/stonean/slim)\n - [python](https://github.com/SyrusAkbary/pyjade)\n - [java](https://github.com/neuland/jade4j)\n\n<a name=\"a3\"/>\n## Installation\n\nvia npm:\n\n```bash\n$ npm install jade\n```\n\n<a name=\"a4\"/>\n## Browser Support\n\n To compile jade to a single file compatible for client-side use simply execute:\n\n```bash\n$ make jade.js\n```\n\n Alternatively, if uglifyjs is installed via npm (`npm install uglify-js`) you may execute the following which will create both files. However each release builds these for you.\n\n```bash\n$ make jade.min.js\n```\n\n By default Jade instruments templates with line number statements such as `__.lineno = 3` for debugging purposes. When used in a browser it's useful to minimize this boiler plate, you can do so by passing the option `{ compileDebug: false }`. The following template\n\n```jade\np Hello #{name}\n```\n\n Can then be as small as the following generated function:\n\n```js\nfunction anonymous(locals, attrs, escape, rethrow) {\n var buf = [];\n with (locals || {}) {\n var interp;\n buf.push('\\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\\n</p>');\n }\n return buf.join(\"\");\n}\n```\n\n Through the use of Jade's `./runtime.js` you may utilize these pre-compiled templates on the client-side _without_ Jade itself, all you need is the associated utility functions (in runtime.js), which are then available as `jade.attrs`, `jade.escape` etc. To enable this you should pass `{ client: true }` to `jade.compile()` to tell Jade to reference the helper functions\n via `jade.attrs`, `jade.escape` etc.\n\n```js\nfunction anonymous(locals, attrs, escape, rethrow) {\n var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;\n var buf = [];\n with (locals || {}) {\n var interp;\n buf.push('\\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\\n</p>');\n }\n return buf.join(\"\");\n}\n```\n\n<a name=\"a5\"/>\n## Public API\n\n```js\nvar jade = require('jade');\n\n// Compile a function\nvar fn = jade.compile('string of jade', options);\nfn(locals);\n```\n\n### Options\n\n - `self` Use a `self` namespace to hold the locals _(false by default)_\n - `locals` Local variable object\n - `filename` Used in exceptions, and required when using includes\n - `debug` Outputs tokens and function body generated\n - `compiler` Compiler to replace jade's default\n - `compileDebug` When `false` no debug instrumentation is compiled\n - `pretty` Add pretty-indentation whitespace to output _(false by default)_\n\n<a name=\"a6\"/>\n## Syntax\n\n<a name=\"a6-1\"/>\n### Line Endings\n\n**CRLF** and **CR** are converted to **LF** before parsing.\n\n<a name=\"a6-2\"/>\n### Tags\n\nA tag is simply a leading word:\n\n```jade\nhtml\n```\n\nfor example is converted to `<html></html>`\n\ntags can also have ids:\n\n```jade\ndiv#container\n```\n\nwhich would render `<div id=\"container\"></div>`\n\nhow about some classes?\n\n```jade\ndiv.user-details\n```\n\nrenders `<div class=\"user-details\"></div>`\n\nmultiple classes? _and_ an id? sure:\n\n```jade\ndiv#foo.bar.baz\n```\n\nrenders `<div id=\"foo\" class=\"bar baz\"></div>`\n\ndiv div div sure is annoying, how about:\n\n```jade\n#foo\n.bar\n```\n\nwhich is syntactic sugar for what we have already been doing, and outputs:\n\n```html\n<div id=\"foo\"></div><div class=\"bar\"></div>\n```\n\n<a name=\"a6-3\"/>\n### Tag Text\n\nSimply place some content after the tag:\n\n```jade\np wahoo!\n```\n\nrenders `<p>wahoo!</p>`.\n\nwell cool, but how about large bodies of text:\n\n```jade\np\n | foo bar baz\n | rawr rawr\n | super cool\n | go jade go\n```\n\nrenders `<p>foo bar baz rawr.....</p>`\n\ninterpolation? yup! both types of text can utilize interpolation,\nif we passed `{ name: 'tj', email: 'tj@vision-media.ca' }` to the compiled function we can do the following:\n\n```jade\n#user #{name} <#{email}>\n```\n\noutputs `<div id=\"user\">tj <tj@vision-media.ca></div>`\n\nActually want `#{}` for some reason? escape it!\n\n```jade\np \\#{something}\n```\n\nnow we have `<p>#{something}</p>`\n\nWe can also utilize the unescaped variant `!{html}`, so the following\nwill result in a literal script tag:\n\n```jade\n- var html = \"<script></script>\"\n| !{html}\n```\n\nNested tags that also contain text can optionally use a text block:\n\n```jade\nlabel\n | Username:\n input(name='user[name]')\n```\n\nor immediate tag text:\n\n```jade\nlabel Username:\n input(name='user[name]')\n```\n\nTags that accept _only_ text such as `script` and `style` do not\nneed the leading `|` character, for example:\n\n```jade\nhtml\n head\n title Example\n script\n if (foo) {\n bar();\n } else {\n baz();\n }\n```\n\nOnce again as an alternative, we may use a trailing `.` to indicate a text block, for example:\n\n```jade\np.\n foo asdf\n asdf\n asdfasdfaf\n asdf\n asd.\n```\n\noutputs:\n\n```html\n<p>foo asdf\nasdf\n asdfasdfaf\n asdf\nasd.\n</p>\n```\n\nThis however differs from a trailing `.` followed by a space, which although is ignored by the Jade parser, tells Jade that this period is a literal:\n\n```jade\np .\n```\n\noutputs:\n\n```html\n<p>.</p>\n```\n\nIt should be noted that text blocks should be doubled escaped. For example if you desire the following output.\n\n```html\n<p>foo\\bar</p>\n```\n\nuse:\n\n```jade\np.\n foo\\\\bar\n```\n\n<a name=\"a6-4\"/>\n### Comments\n\nSingle line comments currently look the same as JavaScript comments,\naka `//` and must be placed on their own line:\n\n```jade\n// just some paragraphs\np foo\np bar\n```\n\nwould output\n\n```html\n<!-- just some paragraphs -->\n<p>foo</p>\n<p>bar</p>\n```\n\nJade also supports unbuffered comments, by simply adding a hyphen:\n\n```jade\n//- will not output within markup\np foo\np bar\n```\n\noutputting\n\n```html\n<p>foo</p>\n<p>bar</p>\n```\n\n<a name=\"a6-5\"/>\n### Block Comments\n\n A block comment is legal as well:\n\n```jade\nbody\n //\n #content\n h1 Example\n```\n\noutputting\n\n```html\n<body>\n <!--\n <div id=\"content\">\n <h1>Example</h1>\n </div>\n -->\n</body>\n```\n\nJade supports conditional-comments as well, for example:\n\n```jade\nhead\n //if lt IE 8\n script(src='/ie-sucks.js')\n```\n\noutputs:\n\n```html\n<body>\n <!--[if lt IE 8]>\n <script src=\"/ie-sucks.js\"></script>\n <![endif]-->\n</body>\n```\n\n<a name=\"a6-6\"/>\n### Nesting\n\n Jade supports nesting to define the tags in a natural way:\n\n```jade\nul\n li.first\n a(href='#') foo\n li\n a(href='#') bar\n li.last\n a(href='#') baz\n```\n\n<a name=\"a6-7\"/>\n### Block Expansion\n\n Block expansion allows you to create terse single-line nested tags,\n the following example is equivalent to the nesting example above.\n\n```jade\nul\n li.first: a(href='#') foo\n li: a(href='#') bar\n li.last: a(href='#') baz\n```\n\n<a name=\"a6-8\"/>\n### Case\n\n The case statement takes the following form:\n\n```jade\nhtml\n body\n friends = 10\n case friends\n when 0\n p you have no friends\n when 1\n p you have a friend\n default\n p you have #{friends} friends\n```\n\n Block expansion may also be used:\n\n```jade\nfriends = 5\n\nhtml\n body\n case friends\n when 0: p you have no friends\n when 1: p you have a friend\n default: p you have #{friends} friends\n```\n\n<a name=\"a6-9\"/>\n### Attributes\n\nJade currently supports `(` and `)` as attribute delimiters.\n\n```jade\na(href='/login', title='View login page') Login\n```\n\nWhen a value is `undefined` or `null` the attribute is _not_ added,\nso this is fine, it will not compile `something=\"null\"`.\n\n```jade\ndiv(something=null)\n```\n\nBoolean attributes are also supported:\n\n```jade\ninput(type=\"checkbox\", checked)\n```\n\nBoolean attributes with code will only output the attribute when `true`:\n\n```jade\ninput(type=\"checkbox\", checked=someValue)\n```\n\nMultiple lines work too:\n\n```jade\ninput(type='checkbox',\n name='agreement',\n checked)\n```\n\nMultiple lines without the comma work fine:\n\n```jade\ninput(type='checkbox'\n name='agreement'\n checked)\n```\n\nFunky whitespace? fine:\n\n```jade\ninput(\n type='checkbox'\n name='agreement'\n checked)\n```\n\nColons work:\n\n```jade\nrss(xmlns:atom=\"atom\")\n```\n\nSuppose we have the `user` local `{ id: 12, name: 'tobi' }`\nand we wish to create an anchor tag with `href` pointing to \"/user/12\"\nwe could use regular javascript concatenation:\n\n```jade\na(href='/user/' + user.id)= user.name\n```\n\nor we could use jade's interpolation, which I added because everyone\nusing Ruby or CoffeeScript seems to think this is legal js..:\n\n```jade\na(href='/user/#{user.id}')= user.name\n```\n\nThe `class` attribute is special-cased when an array is given,\nallowing you to pass an array such as `bodyClasses = ['user', 'authenticated']` directly:\n\n```jade\nbody(class=bodyClasses)\n```\n\n<a name=\"a6-10\"/>\n### HTML\n\n Inline html is fine, we can use the pipe syntax to\n write arbitrary text, in this case some html:\n\n```jade\nhtml\n body\n | <h1>Title</h1>\n | <p>foo bar baz</p>\n```\n\n Or we can use the trailing `.` to indicate to Jade that we\n only want text in this block, allowing us to omit the pipes:\n\n```jade\nhtml\n body.\n <h1>Title</h1>\n <p>foo bar baz</p>\n```\n\n Both of these examples yield the same result:\n\n```html\n<html><body><h1>Title</h1>\n<p>foo bar baz</p>\n</body></html>\n```\n\n The same rule applies for anywhere you can have text\n in jade, raw html is fine:\n\n```jade\nhtml\n body\n h1 User <em>#{name}</em>\n```\n\n<a name=\"a6-11\"/>\n### Doctypes\n\nTo add a doctype simply use `!!!`, or `doctype` followed by an optional value:\n\n```jade\n!!!\n```\n\nor\n\n```jade\ndoctype\n```\n\nWill output the _html 5_ doctype, however:\n\n```jade\n!!! transitional\n```\n\nWill output the _transitional_ doctype.\n\nDoctypes are case-insensitive, so the following are equivalent:\n\n```jade\ndoctype Basic\ndoctype basic\n```\n\nit's also possible to simply pass a doctype literal:\n\n```jade\ndoctype html PUBLIC \"-//W3C//DTD XHTML Basic 1.1//EN\n```\n\nyielding:\n\n```html\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML Basic 1.1//EN>\n```\n\nBelow are the doctypes defined by default, which can easily be extended:\n\n```js\nvar doctypes = exports.doctypes = {\n '5': '<!DOCTYPE html>',\n 'default': '<!DOCTYPE html>',\n 'xml': '<?xml version=\"1.0\" encoding=\"utf-8\" ?>',\n 'transitional': '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">',\n 'strict': '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">',\n 'frameset': '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Frameset//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd\">',\n '1.1': '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">',\n 'basic': '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML Basic 1.1//EN\" \"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd\">',\n 'mobile': '<!DOCTYPE html PUBLIC \"-//WAPFORUM//DTD XHTML Mobile 1.2//EN\" \"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd\">'\n};\n```\n\nTo alter the default simply change:\n\n```js\njade.doctypes.default = 'whatever you want';\n```\n\n<a name=\"a7\"/>\n## Filters\n\nFilters are prefixed with `:`, for example `:markdown` and\npass the following block of text to an arbitrary function for processing. View the _features_\nat the top of this document for available filters.\n\n```jade\nbody\n :markdown\n Woah! jade _and_ markdown, very **cool**\n we can even link to [stuff](http://google.com)\n```\n\nRenders:\n\n```html\n<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href=\"http://google.com\">stuff</a></p></body>\n```\n\n<a name=\"a8\"/>\n## Code\n\nJade currently supports three classifications of executable code. The first\nis prefixed by `-`, and is not buffered:\n\n```jade\n- var foo = 'bar';\n```\n\nThis can be used for conditionals, or iteration:\n\n```jade\n- for (var key in obj)\n p= obj[key]\n```\n\nDue to Jade's buffering techniques the following is valid as well:\n\n```jade\n- if (foo)\n ul\n li yay\n li foo\n li worked\n- else\n p oh no! didnt work\n```\n\nHell, even verbose iteration:\n\n```jade\n- if (items.length)\n ul\n - items.forEach(function(item){\n li= item\n - })\n```\n\nAnything you want!\n\nNext up we have _escaped_ buffered code, which is used to\nbuffer a return value, which is prefixed by `=`:\n\n```jade\n- var foo = 'bar'\n= foo\nh1= foo\n```\n\nWhich outputs `bar<h1>bar</h1>`. Code buffered by `=` is escaped\nby default for security, however to output unescaped return values\nyou may use `!=`:\n\n```jade\np!= aVarContainingMoreHTML\n```\n\n Jade also has designer-friendly variants, making the literal JavaScript\n more expressive and declarative. For example the following assignments\n are equivalent, and the expression is still regular javascript:\n\n```jade\n- var foo = 'foo ' + 'bar'\nfoo = 'foo ' + 'bar'\n```\n\n Likewise Jade has first-class `if`, `else if`, `else`, `until`, `while`, `unless` among others, however you must remember that the expressions are still regular javascript:\n\n```jade\nif foo == 'bar'\n ul\n li yay\n li foo\n li worked\nelse\n p oh no! didnt work\n```\n\n<a name=\"a9\"/>\n## Iteration\n\n Along with vanilla JavaScript Jade also supports a subset of\n constructs that allow you to create more designer-friendly templates,\n one of these constructs is `each`, taking the form:\n\n```jade\neach VAL[, KEY] in OBJ\n```\n\nAn example iterating over an array:\n\n```jade\n- var items = [\"one\", \"two\", \"three\"]\neach item in items\n li= item\n```\n\noutputs:\n\n```html\n<li>one</li>\n<li>two</li>\n<li>three</li>\n```\n\niterating an array with index:\n\n```jade\nitems = [\"one\", \"two\", \"three\"]\neach item, i in items\n li #{item}: #{i}\n```\n\noutputs:\n\n```html\n<li>one: 0</li>\n<li>two: 1</li>\n<li>three: 2</li>\n```\n\niterating an object's keys and values:\n\n```jade\nobj = { foo: 'bar' }\neach val, key in obj\n li #{key}: #{val}\n```\n\nwould output `<li>foo: bar</li>`\n\nInternally Jade converts these statements to regular\nJavaScript loops such as `users.forEach(function(user){`,\nso lexical scope and nesting applies as it would with regular\nJavaScript:\n\n```jade\neach user in users\n each role in user.roles\n li= role\n```\n\n You may also use `for` if you prefer:\n\n```jade\nfor user in users\n for role in user.roles\n li= role\n```\n\n<a name=\"a10\"/>\n## Conditionals\n\n Jade conditionals are equivalent to those using the code (`-`) prefix,\n however allow you to ditch parenthesis to become more designer friendly,\n however keep in mind the expression given is _regular_ JavaScript:\n\n```jade\nfor user in users\n if user.role == 'admin'\n p #{user.name} is an admin\n else\n p= user.name\n```\n\n is equivalent to the following using vanilla JavaScript literals:\n\n```jade\nfor user in users\n - if (user.role == 'admin')\n p #{user.name} is an admin\n - else\n p= user.name\n```\n\n Jade also provides have `unless` which is equivalent to `if (!(expr))`:\n\n```jade\nfor user in users\n unless user.isAnonymous\n p\n | Click to view\n a(href='/users/' + user.id)= user.name\n```\n\n<a name=\"a11\"/>\n## Template inheritance\n\n Jade supports template inheritance via the `block` and `extends` keywords. A block is simply a \"block\" of Jade that may be replaced within a child template, this process is recursive. To activate template inheritance in Express 2.x you must add: `app.set('view options', { layout: false });`.\n\n Jade blocks can provide default content if desired, however optional as shown below by `block scripts`, `block content`, and `block foot`.\n\n```jade\nhtml\n head\n h1 My Site - #{title}\n block scripts\n script(src='/jquery.js')\n body\n block content\n block foot\n #footer\n p some footer content\n```\n\n Now to extend the layout, simply create a new file and use the `extends` directive as shown below, giving the path (with or without the .jade extension). You may now define one or more blocks that will override the parent block content, note that here the `foot` block is _not_ redefined and will output \"some footer content\".\n\n```jade\nextends layout\n\nblock scripts\n script(src='/jquery.js')\n script(src='/pets.js')\n\nblock content\n h1= title\n each pet in pets\n include pet\n```\n\n It's also possible to override a block to provide additional blocks, as shown in the following example where `content` now exposes a `sidebar` and `primary` block for overriding, or the child template could override `content` all together.\n\n```jade\nextends regular-layout\n\nblock content\n .sidebar\n block sidebar\n p nothing\n .primary\n block primary\n p nothing\n```\n\n<a name=\"a12\"/>\n## Block append / prepend\n\n Jade allows you to _replace_ (default), _prepend_, or _append_ blocks. Suppose for example you have default scripts in a \"head\" block that you wish to utilize on _every_ page, you might do this:\n\n```jade\nhtml\n head\n block head\n script(src='/vendor/jquery.js')\n script(src='/vendor/caustic.js')\n body\n block content\n```\n\n Now suppose you have a page of your application for a JavaScript game, you want some game related scripts as well as these defaults, you can simply `append` the block:\n\n```jade\nextends layout\n\nblock append head\n script(src='/vendor/three.js')\n script(src='/game.js')\n```\n\n When using `block append` or `block prepend` the `block` is optional:\n\n```jade\nextends layout\n\nappend head\n script(src='/vendor/three.js')\n script(src='/game.js')\n```\n\n<a name=\"a13\"/>\n## Includes\n\n Includes allow you to statically include chunks of Jade,\n or other content like css, or html which lives in separate files. The classical example is including a header and footer. Suppose we have the following directory structure:\n\n ./layout.jade\n ./includes/\n ./head.jade\n ./foot.jade\n\nand the following _layout.jade_:\n\n```jade\nhtml\n include includes/head\n body\n h1 My Site\n p Welcome to my super amazing site.\n include includes/foot\n```\n\nboth includes _includes/head_ and _includes/foot_ are\nread relative to the `filename` option given to _layout.jade_,\nwhich should be an absolute path to this file, however Express does this for you. Include then parses these files, and injects the AST produced to render what you would expect:\n\n```html\n<html>\n <head>\n <title>My Site</title>\n <script src=\"/javascripts/jquery.js\">\n </script><script src=\"/javascripts/app.js\"></script>\n </head>\n <body>\n <h1>My Site</h1>\n <p>Welcome to my super lame site.</p>\n <div id=\"footer\">\n <p>Copyright>(c) foobar</p>\n </div>\n </body>\n</html>\n```\n\n As mentioned `include` can be used to include other content\n such as html or css. By providing an extension Jade will not\n assume that the file is Jade source and will include it as\n a literal:\n\n```jade\nhtml\n body\n include content.html\n```\n\n Include directives may also accept a block, in which case the\n the given block will be appended to the _last_ block defined\n in the file. For example if `head.jade` contains:\n\n```jade\nhead\n script(src='/jquery.js')\n```\n\n We may append values by providing a block to `include head`\n as shown below, adding the two scripts.\n\n```jade\nhtml\n include head\n script(src='/foo.js')\n script(src='/bar.js')\n body\n h1 test\n```\n\n You may also `yield` within an included template, allowing you to explicitly mark where the block given to `include` will be placed. Suppose for example you wish to prepend scripts rather than append, you might do the following:\n\n```jade\nhead\n yield\n script(src='/jquery.js')\n script(src='/jquery.ui.js')\n```\n\n Since included Jade is parsed and literally merges the AST, lexically scoped variables function as if the included Jade was written right in the same file. This means `include` may be used as sort of partial, for example suppose we have `user.jade` which utilizes a `user` variable.\n\n```jade\nh1= user.name\np= user.occupation\n```\n\nWe could then simply `include user` while iterating users, and since the `user` variable is already defined within the loop the included template will have access to it.\n\n```jade\nusers = [{ name: 'Tobi', occupation: 'Ferret' }]\n\neach user in users\n .user\n include user\n```\n\nyielding:\n\n```html\n<div class=\"user\">\n <h1>Tobi</h1>\n <p>Ferret</p>\n</div>\n```\n\nIf we wanted to expose a different variable name as `user` since `user.jade` references that name, we could simply define a new variable as shown here with `user = person`:\n\n```jade\neach person in users\n .user\n user = person\n include user\n```\n\n<a name=\"a14\"/>\n## Mixins\n\n Mixins are converted to regular JavaScript functions in\n the compiled template that Jade constructs. Mixins may\n take arguments, though not required:\n\n```jade\nmixin list\n ul\n li foo\n li bar\n li baz\n```\n\n Utilizing a mixin without args looks similar, just without a block:\n\n```jade\nh2 Groceries\nmixin list\n```\n\n Mixins may take one or more arguments as well, the arguments\n are regular javascripts expressions, so for example the following:\n\n```jade\nmixin pets(pets)\n ul.pets\n - each pet in pets\n li= pet\n\nmixin profile(user)\n .user\n h2= user.name\n mixin pets(user.pets)\n```\n\n Would yield something similar to the following html:\n\n```html\n<div class=\"user\">\n <h2>tj</h2>\n <ul class=\"pets\">\n <li>tobi</li>\n <li>loki</li>\n <li>jane</li>\n <li>manny</li>\n </ul>\n</div>\n```\n\n<a name=\"a15\"/>\n## Generated Output\n\n Suppose we have the following Jade:\n\n```jade\n- var title = 'yay'\nh1.title #{title}\np Just an example\n```\n\n When the `compileDebug` option is not explicitly `false`, Jade\n will compile the function instrumented with `__.lineno = n;`, which\n in the event of an exception is passed to `rethrow()` which constructs\n a useful message relative to the initial Jade input.\n\n```js\nfunction anonymous(locals) {\n var __ = { lineno: 1, input: \"- var title = 'yay'\\nh1.title #{title}\\np Just an example\", filename: \"testing/test.js\" };\n var rethrow = jade.rethrow;\n try {\n var attrs = jade.attrs, escape = jade.escape;\n var buf = [];\n with (locals || {}) {\n var interp;\n __.lineno = 1;\n var title = 'yay'\n __.lineno = 2;\n buf.push('<h1');\n buf.push(attrs({ \"class\": ('title') }));\n buf.push('>');\n buf.push('' + escape((interp = title) == null ? '' : interp) + '');\n buf.push('</h1>');\n __.lineno = 3;\n buf.push('<p>');\n buf.push('Just an example');\n buf.push('</p>');\n }\n return buf.join(\"\");\n } catch (err) {\n rethrow(err, __.input, __.filename, __.lineno);\n }\n}\n```\n\nWhen the `compileDebug` option _is_ explicitly `false`, this instrumentation\nis stripped, which is very helpful for light-weight client-side templates. Combining Jade's options with the `./runtime.js` file in this repo allows you\nto toString() compiled templates and avoid running the entire Jade library on\nthe client, increasing performance, and decreasing the amount of JavaScript\nrequired.\n\n```js\nfunction anonymous(locals) {\n var attrs = jade.attrs, escape = jade.escape;\n var buf = [];\n with (locals || {}) {\n var interp;\n var title = 'yay'\n buf.push('<h1');\n buf.push(attrs({ \"class\": ('title') }));\n buf.push('>');\n buf.push('' + escape((interp = title) == null ? '' : interp) + '');\n buf.push('</h1>');\n buf.push('<p>');\n buf.push('Just an example');\n buf.push('</p>');\n }\n return buf.join(\"\");\n}\n```\n\n<a name=\"a16\"/>\n## Example Makefile\n\n Below is an example Makefile used to compile _pages/*.jade_\n into _pages/*.html_ files by simply executing `make`.\n\n```make\nJADE = $(shell find pages/*.jade)\nHTML = $(JADE:.jade=.html)\n\nall: $(HTML)\n\n%.html: %.jade\n jade < $< --path $< > $@\n\nclean:\n rm -f $(HTML)\n\n.PHONY: clean\n```\n\nthis can be combined with the `watch(1)` command to produce\na watcher-like behaviour:\n\n```bash\n$ watch make\n```\n\n<a name=\"a17\"/>\n## jade(1)\n\n```\n\nUsage: jade [options] [dir|file ...]\n\nOptions:\n\n -h, --help output usage information\n -V, --version output the version number\n -o, --obj <str> javascript options object\n -O, --out <dir> output the compiled html to <dir>\n -p, --path <path> filename used to resolve includes\n -P, --pretty compile pretty html output\n -c, --client compile for client-side runtime.js\n -D, --no-debug compile without debugging (smaller functions)\n\nExamples:\n\n # translate jade the templates dir\n $ jade templates\n\n # create {foo,bar}.html\n $ jade {foo,bar}.jade\n\n # jade over stdio\n $ jade < my.jade > my.html\n\n # jade over stdio\n $ echo \"h1 Jade!\" | jade\n\n # foo, bar dirs rendering to /tmp\n $ jade foo bar --out /tmp\n\n```\n\n<a name=\"a18\"/>\n## Tutorials\n\n - cssdeck interactive [Jade syntax tutorial](http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax)\n - cssdeck interactive [Jade logic tutorial](http://cssdeck.com/labs/jade-templating-tutorial-codecast-part-2)\n - in [Japanese](http://blog.craftgear.net/4f501e97c1347ec934000001/title/10%E5%88%86%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8Bjade%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)\n\n<a name=\"a19\"/>\n## License\n\n(The MIT License)\n\nCopyright (c) 2009-2010 TJ Holowaychuk <tj@vision-media.ca>\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n",
"readmeFilename": "Readme.md",
"_id": "jade@0.27.7",
"dist": {
"shasum": "93ed04857d030ff158cc3b2cf21d7b6d7e655d5a"
},
"_from": "jade"
}
|
Download
