模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎是把页面的静态部分和动态部分糅合在一起实现技术。
Jade是模板引擎中的一种，而Xitrum中默认使用Scalate。Scalate是一个基于Scala的模板引擎，它支持Jade形式的语言。
这个分类的随笔，主要介绍了Scalate-Jade在Xitrum中如何使用，和Jade语法有一些相同之处，但不同点也不少。
Scalate的帮助文档位于http://scalate.github.io/scalate/documentation/scaml-reference.html
如果打不开，可以用我下载的一份：链接: https://pan.baidu.com/s/1cfDefc 密码: gx4q
注意这篇文档中的实例代码主要以Haml为格式写的，但已经提及了Jade和Haml的主要不同，我的这篇随笔以Jade格式记录了文档中的一些实例。
1. 文档声明和头尾标签
!!! 5 //代表HTML5 html head title learning jade body h2 学习jade模板引擎
和原生Jade相同，Scalate-Jade的标签也是要有2个空格的缩进的。对于非闭合标签即不能有子标签的标签如h2，它下面的标签不可以对它再缩进，否则会报错。
无论标签在HTML中是闭合（如<title></title>），还是不闭合标签（如<br>），都是用 标签名+空格+内容。
浏览器中生成的HTML就是
<!DOCTYPE html> <html> <head> <title>learning jade</title> </head> <body> <h2>学习jade模板引擎</h2> </body> </html>
2. 其他内容
| 介绍内容 | Scalate-Jade代码 | 生成的HTML代码 |
|---|---|---|
|
元素属性 |
h3 元素属性 #id1.class1(class='class2') #id2.class1.class2 div#id3.class1.class2 a(href='http://imooc.com' target='_blank') link |
<h3>元素属性</h3> <div id="id1" class="class2"></div> <div id="id2" class="class1 class2"></div> <div id="id3" class="class1 class2"></div> <a href="http://imooc.com" target="_blank">link</a> |
|
元素的值，文本 |
p a(href='http://imooc.com' title='imooc jade study' data-uid='1000') link input(name='course' type='text' value='jade') input(name='type' type='checkbox' checked) |
<h3>元素的值，文本</h3> <p> <a href="http://imooc.com" title="imooc jade study" data-uid="1000">link</a> <input name="course" type="text" value="jade"/> <input name="type" type="checkbox" checked="checked"/> </p> |
| 混排的大段文本，其间有子标签的 |
h3 混排的大段文本，其间有子标签的 p | 1. aa strong 11 | 2. bb | 3. c |
<h3>混排的大段文本s</h3> <p> 1. aa <strong>11</strong> 2. bb 3. c </p> |
| 注释 |
h2 注释
h3 单行注释
/ h3.title(id='title' class='title3') imooc
h3 非缓冲注释，在生成的HTML中不会看到注释内容
-# #id.classname
h3 块注释
/
p
a(href='http://imooc.com' title='imooc jade study' data-uid='1000') link
input(name='course' type='text' value='jade1')
input(name='type' type='checkbox' checked)
-#
p
a(href='http://imooc.com' title='imooc jade study' data-uid='2000') link
input(name='course' type='text' value='jade2')
input(name='type' type='checkbox' checked)
h3 条件注释
/[if IE]
a(href="http://www.mozilla.com/en-US/firefox/")
bold Get Firefox
|
<h2>注释</h2> <h3>单行注释</h3> <!-- h3.title(id='title' class='title3') imooc --> <h3>非缓冲注释，在生成的HTML中不会看到注释内容</h3> <h3>块注释</h3> <!-- <p> <a href="http://imooc.com" title="imooc jade study" data-uid="1000">link</a> <input name="course" type="text" value="jade1"/> <input name="type" type="checkbox" checked="checked"/> </p> --> <h3>条件注释</h3> <!--[if IE]> <a href="http://www.mozilla.com/en-US/firefox/"> <bold>Get Firefox</bold> </a> <![endif]--> |
| 样式和脚本块 |
h2 样式和脚本块语法
style
| body {color: #ff6600;}
script
| var imoocCourse = 'jade';
|
<h2>样式和脚本块语法</h2> <style> body {color: #ff6600;} </style> <script> var imoocCourse = 'jade'; </script> |
| 声明变量和替换数据 |
h2 声明变量和替换数据，必须给变量赋予初始值，否则会在页面上报错。
var声明的变量可以不指定变量类型，val声明的不变量必须指定类型
br
span 用-@作变量和不变量声明时，必须指定其类型，用-作变量和不变量声明时可以不指定其类型
- var data: String = "text"
- var htmlData = "<script>alert(1);</script><span>script</span>;"
- val data2: String = "text2"
-@ val htmlData2: String = "<script>alert(2);</script><span>script</span>;"
- var newData: Int = 10
p= "This is the "+(newData)+"th cake!"
input(value='#{newData}')
|
<h2>声明变量和替换数据，必须给变量赋予初始值，否则会在页面上报错。</h2> var声明的变量可以不指定变量类型，val声明的不变量必须指定类型 <br/> <span>用-@作变量和不变量声明时，必须指定其类型，用-作变量和不变量声明时可以不指定其类型</span> <p>This is the 10th cake!</p> |
| 转义内容 |
h3 转义
p #{data.toUpperCase()}
p #{htmlData}
p= data2.toUpperCase()
p= htmlData2
p = """<script>alert("I'm evil!");</script>"""
p
&= htmlData2
|
<h3>转义</h3> <input value="10"/> <p>TEXT</p> <p><script>alert(1);</script><span>script</span>;</p> <p>TEXT2</p> <p><script>alert(2);</script><span>script</span>;</p> <p><script>alert("I'm evil!");</script></p> <p> <script>alert(2);</script><span>script</span>; </p> |
| 非转义 |
h3 非转义
p
!= htmlData
h2 非解析变量符: 输出&= != #{
p
!=htmlData
&=htmlData2
|
<h3>非转义</h3> <p> <script>alert(1);</script><span>script</span>; </p> <h2>非解析变量符: 输出&= != #{</h2> <p> !=htmlData &=htmlData2 </p> |
| 嵌入scala代码 |
h2 插入scala代码 = ，只把有代码的返回值生成到HTML当中
p
= List("hi", "there", "reader!").mkString(" ")
= "yo"
= List("hi", "there", "reader!").foreach(println)
h2 执行Scala
- var foo = "hello"
- foo += " there"
- foo += " you!"
p= foo
-
var foo2 = "hello"
foo2 += " there"
foo2 += " you!"
p= foo2
h3 执行Scala代码块1
- for(i <- 42 to 46)
p= i
p See, I can count!
h3 执行Scala代码块2
p
- 2 match
- case 1 =>
= "one"
- case 2 =>
= "two"
- case 3 =>
= "three"
|
<h2>插入scala代码 = ，只把有代码的返回值生成到HTML当中</h2> <p> hi there reader! yo </p> <h2>执行Scala</h2> <p>hello there you!</p> <p>hello there you!</p> <h3>执行Scala代码块1</h3> <p>42</p> <p>43</p> <p>44</p> <p>45</p> <p>46</p> <p>See, I can count!</p> <h3>执行Scala代码块2</h3> <p> two </p> |
| 保留空白 |
h3 ~ p = "line1 line2 line3" p ~ "line1 line2 line3" p ~~ "line1 line2 line3" |
<h3>~</h3> <p> line1 line2 line3 </p> <p> line1
line2
line3 </p> <p> line1 line2 line3 </p> |
| 过滤器 |
h2 过滤器 filters
h3 markdown
:markdown
Hi, this is **imooc** [link](http://imooc.com)
h3 &markdown 转义
- var flavor = "<raspberry/>"
#content
:&markdown
I *really* prefer #{flavor} jam.
h3 !markdown 非转义
#content
:!markdown
I *really* prefer #{flavor} jam.
h3 :javascript使用
#content
:javascript
alert("Hello");
h3 :css使用
#content
:css
body {color: #ff3300;}
h3 多个过滤器同时使用
#content
:escaped :javascript
alert("Hello");
|
<h2>过滤器 filters</h2> <h3>markdown</h3> <p>Hi, this is <strong>imooc</strong> <a href="http://imooc.com">link</a></p> <h3>&markdown 转义</h3> <div id="content"> <p>I <em>really</em> prefer <raspberry/> jam.</p> </div> <h3>!markdown 非转义</h3> <div id="content"> <p>I <em>really</em> prefer <raspberry/> jam.</p> </div> <h3>:javascript使用</h3> <div id="content"> <script type='text/javascript'> //<![CDATA[ alert("Hello"); //]]> </script> </div> <h3>:css使用</h3> <div id="content"> <style type='text/css'> /* <![CDATA[ */ body {color: #ff3300;} /* ]]> */ </style> </div> <h3>多个过滤器同时使用</h3> <div id="content"> <script type='text/javascript'> //<![CDATA[ alert("Hello"); //]]> </script> </div> |
过滤器是指在 Scaml中可以使用其他标记语言的标记与Scaml的语法一起组合使用，以简化页面代码。
可用的过滤器有 :plain、:javascript、:css等等，具体参见前面所述的 Scalate的帮助文档。