Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängigen positionen aus zu spielen. Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Readme_zh-cn.md 28KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285
  1. # Jade - 模板引擎
  2. Jade 是一个高性能的模板引擎,它深受 [Haml](http://haml-lang.com) 影响,它是用 JavaScript 实现的, 并且可以供 [Node](http://nodejs.org) 使用.
  3. 翻译: [草依山](http://jser.me) 等
  4. ## 声明
  5. 从 Jade `v0.31.0` 开始放弃了对于 `<script>` 和 `<style>` 标签的平文本支持. 这个问题你可以在 `<script> <style>` 标签后加上 `.` 来解决.
  6. 希望这一点能让 Jade 对新手更友好, 同时也不影响到 Jade 本身的能力或者导致过度冗长.
  7. 如果你有大量的文件需要转换你可以用下 [fix-jade](https://github.com/ForbesLindesay/fix-jade) 尝试自动完成这个过程.
  8. ## Test drive
  9. 你可以在网上[试玩 Jade](http://naltatis.github.com/jade-syntax-docs).
  10. ## README 目录
  11. - [特性](#a1)
  12. - [其它实现](#a2)
  13. - [安装](#a3)
  14. - [浏览器支持](#a4)
  15. - [公开 API](#a5)
  16. - [语法](#a6)
  17. - [行结束标志](#a6-1)
  18. - [标签](#a6-2)
  19. - [标签文本](#a6-3)
  20. - [注释](#a6-4)
  21. - [块注释](#a6-5)
  22. - [内联](#a6-6)
  23. - [块展开](#a6-7)
  24. - [Case](#a6-8)
  25. - [属性](#a6-9)
  26. - [HTML](#a6-10)
  27. - [Doctypes](#a6-11)
  28. - [过滤器](#a7)
  29. - [代码](#a8)
  30. - [循环](#a9)
  31. - [条件语句](#a10)
  32. - [模板继承](#a11)
  33. - [Block append/prepend](#a12)
  34. - [包含](#a13)
  35. - [Mixins](#a14)
  36. - [产生输出](#a15)
  37. - [Makefile 的一个例子](#a16)
  38. - [命令行的 Jade](#a17)
  39. - [教程](#a18)
  40. - [License](#a19)
  41. <a name="a1"/>
  42. ## 特性
  43. - 客户端支持
  44. - 代码高可读
  45. - 灵活的缩进
  46. - 块展开
  47. - Mixins
  48. - 静态包含
  49. - 属性改写
  50. - 安全,默认代码是转义的
  51. - 运行时和编译时上下文错误报告
  52. - 命令行下编译jade模板
  53. - HTML5 模式 (使用 ~~`!!! 5`~~ `doctype html` 文档类型)
  54. - 在内存中缓存(可选)
  55. - 合并动态和静态标签类
  56. - 可以通过 `filters` 修改树
  57. - 模板继承
  58. - 原生支持 [Express JS](http://expressjs.com)
  59. - 通过 `each` 枚举对象、数组甚至是不能枚举的对象
  60. - 块注释
  61. - 没有前缀的标签
  62. - AST Filters
  63. - 过滤器
  64. - `:stylus` 必须已经安装 [stylus](http://github.com/LearnBoost/stylus)
  65. - `:less` 必须已经安装 [less.js](http://github.com/cloudhead/less.js)
  66. - `:markdown` 必须已经安装 [markdown-js](http://github.com/evilstreak/markdown-js) 或者 [node-discount](http://github.com/visionmedia/node-discount)
  67. - `:cdata`
  68. - `:coffeescript` 必须已经安装[coffee-script](http://jashkenas.github.com/coffee-script/)
  69. - [Emacs Mode](https://github.com/brianc/jade-mode)
  70. - [Vim Syntax](https://github.com/digitaltoad/vim-jade)
  71. - [TextMate Bundle](http://github.com/miksago/jade-tmbundle)
  72. - [Coda/SubEtha syntax Mode](https://github.com/aaronmccall/jade.mode)
  73. - [Screencasts](http://tjholowaychuk.com/post/1004255394/jade-screencast-template-engine-for-nodejs)
  74. - [html2jade](https://github.com/donpark/html2jade) converter
  75. <a name="a2"/>
  76. ## 其它实现
  77. - [php](http://github.com/everzet/jade.php)
  78. - [scala](http://scalate.fusesource.org/versions/snapshot/documentation/scaml-reference.html)
  79. - [ruby](https://github.com/slim-template/slim)
  80. - [python](https://github.com/SyrusAkbary/pyjade)
  81. - [java](https://github.com/neuland/jade4j)
  82. <a name="a3"/>
  83. ## 安装
  84. 通过 NPM:
  85. ```sh
  86. npm install jade
  87. ```
  88. <a name="a4"/>
  89. ## 浏览器支持
  90. 把 Jade 编译为一个可供浏览器使用的单文件,只需要简单的执行:
  91. ```sh
  92. $ make jade.js
  93. ```
  94. 如果你已经安装了 uglifyjs (`npm install uglify-js`),你可以执行下面的命令它会生成所有的文件。其实每一个正式版本里都帮你做了这事。
  95. ```sh
  96. make jade.min.js
  97. ```
  98. 默认情况下,为了方便调试Jade会把模板组织成带有形如 `__.lineno = 3` 的行号的形式。
  99. 在浏览器里使用的时候,你可以通过传递一个选项 `{ compileDebug: false }` 来去掉这个。
  100. 下面的模板
  101. ```sh
  102. p Hello #{name}
  103. ```
  104. 会被翻译成下面的函数:
  105. ```js
  106. function anonymous(locals, attrs, escape, rethrow) {
  107. var buf = [];
  108. with (locals || {}) {
  109. var interp;
  110. buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
  111. }
  112. return buf.join("");
  113. }
  114. ```
  115. 通过使用 Jade 的 `./runtime.js`你可以在浏览器使用这些预编译的模板而不需要使用 Jade, 你只需要使用 `runtime.js` 里的工具函数, 它们会放在 `jade.attrs`, `jade.escape` 这些里。 把选项 `{ client: true }` 传递给 `jade.compile()`, Jade 会把这些帮助函数的引用放在`jade.attrs`, `jade.escape`.
  116. ```js
  117. function anonymous(locals, attrs, escape, rethrow) {
  118. var attrs = jade.attrs, escape = jade.escape, rethrow = jade.rethrow;
  119. var buf = [];
  120. with (locals || {}) {
  121. var interp;
  122. buf.push('\n<p>Hello ' + escape((interp = name) == null ? '' : interp) + '\n</p>');
  123. }
  124. return buf.join("");
  125. }
  126. ```
  127. <a name="a5"/>
  128. ## 公开 API
  129. ```javascript
  130. var jade = require('jade');
  131. // Compile a function
  132. var fn = jade.compile('string of jade', options);
  133. fn(locals);
  134. ```
  135. ### 选项
  136. - `self` 使用 `self` 命名空间来持有本地变量. _(默认为 `false`)_
  137. - `locals` 本地变量对象
  138. - `filename` 异常发生时使用,includes 时必需
  139. - `debug` 输出 token 和翻译后的函数体
  140. - `compiler` 替换掉 jade 默认的编译器
  141. - `compileDebug` `false`的时候调试的结构不会被输出
  142. - `pretty` 为输出加上了漂亮的空格缩进 _(默认为 `false`)_
  143. <a name="a6"/>
  144. ## 语法
  145. <a name="a6-1"/>
  146. ### 行结束标志
  147. **CRLF** 和 **CR** 会在编译之前被转换为 **LF**
  148. <a name="a6-2"/>
  149. ### 标签
  150. 标签就是一个简单的单词:
  151. ```jade
  152. html
  153. ```
  154. 它会被转换为 `<html></html>`
  155. 标签也是可以有 id 的:
  156. ```jade
  157. div#container
  158. ```
  159. 它会被转换为 `<div id="container"></div>`
  160. 怎么加 class 呢?
  161. ```jade
  162. div.user-details
  163. ```
  164. 转换为 `<div class="user-details"></div>`
  165. 多个 class 和 id? 也是可以搞定的:
  166. div#foo.bar.baz
  167. 转换为 `<div id="foo" class="bar baz"></div>`
  168. 不停的 `div div div` 很讨厌啊 , 可以这样:
  169. ```jade
  170. #foo
  171. .bar
  172. ```
  173. 这个算是我们的语法糖,它已经被很好的支持了,上面的会输出:
  174. ```html
  175. <div id="foo"></div><div class="bar"></div>
  176. ```
  177. <a name="a6-3"/>
  178. ### 标签文本
  179. 只需要简单的把内容放在标签之后:
  180. ```jade
  181. p wahoo!
  182. ```
  183. 它会被渲染为 `<p>wahoo!</p>`.
  184. 很帅吧,但是大段的文本怎么办呢:
  185. ```jade
  186. p
  187. | foo bar baz
  188. | rawr rawr
  189. | super cool
  190. | go jade go
  191. ```
  192. 渲染为 `<p>foo bar baz rawr.....</p>`
  193. 怎么和数据结合起来? 所有类型的文本展示都可以和数据结合起来,如果我们把 `{ name: 'tj', email: 'tj@vision-media.ca' }` 传给编译函数,下面是模板上的写法:
  194. ```jade
  195. #user #{name} &lt;#{email}&gt;
  196. ```
  197. 它会被渲染为 `<div id="user">tj &lt;tj@vision-media.ca&gt;</div>`
  198. 当就是要输出 `#{}` 的时候怎么办? 转义一下!
  199. p \#{something}
  200. 它会输出 `<p>#{something}</p>`
  201. 同样可以使用非转义的变量 `!{html}`, 下面的模板将直接输出一个 `<script>` 标签:
  202. ```jade
  203. - var html = "<script></script>"
  204. | !{html}
  205. ```
  206. 内联标签同样可以使用文本块来包含文本:
  207. ```jade
  208. label
  209. | Username:
  210. input(name='user[name]')
  211. ```
  212. 或者直接使用标签文本:
  213. ```jade
  214. label Username:
  215. input(name='user[name]')
  216. ```
  217. _只_ 包含文本的标签,比如 `<script>`, `<style>`, 和 `<textarea>` 不需要前缀 `|` 字符, 比如:
  218. ```jade
  219. html
  220. head
  221. title Example
  222. script
  223. if (foo) {
  224. bar();
  225. } else {
  226. baz();
  227. }
  228. ```
  229. 这里还有一种选择,可以使用 `.` 来开始一段文本块,比如:
  230. ```jade
  231. p.
  232. foo asdf
  233. asdf
  234. asdfasdfaf
  235. asdf
  236. asd.
  237. ```
  238. 会被渲染为:
  239. ```jade
  240. <p>foo asdf
  241. asdf
  242. asdfasdfaf
  243. asdf
  244. asd
  245. .
  246. </p>
  247. ```
  248. 这和带一个空格的 `.` 是不一样的, 带空格的会被 Jade 的解析器忽略,当作一个普通的文字:
  249. ```jade
  250. p .
  251. ```
  252. 渲染为:
  253. ```jade
  254. <p>.</p>
  255. ```
  256. 需要注意的是文本块需要两次转义。比如想要输出下面的文本:
  257. ```jade
  258. </p>foo\bar</p>
  259. ```
  260. 使用:
  261. ```jade
  262. p.
  263. foo\\bar
  264. ```
  265. <a name="a6-4"/>
  266. ### 注释
  267. 单行注释和 JavaScript 里是一样的,通过 `//` 来开始,并且必须单独一行:
  268. ```jade
  269. // just some paragraphs
  270. p foo
  271. p bar
  272. ```
  273. 渲染为:
  274. ```html
  275. <!-- just some paragraphs -->
  276. <p>foo</p>
  277. <p>bar</p>
  278. ```
  279. Jade 同样支持不输出的注释,加一个短横线就行了:
  280. ```jade
  281. //- will not output within markup
  282. p foo
  283. p bar
  284. ```
  285. 渲染为:
  286. ```html
  287. <p>foo</p>
  288. <p>bar</p>
  289. ```
  290. <a name="a6-5"/>
  291. ### 块注释
  292. 块注释也是支持的:
  293. ```jade
  294. body
  295. //
  296. #content
  297. h1 Example
  298. ```
  299. 渲染为:
  300. ```html
  301. <body>
  302. <!--
  303. <div id="content">
  304. <h1>Example</h1>
  305. </div>
  306. -->
  307. </body>
  308. ```
  309. Jade 同样很好的支持了条件注释:
  310. ```jade
  311. body
  312. //if IE
  313. a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox
  314. ```
  315. 渲染为:
  316. ```html
  317. <body>
  318. <!--[if IE]>
  319. <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a>
  320. <![endif]-->
  321. </body>
  322. ```
  323. <a name="a6-6"/>
  324. ### 内联
  325. Jade 支持以自然的方式定义标签嵌套:
  326. ```jade
  327. ul
  328. li.first
  329. a(href='#') foo
  330. li
  331. a(href='#') bar
  332. li.last
  333. a(href='#') baz
  334. ```
  335. <a name="a6-7"/>
  336. ### 块展开
  337. 块展开可以帮助你在一行内创建嵌套的标签,下面的例子和上面的是一样的:
  338. ```jade
  339. ul
  340. li.first: a(href='#') foo
  341. li: a(href='#') bar
  342. li.last: a(href='#') baz
  343. ```
  344. <a name="a6-8"/>
  345. ### Case
  346. `case` 表达式按下面这样的形式写:
  347. ```jade
  348. html
  349. body
  350. friends = 10
  351. case friends
  352. when 0
  353. p you have no friends
  354. when 1
  355. p you have a friend
  356. default
  357. p you have #{friends} friends
  358. ```
  359. 块展开在这里也可以使用:
  360. ```jade
  361. friends = 5
  362. html
  363. body
  364. case friends
  365. when 0: p you have no friends
  366. when 1: p you have a friend
  367. default: p you have #{friends} friends
  368. ```
  369. <a name="a6-9"/>
  370. ### 属性
  371. Jade 现在支持使用 `(` 和 `)` 作为属性分隔符
  372. ```jade
  373. a(href='/login', title='View login page') Login
  374. ```
  375. 当一个值是 `undefined` 或者 `null` 属性 _不_ 会被加上,
  376. 所以呢,它不会编译出 'something="null"'.
  377. ```jade
  378. div(something=null)
  379. ```
  380. Boolean 属性也是支持的:
  381. ```jade
  382. input(type="checkbox", checked)
  383. ```
  384. 使用代码的 Boolean 属性只有当属性为 `true` 时才会输出:
  385. ```jade
  386. input(type="checkbox", checked=someValue)
  387. ```
  388. 多行同样也是可用的:
  389. ```jade
  390. input(type='checkbox',
  391. name='agreement',
  392. checked)
  393. ```
  394. 多行的时候可以不加逗号:
  395. ```jade
  396. input(type='checkbox'
  397. name='agreement'
  398. checked)
  399. ```
  400. 加点空格,格式好看一点?同样支持
  401. ```jade
  402. input(
  403. type='checkbox'
  404. name='agreement'
  405. checked)
  406. ```
  407. 冒号也是支持的:
  408. ```jade
  409. rss(xmlns:atom="atom")
  410. ```
  411. 假如我有一个 `user` 对象 `{ id: 12, name: 'tobi' }`
  412. 我们希望创建一个指向 `/user/12` 的链接 `href`, 我们可以使用普通的 JavaScript 字符串连接,如下:
  413. ```jade
  414. a(href='/user/' + user.id)= user.name
  415. ```
  416. 或者我们使用 Jade 的修改方式, 这个我想很多使用 Ruby 或者 CoffeeScript 的人会看起来像普通的 JS..:
  417. ```jade
  418. a(href='/user/#{user.id}')= user.name
  419. ```
  420. `class` 属性是一个特殊的属性,你可以直接传递一个数组,比如 `bodyClasses = ['user', 'authenticated']` :
  421. ```jade
  422. body(class=bodyClasses)
  423. ```
  424. <a name="a6-10"/>
  425. ### HTML
  426. 内联的 HTML 是可以的,我们可以使用管道定义一段文本 :
  427. ```jade
  428. html
  429. body
  430. | <h1>Title</h1>
  431. | <p>foo bar baz</p>
  432. ```
  433. 或者我们可以使用 `.` 来告诉 Jade 我们需要一段文本:
  434. ```jade
  435. html
  436. body.
  437. <h1>Title</h1>
  438. <p>foo bar baz</p>
  439. ```
  440. 上面的两个例子都会渲染成相同的结果:
  441. ```jade
  442. <html><body><h1>Title</h1>
  443. <p>foo bar baz</p>
  444. </body></html>
  445. ```
  446. 这条规则适应于在 Jade 里的任何文本:
  447. ```
  448. html
  449. body
  450. h1 User <em>#{name}</em>
  451. ```
  452. <a name="a6-11"/>
  453. ### Doctypes
  454. 添加文档类型只需要简单的使用 `!!!`, 或者 `doctype` 跟上下面的可选项:
  455. ```jade
  456. !!!
  457. ```
  458. 会渲染出 _transitional_ 文档类型, 或者:
  459. ```jade
  460. !!! 5
  461. ```
  462. ```jade
  463. !!! html
  464. ```
  465. ```jade
  466. doctype html
  467. ```
  468. Doctype 是大小写不敏感的, 所以下面两个是一样的:
  469. ```jade
  470. doctype Basic
  471. doctype basic
  472. ```
  473. 当然也是可以直接传递一段文档类型的文本:
  474. ```jade
  475. doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
  476. ```
  477. 渲染后:
  478. ```html
  479. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
  480. ```
  481. 会输出 _HTML5_ 文档类型. 下面的默认的文档类型,可以很简单的扩展:
  482. ```javascript
  483. var doctypes = exports.doctypes = {
  484. '5': '<!DOCTYPE html>',
  485. 'xml': '<?xml version="1.0" encoding="utf-8" ?>',
  486. 'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
  487. 'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
  488. 'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
  489. 'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
  490. '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
  491. 'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
  492. 'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
  493. };
  494. ```
  495. 通过下面的代码可以很简单的改变默认的文档类型:
  496. ```javascript
  497. jade.doctypes.default = 'whatever you want';
  498. ```
  499. <a name="a7"/>
  500. ## 过滤器
  501. 过滤器前缀 `:`, 比如 `:markdown` 会把下面块里的文本交给专门的函数进行处理。查看顶部 _特性_ 里有哪些可用的过滤器。
  502. ```jade
  503. body
  504. :markdown
  505. Woah! jade _and_ markdown, very **cool**
  506. we can even link to [stuff](http://google.com)
  507. ```
  508. 渲染为:
  509. ```html
  510. <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>
  511. ```
  512. <a name="a8"/>
  513. ## 代码
  514. Jade 目前支持三种类型的可执行代码。第一种是前缀 `-`, 这是不会被输出的:
  515. ```jade
  516. - var foo = 'bar';
  517. ```
  518. 这可以用在条件语句或者循环中:
  519. ```jade
  520. - for (var key in obj)
  521. p= obj[key]
  522. ```
  523. 由于 Jade 的缓存技术,下面的代码也是可以的:
  524. ```jade
  525. - if (foo)
  526. ul
  527. li yay
  528. li foo
  529. li worked
  530. - else
  531. p oh no! didnt work
  532. ```
  533. 哈哈,甚至是很长的循环也是可以的:
  534. - if (items.length)
  535. ul
  536. - items.forEach(function(item){
  537. li= item
  538. - })
  539. 所以你想要的!
  540. 下一步我们要 _转义_ 输出的代码,比如我们返回一个值,只要前缀一个 `=`:
  541. ```jade
  542. - var foo = 'bar'
  543. = foo
  544. h1= foo
  545. ```
  546. 它会渲染为 `bar<h1>bar</h1>`. 为了安全起见,使用 `=` 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 `!=`:
  547. ```jade
  548. p!= aVarContainingMoreHTML
  549. ```
  550. Jade 同样是设计师友好的,它可以使 JavaScript 更直接更富表现力。比如下面的赋值语句是相等的,同时表达式还是通常的 JavaScript:
  551. ```jade
  552. - var foo = 'foo ' + 'bar'
  553. foo = 'foo ' + 'bar'
  554. ```
  555. Jade 会把 `if`, `else if`, `else`, `until`, `while`, `unless` 同别的优先对待, 但是你得记住它们还是普通的 JavaScript:
  556. ```jade
  557. if foo == 'bar'
  558. ul
  559. li yay
  560. li foo
  561. li worked
  562. else
  563. p oh no! didnt work
  564. ```
  565. <a name="a9"/>
  566. ## 循环
  567. 尽管已经支持 JavaScript 原生代码,Jade 还是支持了一些特殊的标签,它们可以让模板更加易于理解,其中之一就是 `each`, 这种形式:
  568. ```jade
  569. each VAL[, KEY] in OBJ
  570. ```
  571. 一个遍历数组的例子 :
  572. ```jade
  573. - var items = ["one", "two", "three"]
  574. each item in items
  575. li= item
  576. ```
  577. 渲染为:
  578. ```html
  579. <li>one</li>
  580. <li>two</li>
  581. <li>three</li>
  582. ```
  583. 遍历一个数组同时带上索引:
  584. ```jade
  585. items = ["one", "two", "three"]
  586. each item, i in items
  587. li #{item}: #{i}
  588. ```
  589. 渲染为:
  590. ```html
  591. <li>one: 0</li>
  592. <li>two: 1</li>
  593. <li>three: 2</li>
  594. ```
  595. 遍历一个数组的键值:
  596. ```jade
  597. obj = { foo: 'bar' }
  598. each val, key in obj
  599. li #{key}: #{val}
  600. ```
  601. 将会渲染为:`<li>foo: bar</li>`
  602. Jade 在内部会把这些语句转换成原生的 JavaScript 语句,就像使用 `users.forEach(function(user){`, 词法作用域和嵌套会像在普通的 JavaScript 中一样:
  603. ```jade
  604. each user in users
  605. each role in user.roles
  606. li= role
  607. ```
  608. 如果你喜欢,也可以使用 `for` :
  609. ```jade
  610. for user in users
  611. for role in user.roles
  612. li= role
  613. ```
  614. <a name="a10"/>
  615. ## 条件语句
  616. Jade 条件语句和使用了(`-`) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号,这样会看上去对设计师更友好一点,
  617. 同时要在心里记住这个表达式渲染出的是 _常规_ JavaScript:
  618. ```jade
  619. for user in users
  620. if user.role == 'admin'
  621. p #{user.name} is an admin
  622. else
  623. p= user.name
  624. ```
  625. 和下面的使用了常规 JavaScript 的代码是相等的:
  626. ```jade
  627. for user in users
  628. - if (user.role == 'admin')
  629. p #{user.name} is an admin
  630. - else
  631. p= user.name
  632. ```
  633. Jade 同时支持 `unless`, 这和 `if (!(expr))` 是等价的:
  634. ```jade
  635. for user in users
  636. unless user.isAnonymous
  637. p
  638. | Click to view
  639. a(href='/users/' + user.id)= user.name
  640. ```
  641. <a name="a11"/>
  642. ## 模板继承
  643. Jade 支持通过 `block` 和 `extends` 关键字来实现模板继承。 一个块就是一个 Jade 的 block ,它将在子模板中实现,同时是支持递归的。
  644. Jade 块如果没有内容,Jade 会添加默认内容,下面的代码默认会输出 `block scripts`, `block content`, 和 `block foot`.
  645. ```jade
  646. html
  647. head
  648. h1 My Site - #{title}
  649. block scripts
  650. script(src='/jquery.js')
  651. body
  652. block content
  653. block foot
  654. #footer
  655. p some footer content
  656. ```
  657. 现在我们来继承这个布局,简单创建一个新文件,像下面那样直接使用 `extends`,给定路径(可以选择带 `.jade` 扩展名或者不带). 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 `foot` 块 _没有_ 定义,所以它还会输出父级的 "some footer content"。
  658. ```jade
  659. extends extend-layout
  660. block scripts
  661. script(src='/jquery.js')
  662. script(src='/pets.js')
  663. block content
  664. h1= title
  665. each pet in pets
  666. include pet
  667. ```
  668. 同样可以在一个子块里添加块,就像下面实现的块 `content` 里又定义了两个可以被实现的块 `sidebar` 和 `primary`,或者子模板直接实现 `content`。
  669. ```jade
  670. extends regular-layout
  671. block content
  672. .sidebar
  673. block sidebar
  674. p nothing
  675. .primary
  676. block primary
  677. p nothing
  678. ```
  679. <a name="a12"/>
  680. ## 前置、追加代码块
  681. Jade允许你 _替换_ (默认)、 _前置_ 和 _追加_ blocks. 比如,假设你希望在 _所有_ 页面的头部都加上默认的脚本,你可以这么做:
  682. ```jade
  683. html
  684. head
  685. block head
  686. script(src='/vendor/jquery.js')
  687. script(src='/vendor/caustic.js')
  688. body
  689. block content
  690. ```
  691. 现在假设你有一个Javascript游戏的页面,你希望在默认的脚本之外添加一些游戏相关的脚本,你可以直接`append`上代码块:
  692. ```jade
  693. extends layout
  694. block append head
  695. script(src='/vendor/three.js')
  696. script(src='/game.js')
  697. ```
  698. 使用 `block append` 或 `block prepend` 时 `block` 是可选的:
  699. ```jade
  700. extends layout
  701. append head
  702. script(src='/vendor/three.js')
  703. script(src='/game.js')
  704. ```
  705. <a name="a13"/>
  706. ## 包含
  707. Includes 允许你静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, HTML 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹:
  708. ```
  709. ./layout.jade
  710. ./includes/
  711. ./head.jade
  712. ./tail.jade
  713. ```
  714. 下面是 `layout.jade` 的内容:
  715. ```jade
  716. html
  717. include includes/head
  718. body
  719. h1 My Site
  720. p Welcome to my super amazing site.
  721. include includes/foot
  722. ```
  723. 这两个包含 `includes/head` 和 `includes/foot` 都会读取相对于给 `layout.jade` 参数`filename` 的路径的文件, 这是一个绝对路径,不用担心Express帮你搞定这些了。Include 会解析这些文件,并且插入到已经生成的语法树中,然后渲染为你期待的内容:
  724. ```html
  725. <html>
  726. <head>
  727. <title>My Site</title>
  728. <script src="/javascripts/jquery.js">
  729. </script><script src="/javascripts/app.js"></script>
  730. </head>
  731. <body>
  732. <h1>My Site</h1>
  733. <p>Welcome to my super lame site.</p>
  734. <div id="footer">
  735. <p>Copyright>(c) foobar</p>
  736. </div>
  737. </body>
  738. </html>
  739. ```
  740. 前面已经提到,`include` 可以包含比如 HTML 或者 CSS 这样的内容。给定一个扩展名后,Jade 不会把这个文件当作一个 Jade 源代码,并且会把它当作一个普通文本包含进来:
  741. ```
  742. html
  743. head
  744. //- css and js have simple filters that wrap them in
  745. <style> and <script> tags, respectively
  746. include stylesheet.css
  747. include script.js
  748. body
  749. //- "markdown" files will use the "markdown" filter
  750. to convert Markdown to HTML
  751. include introduction.markdown
  752. //- html files have no filter and are included verbatim
  753. include content.html
  754. ```
  755. Include 也可以接受块内容,给定的块将会附加到包含文件 _最后_ 的块里。 举个例子,`head.jade` 包含下面的内容:
  756. ```jade
  757. head
  758. script(src='/jquery.js')
  759. ```
  760. 我们可以像下面给`include head`添加内容, 这里是添加两个脚本.
  761. ```
  762. html
  763. include head
  764. script(src='/foo.js')
  765. script(src='/bar.js')
  766. body
  767. h1 test
  768. ```
  769. 在被包含的模板中,你也可以使用`yield`语句。`yield`语句允许你明确地标明`include`的代码块的放置位置。比如,假设你希望把代码块放在scripts之前,而不是附加在scripts之后:
  770. ```jade
  771. head
  772. yield
  773. script(src='/jquery.js')
  774. script(src='/jquery.ui.js')
  775. ```
  776. 由于被包含的Jade会按字面解析并合并到AST中,词法范围的变量的效果和直接写在同一个文件中的相同。这就意味着`include`可以用作partial的替代,例如,假设我们有一个引用了`user`变量的user.jade`文件:
  777. ```jade
  778. h1= user.name
  779. p= user.occupation
  780. ```
  781. 接着,当我们迭代users的时候,只需简单地加上`include user`。因为在循环中`user`变量已经被定义了,被包含的模板可以访问它。
  782. ```jade
  783. users = [{ name: 'Tobi', occupation: 'Ferret' }]
  784. each user in users
  785. .user
  786. include user
  787. ```
  788. 以上代码会生成:
  789. ```html
  790. <div class="user">
  791. <h1>Tobi</h1>
  792. <p>Ferret</p>
  793. </div>
  794. ```
  795. `user.jade`引用了`user`变量,如果我们希望使用一个不同的变量`user`,那么我们可以直接定义一个新变量`user = person`,如下所示:
  796. ```jade
  797. each person in users
  798. .user
  799. user = person
  800. include user
  801. ```
  802. <a name="a14"/>
  803. ## Mixins
  804. Mixins 在编译的模板里会被 Jade 转换为普通的 JavaScript 函数。 Mixins 可以还参数,但不是必需的:
  805. ```jade
  806. mixin list
  807. ul
  808. li foo
  809. li bar
  810. li baz
  811. ```
  812. 使用不带参数的 mixin 看上去非常简单,在一个块外:
  813. ```jade
  814. h2 Groceries
  815. mixin list
  816. ```
  817. Mixins 也可以带一个或者多个参数,参数就是普通的 JavaScript 表达式,比如下面的例子:
  818. ```jade
  819. mixin pets(pets)
  820. ul.pets
  821. - each pet in pets
  822. li= pet
  823. mixin profile(user)
  824. .user
  825. h2= user.name
  826. mixin pets(user.pets)
  827. ```
  828. 会输出像下面的 HTML:
  829. ```html
  830. <div class="user">
  831. <h2>tj</h2>
  832. <ul class="pets">
  833. <li>tobi</li>
  834. <li>loki</li>
  835. <li>jane</li>
  836. <li>manny</li>
  837. </ul>
  838. </div>
  839. ```
  840. <a name="a15"/>
  841. ## 产生输出
  842. 假设我们有下面的 Jade 源码:
  843. ```jade
  844. - var title = 'yay'
  845. h1.title #{title}
  846. p Just an example
  847. ```
  848. 当 `compileDebug` 选项不是 `false`, Jade 会编译时会把函数里加上 `__.lineno = n;`, 这个参数会在编译出错时传递给 `rethrow()`, 而这个函数会在 Jade 初始输出时给出一个有用的错误信息。
  849. ```js
  850. function anonymous(locals) {
  851. var __ = { lineno: 1, input: "- var title = 'yay'\nh1.title #{title}\np Just an example", filename: "testing/test.js" };
  852. var rethrow = jade.rethrow;
  853. try {
  854. var attrs = jade.attrs, escape = jade.escape;
  855. var buf = [];
  856. with (locals || {}) {
  857. var interp;
  858. __.lineno = 1;
  859. var title = 'yay'
  860. __.lineno = 2;
  861. buf.push('<h1');
  862. buf.push(attrs({ "class": ('title') }));
  863. buf.push('>');
  864. buf.push('' + escape((interp = title) == null ? '' : interp) + '');
  865. buf.push('</h1>');
  866. __.lineno = 3;
  867. buf.push('<p>');
  868. buf.push('Just an example');
  869. buf.push('</p>');
  870. }
  871. return buf.join("");
  872. } catch (err) {
  873. rethrow(err, __.input, __.filename, __.lineno);
  874. }
  875. }
  876. ```
  877. 当 `compileDebug` 参数是 `false`, 这个参数会被去掉,这样对于轻量级的浏览器端模板是非常有用的。结合 Jade 的参数和当前源码库里的 `./runtime.js` 文件,你可以通过 `toString()` 来编译模板而不需要在浏览器端运行整个 Jade 库,这样可以提高性能,也可以减少载入的 JavaScript 数量。
  878. ```js
  879. function anonymous(locals) {
  880. var attrs = jade.attrs, escape = jade.escape;
  881. var buf = [];
  882. with (locals || {}) {
  883. var interp;
  884. var title = 'yay'
  885. buf.push('<h1');
  886. buf.push(attrs({ "class": ('title') }));
  887. buf.push('>');
  888. buf.push('' + escape((interp = title) == null ? '' : interp) + '');
  889. buf.push('</h1>');
  890. buf.push('<p>');
  891. buf.push('Just an example');
  892. buf.push('</p>');
  893. }
  894. return buf.join("");
  895. }
  896. ```
  897. <a name="a16"/>
  898. ## Makefile 的一个例子
  899. 通过执行 `make`, 下面的 Makefile 例子可以把 `pages/*.jade` 编译为 `pages/*.html` 。
  900. ```make
  901. JADE = $(shell find pages/*.jade)
  902. HTML = $(JADE:.jade=.html)
  903. all: $(HTML)
  904. %.html: %.jade
  905. jade < $< --path $< > $@
  906. clean:
  907. rm -f $(HTML)
  908. .PHONY: clean
  909. ```
  910. 这个可以和 `watch(1)` 命令起来产生像下面的行为:
  911. ```sh
  912. $ watch make
  913. ```
  914. <a name="a17"/>
  915. ## 命令行的 Jade
  916. ```
  917. 使用: jade [options] [dir|file ...]
  918. 选项:
  919. -h, --help 输出帮助信息
  920. -v, --version 输出版本号
  921. -o, --out <dir> 输出编译后的 HTML 到 <dir>
  922. -O, --obj <str> JavaScript 选项
  923. -p, --path <path> 在处理 stdio 时,查找包含文件时的查找路径
  924. -P, --pretty 格式化 HTML 输出
  925. -c, --client 编译浏览器端可用的 runtime.js
  926. -D, --no-debug 关闭编译的调试选项(函数会更小)
  927. -w, --watch 监视文件改变自动刷新编译结果
  928. Examples:
  929. # 编译整个目录
  930. $ jade templates
  931. # 生成 {foo,bar}.html
  932. $ jade {foo,bar}.jade
  933. # 在标准IO下使用jade
  934. $ jade < my.jade > my.html
  935. # 在标准IO下使用jade, 同时指定用于查找包含的文件
  936. $ jade < my.jade -p my.jade > my.html
  937. # 在标准IO下使用jade
  938. $ echo "h1 Jade!" | jade
  939. # foo, bar 目录渲染到 /tmp
  940. $ jade foo bar --out /tmp
  941. ```
  942. *注意: 从 `v0.31.0` 的 `-o` 选项已经指向 `--out`, `-O` 相应做了交换*
  943. <a name="a18"/>
  944. ## 教程
  945. - cssdeck interactive [Jade syntax tutorial](http://cssdeck.com/labs/learning-the-jade-templating-engine-syntax)
  946. - cssdeck interactive [Jade logic tutorial](http://cssdeck.com/labs/jade-templating-tutorial-codecast-part-2)
  947. - 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)
  948. <a name="a19"/>
  949. ## License
  950. (The MIT License)
  951. Copyright (c) 2009-2010 TJ Holowaychuk &lt;tj@vision-media.ca&gt;
  952. Permission is hereby granted, free of charge, to any person obtaining
  953. a copy of this software and associated documentation files (the
  954. 'Software'), to deal in the Software without restriction, including
  955. without limitation the rights to use, copy, modify, merge, publish,
  956. distribute, sublicense, and/or sell copies of the Software, and to
  957. permit persons to whom the Software is furnished to do so, subject to
  958. the following conditions:
  959. The above copyright notice and this permission notice shall be
  960. included in all copies or substantial portions of the Software.
  961. THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
  962. EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  963. MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
  964. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
  965. CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
  966. TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
  967. SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.