Scalate-Jade在Xitrum中的使用

時間  2019-11-24
標籤 scalate jade xitrum 使用 欄目 Node.js 简体版
原文   原文鏈接

模板引擎是爲了使用戶界面與業務數據（內容）分離而產生的，它能夠生成特定格式的文檔，用於網站的模板引擎就會生成一個標準的HTML文檔。javascript

模板引擎是把頁面的靜態部分和動態部分糅合在一塊兒實現技術。css

Jade是模板引擎中的一種，而Xitrum中默認使用Scalate。Scalate是一個基於Scala的模板引擎，它支持Jade形式的語言。html

這個分類的隨筆，主要介紹了Scalate-Jade在Xitrum中如何使用，和Jade語法有一些相同之處，但不一樣點也很多。java

Scalate的幫助文檔位於http://scalate.github.io/scalate/documentation/scaml-reference.htmlgit

若是打不開，能夠用我下載的一份：連接: https://pan.baidu.com/s/1cfDefc 密碼: gx4qgithub

注意這篇文檔中的實例代碼主要以Haml爲格式寫的，但已經說起了Jade和Haml的主要不一樣，個人這篇隨筆以Jade格式記錄了文檔中的一些實例。瀏覽器

1. 文檔聲明和頭尾標籤

!!! 5                     //表明HTML5
html
  head
    title learning jade
  body
    h2 學習jade模板引擎

和原生Jade相同，Scalate-Jade的標籤也是要有2個空格的縮進的。對於非閉合標籤即不能有子標籤的標籤如h2，它下面的標籤不能夠對它再縮進，不然會報錯。markdown

不管標籤在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>&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的幫助文檔。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程