Scalate-Jade在Xitrum中的使用

Posted 子秦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Scalate-Jade在Xitrum中的使用相关的知识，希望对你有一定的参考价值。

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的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 用[email protected]作变量和不变量声明时，必须指定其类型，用-作变量和不变量声明时可以不指定其类型
- var data: String = "text"
- var htmlData = "<script>alert(1);</script><span>script</span>;"
- val data2: String = "text2"
[email protected] 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>用[email protected]作变量和不变量声明时，必须指定其类型，用-作变量和不变量声明时可以不指定其类型</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>&lt;script&gt;alert(1);&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;;</p>
    <p>TEXT2</p>
    <p>&lt;script&gt;alert(2);&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;;</p>
    <p>&lt;script&gt;alert(&quot;I‘m evil!&quot;);&lt;/script&gt;</p>
    <p>
      &lt;script&gt;alert(2);&lt;/script&gt;&lt;span&gt;script&lt;/span&gt;;
    </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&#x000A;line2&#x000A;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 &lt;raspberry/&gt; 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">
      &lt;script type=‘text/javascript‘&gt;
        //&lt;![CDATA[
          alert(&quot;Hello&quot;);
        //]]&gt;
      &lt;/script&gt;
    </div>

过滤器是指在 Scaml中可以使用其他标记语言的标记与Scaml的语法一起组合使用，以简化页面代码。

可用的过滤器有 :plain、:javascript、:css等等，具体参见前面所述的 Scalate的帮助文档。

以上是关于Scalate-Jade在Xitrum中的使用的主要内容，如果未能解决你的问题，请参考以下文章

Xitrum学习笔记08 - JavaScript and JSON

Xitrum学习笔记09 - 异步响应

Xitrum学习笔记02 - 构建 Xitrum 项目

Xitrum学习笔记20 - 和AkkaHazelcast组成集群

Xitrum学习笔记03 - Action和View

Xitrum学习笔记12 - 范围