Scalate-Jade在Xitrum中的使用

时间：2017-05-18 15:47:43 阅读：456 评论：0 收藏：0 [点我收藏+]

标签：插入 asc javascrip 模板下载 ras 标签 ack his

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的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\nline2\nline3" p ~ "line1\nline2\nline3" p ~~ "line1\nline2\nline3"	<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的帮助文档。

Scalate-Jade在Xitrum中的使用

标签：插入 asc javascrip 模板下载 ras 标签 ack his

原文地址：http://www.cnblogs.com/sunspeedzy/p/6867756.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行