[![Build Status](https://secure.travis-ci.org/visionmedia/jade.png)](http://travis-ci.org/visionmedia/jade)
# Jade - template engine
Jade is a high performance template engine heavily influenced by [Haml](http://haml-lang.com)
and implemented with JavaScript for [node](http://nodejs.org).
## Features
- client-side support
- great readability
- flexible indentation
- block-expansion
- mixins
- static includes
- attribute interpolation
- code is escaped by default for security
- contextual error reporting at compile & run time
- executable for compiling jade templates via the command line
- html 5 mode (using the _!!! 5_ doctype)
- optional memory caching
- combine dynamic and static tag classes
- parse tree manipulation via _filters_
- template inheritance
- block append / prepend
- supports [Express JS](http://expressjs.com) out of the box
- transparent iteration over objects, arrays, and even non-enumerables via `each`
- block comments
- no tag prefix
- AST filters
- filters
- :stylus must have [stylus](http://github.com/LearnBoost/stylus) installed
- :sass must have [sass.js](http://github.com/visionmedia/sass.js) installed
- :less must have [less.js](http://github.com/cloudhead/less.js) installed
- :markdown must have [markdown-js](http://github.com/evilstreak/markdown-js) installed or [node-discount](http://github.com/visionmedia/node-discount)
- :cdata
- :coffeescript must have [coffee-script](http://jashkenas.github.com/coffee-script/) installed
- [Emacs Mode](https://github.com/brianc/jade-mode)
- [Vim Syntax](https://github.com/digitaltoad/vim-jade)
- [TextMate Bundle](http://github.com/miksago/jade-tmbundle)
- [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs)
- [html2jade](https://github.com/donpark/html2jade) converter
## Implementations
- [php](http://github.com/everzet/jade.php)
- [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)
- [ruby](http://github.com/stonean/slim)
- [python](https://github.com/SyrusAkbary/pyjade)
## Installation
via npm:
npm install jade
## Browser Support
To compile jade to a single file compatible for client-side use simply execute:
$ make jade.js
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.
$ make jade.min.js
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
p Hello #{name}
Can then be as small as the following generated function:
```js
function anonymous(locals, attrs, escape, rethrow) {
var buf = [];
with (locals || {}) {
var interp;
buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
}
return buf.join("");
}
```
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
via `jade.attrs`, `jade.escape` etc.
```js
function anonymous(locals, attrs, escape, rethrow) {
var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
var buf = [];
with (locals || {}) {
var interp;
buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
}
return buf.join("");
}
```
## Public API
```javascript
var jade = require('jade');
// Compile a function
var fn = jade.compile('string of jade', options);
fn(locals);
```
### Options
- `self` Use a `self` namespace to hold the locals. _false by default_
- `locals` Local variable object
- `filename` Used in exceptions, and required when using includes
- `debug` Outputs tokens and function body generated
- `compiler` Compiler to replace jade's default
- `compileDebug` When `false` no debug instrumentation is compiled
## Syntax
### Line Endings
**CRLF** and **CR** are converted to **LF** before parsing.
### Tags
A tag is simply a leading word:
html
for example is converted to `<html></html>`
tags can also have ids:
div#container
which would render `<div id="container"></div>`
how about some classes?
div.user-details
renders `<div class="user-details"></div>`
multiple classes? _and_ an id? sure:
div#foo.bar.baz
renders `<div id="foo" class="bar baz"></div>`
div div div sure is annoying, how about:
#foo
.bar
which is syntactic sugar for what we have already been doing, and outputs:
`<div id="foo"></div><div class="bar"></div>`
### Tag Text
Simply place some content after the tag:
p wahoo!
renders `<p>wahoo!</p>`.
well cool, but how about large bodies of text:
p
| foo bar baz
| rawr rawr
| super cool
| go jade go
renders `<p>foo bar baz rawr.....</p>`
interpolation? yup! both types of text can utilize interpolation,
if we passed `{ name: 'tj', email: 'tj@vision-media.ca' }` to the compiled function we can do the following:
#user #{name} <#{email}>
outputs `<div id="user">tj <tj@vision-media.ca></div>`
Actually want `#{}` for some reason? escape it!
p \#{something}
now we have `<p>#{something}</p>`
We can also utilize the unescaped variant `!{html}`, so the following
will result in a literal script tag:
- var html = "<script></script>"
| !{html}
Nested tags that also contain text can optionally use a text block:
label
| Username:
input(name='user[name]')
or immediate tag text:
label Username:
input(name='user[name]')
Tags that accept _only_ text such as `script` and `style` do not
need the leading `|` character, for example:
html
head
title Example
script
if (foo) {
bar();
} else {
baz();
}
Once again as an alternative, we may use a trailing '.' to indicate a text block, for example:
p.
foo asdf
asdf
asdfasdfaf
asdf
asd.
outputs:
<p>foo asdf
asdf
asdfasdfaf
asdf
asd.
</p>
This 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:
p .
outputs:
<p>.</p>
It should be noted that text blocks should be doubled escaped. For example if you desire the following output.
</p>foo\bar</p>
use:
p.
foo\\bar
### Comments
Single line comments currently look the same as JavaScript comments,
aka "//" and must be placed on their own line:
// just some paragraphs
p foo
p bar
would output
<!-- just some paragraphs -->
<p>foo</p>
<p>bar</p>
Jade also supports unbuffered comments, by simply adding a hyphen:
//- will not output within markup
p foo
p bar
outputting
<p>foo</p>
<p>bar</p>
### Block Comments
A block comment is legal as well:
body
//
#content
h1 Example
outputting
<body>
<!--
<div id="content">
<h1>Example</h1>
</div>
-->
</body>
Jade supports conditional-comments as well, for example:
head
//if lt IE 8
script(src='/ie-sucks.js')
outputs:
<body>
<!--[if lt IE 8]>
<script src="/ie-sucks.js"></script>
<![endif]-->
</body>
### Nesting
Jade supports nesting to define the tags in a natural way:
ul
li.first
a(href
nodejs聊天室
5星 · 超过95%的资源 需积分: 45 91 浏览量
2012-02-12
20:21:18
上传
评论 15
收藏 811KB ZIP 举报
danhuang
- 粉丝: 177
- 资源: 9
最新资源
- 基于keras+fasterRCNN,在VOC格式的口罩数据集上训练,检测人群中有无戴口罩python源码+模型
- 基于opencv+qt5机器视觉的传统缺陷检测, 即采用标准图片和待测图片进行pixel to pixel的XOR操作源码+文档
- 管道内检测缺陷数据库管理系统源码+文档说明+sln
- 毕业设计-低功耗STM32F411开发板(原理图+PCB源文件+官方例程+驱动等)源码+文档说明+截图
- 基于yolov5-tensorRT检测+发动机缸体内壁缺陷检测系统源码+文档说明
- 基于C++实现的锂电池缺陷检测源码+文档说明
- push_version
- 软件自制图像批量压缩工具
- 经典缺陷检测算法源码整理包含PaDiM(2020ICPR)、PatchCore(2022CVPR)、SimpleNet+文档说明
- 基于深度学习的抗梯度噪声的缺陷检测器python源码+文档说明+模型的预训练
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
- 1
- 2
- 3
- 4
- 5
- 6
前往页