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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
extends ../reference.jade
block documentation
h1 Mixins
p Mixins allow you to create reusable blocks of jade.
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
//- Declaration
mixin list
ul
li foo
li bar
li baz
//- Use
+list
+list
.col-lg-6
+html
:htmlsrc
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
p They are compiled to functions and can take arguments:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
mixin pet(name)
li.pet= name
ul
+pet('cat')
+pet('dog')
+pet('pig')
.col-lg-6
+html
:htmlsrc
<ul>
<li class="pet">cat</li>
<li class="pet">dog</li>
<li class="pet">pig</li>
</ul>
h2 Mixin Blocks
p Mixins can also take a block of jade to act as the content:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
p Amazing article
.col-lg-6
+html
:htmlsrc
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>No content provided</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
h2 Mixin Attributes
p Mixins also get an implicit attributes argument taken from the attributes passed to the mixin:
.row(data-control='interactive')
.col-lg-6
+jade
:jadesrc
mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes.class, href=href)= name
+link('/foo', 'foo')(class="btn")
.col-lg-6
+html
:htmlsrc
<a class="btn" href="/foo">foo</a>
.panel.panel-info
.panel-heading Note
.panel-body.
The values in #[code attributes] are already escaped so you should
use #[code !=] to avoid escaping them a second time.
|
