forked from naltatis/jade-syntax-docs
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
66 lines (62 loc) · 9.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html><html><head><title>Jade 语法文档的例子</title><link href="css/google-web-fonts.css" rel="stylesheet" type="text/css"><link href="assets/global.min.css" rel="stylesheet" type="text/css"><script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js"></script><script src="assets/global.min.js"></script><meta name="description" content="一份 Jade 模版引擎的的交互式语法文档"><link rel="author" href="https://plus.google.com/u/0/113306279128990179378"></head><body data-spy="scroll" data-target=".subnav" data-offset="150"><a href="https://github.com/coffee-js/jade-syntax-docs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="img/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a><div class="container"><header class="jumbotron subhead"><h1>Jade 语法文档<small>例子</small></h1><p class="lead">这份<strong>交互式</strong>文档展示了 Jade 模版语言最重要的一些功能.<br>
你可以随手尝试这些例子, 即时查看对应的 HTML 输出.<br>
访问<a href="https://github.com/visionmedia/jade/">官方文档</a>看更为详细的说明.</p><div class="subnav"><ul class="nav nav-pills"><li><a href="#basics">基础</a></li><li><a href="#id-classes">id, classes</a></li><li><a href="#nesting">嵌套</a></li><li><a href="#text">文本</a></li><li><a href="#variables">变量</a></li><li><a href="#escaping">转义</a></li><li><a href="#attributes">属性</a></li><li><a href="#comments">注释</a></li><li><a href="#if">if, unless</a></li><li><a href="#for">for, each</a></li><li><a href="#case">case</a></li><li><a href="#mixin">mixin</a></li><li><a href="#about">关于</a></li></ul></div></header><section id="basics"><div class="page-header"><h2>基础</h2></div><div class="row"><div class="span6"><div class="jadeLabel"></div><textarea class="size7 jade">!!! 5
html
head
title my jade template
body
h1 Hello #{name}</textarea><textarea class="size1 json">{"name": "Bob"}</textarea><div class="dataLabel"></div></div><div class="span6 right"><div class="htmlLabel"></div><textarea readonly class="size9 html"></textarea></div></div></section><section id="id-classes"><div class="page-header"><h2>id & classes</h2></div><div class="row"><div class="span6"><textarea class="size5 jade">#content
.block
input#bar.foo1.foo2</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div></section><section id="nesting"><div class="page-header"><h2>嵌套</h2></div><div class="row"><div class="span6"><textarea class="size5 jade">ul#books
li
a(href="#book-a") Book A
li
a(href="#book-b") Book B</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="text"><div class="page-header"><h2>文本</h2></div><div class="row"><div class="span6"><textarea class="size3 jade">h1 foo
h2= book.name
h3 "#{book.name}" for #{book.price} €</textarea><textarea class="size1 json">{"book": {"name": "Hello", "price": 12.99}}</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">p
| foo bar
| hello world</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">p.
foo bar
hello world</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="variables"><div class="page-header"><h2>变量</h2></div><div class="row"><div class="span6"><textarea class="size2 jade">foo = "hello world"
h1= foo</textarea></div><div class="span6 right"><textarea readonly class="size2 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">foo = book.name + " world"
h1= foo</textarea><textarea class="size1 json">{"book": {"name": "hello"}}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="escaping"><div class="page-header"><h2>转义</h2></div><div class="row"><div class="span6"><textarea class="size1 jade">li Hello <em>World</em></textarea></div><div class="span6 right"><textarea readonly class="size1 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">li= name
li!= name</textarea><textarea class="size1 json">{"name": "Hello <em>World</em>"}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">li Say #{name}
li Say !{name}</textarea><textarea class="size1 json">{"name": "Hello <em>World</em>"}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="attributes"><div class="page-header"><h2>属性</h2></div><div class="row"><div class="span6"><textarea class="size1 jade">input(type="text", placeholder="your name")</textarea></div><div class="span6 right"><textarea readonly class="size1 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size1 jade">input(type=type, value='Hello #{name}')</textarea><textarea class="size1 json">{"type": "text", "name": "Bob"}</textarea></div><div class="span6 right"><textarea readonly class="size3 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size1 jade">input(checked=true, disabled=false)</textarea></div><div class="span6 right"><textarea readonly class="size1 html"></textarea></div></div></section><section id="comments"><div class="page-header"><h2>注释</h2></div><div class="row"><div class="span6"><textarea class="size2 jade">// single line comment
//- invisible single line comment</textarea></div><div class="span6 right"><textarea readonly class="size2 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size4 jade">// block comment
h1 hello world
//- invisible block comment
h2 how are you?</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">// if lt IE 8
script(src='/ie.js')</textarea></div><div class="span6 right"><textarea readonly class="size2 html"></textarea></div></div></section><section id="if"><div class="page-header"><h2>if & unless</h2></div><div class="row"><div class="span6"><textarea class="size4 jade">if name == "Bob"
h1 Hello Bob
else
h1 My name is #{name}</textarea><textarea class="size1 json">{"name": "Bob"}</textarea></div><div class="span6 right"><textarea readonly class="size6 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size2 jade">unless errors
p no errors</textarea><textarea class="size1 json">{"errors": false}</textarea></div><div class="span6 right"><textarea readonly class="size4 html"></textarea></div></div></section><section id="for"><div class="page-header"><h2>for & each</h2></div><div class="row"><div class="span6"><textarea class="size3 jade">select
each book, i in books
option(value=i) Book #{book}</textarea><textarea class="size1 json">{"books": ["A", "B", "C"]}</textarea></div><div class="span6 right"><textarea readonly class="size5 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size5 jade">ul
for book in books
li= book
else
li sorry, no books!</textarea><textarea class="size1 json">{"books": []}</textarea></div><div class="span6 right"><textarea readonly class="size7 html"></textarea></div></div></section><section id="case"><div class="page-header"><h2>case</h2></div><div class="row"><div class="span6"><textarea class="size7 jade">case name
when "Bob"
p Hi Bob!
when "Alice"
p Howdy Alice!
default
p Hello #{name}!</textarea><textarea class="size1 json">{"name": "Bob"}</textarea></div><div class="span6 right"><textarea readonly class="size9 html"></textarea></div></div></section><section id="mixin"><div class="page-header"><h2>mixin</h2></div><div class="row"><div class="span6"><textarea class="size6 jade">mixin book(name, price)
li #{name} for #{price} €
ul#books
+book("Book A", 12.99)
+book("Book B", 5.99)</textarea></div><div class="span6 right"><textarea readonly class="size6 html"></textarea></div></div><hr><div class="row"><div class="span6"><textarea class="size6 jade">mixin book(name, price)
div(attributes)= name
+book("Book A")#first
+book("Book B")(title="book b")
+book("Book C").last</textarea></div><div class="span6 right"><textarea readonly class="size6 html"></textarea></div></div></section></div><footer id="about"><p>作者: <strong>naltatis</strong> </p><p>关注作者 <a href="https://github.com/naltatis" title="naltatis on github">github </a>和 <a href="https://twitter.com/naltatis" title="naltatis on twitter">twitter</a></p><p><a href="http://naltatis.github.io/jade-syntax-docs/">英文原站</a></p><p>翻译 <a href="http://coffee-js.org">coffee-js</a></p></footer><script defer>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41753901-9', 'coffee-js.org');
ga('send', 'pageview');
</script></body></html>