Jade模板引擎學習筆記（一）

時間 2019-11-24

標籤 jade 模板引擎學習筆記欄目 Node.js 简体版

原文原文鏈接

title: "Jade模板引擎學習筆記（一）"
date: 2016-04-10 20:19:41
tags:css

jade是什麼

最近學習NodeJS相關的知識，所以接觸到了Jade、Ejs等模板。
其中Ejs模板的語法和原生html語法基本一致，不過無數的<%=xxx>使書寫和閱讀產生困難，稍有不慎缺乏/>閉合的尖括號則會使尋找異常困難；而Jade則採用了tab縮進式的語法，去除了html中<>尖括號的描述，從而使模板編碼和閱讀更加簡潔明瞭。html

jade安裝

首先確保安裝了nodejs和npm包管理器，而後在命令行輸入：node

npm install jade -g

jade在命令行包含不少參數，能夠經過jade -h獲取幫助內容。npm

C:\Users\Administrator>jade -h

  Usage: jade [options] [dir|file ...]

  Options:

    -h, --help             output usage information
    -V, --version          output the version number
    -O, --obj <str|path>   JavaScript options object or JSON file containing it
    -o, --out <dir>        output the compiled html to <dir>
    -p, --path <path>      filename used to resolve includes
    -P, --pretty           compile pretty html output
    -c, --client           compile function for client-side runtime.js
    -n, --name <str>       The name of the compiled template (requires --client)

    -D, --no-debug         compile without debugging (smaller functions)
    -w, --watch            watch files for changes and automatically re-render
    -E, --extension <ext>  specify the output file extension
    -H, --hierarchy        keep directory hierarchy when a directory is specifie
d
    --name-after-file      Name the template after the last section of the file
path (requires --client and overriden by --name)
    --doctype <str>        Specify the doctype on the command line (useful if it
 is not specified by the template)

  Examples:

    # translate jade the templates dir
    $ jade templates

    # create {foo,bar}.html
    $ jade {foo,bar}.jade

    # jade over stdio
    $ jade < my.jade > my.html

    # jade over stdio
    $ echo 'h1 Jade!' | jade

    # foo, bar dirs rendering to /tmp
    $ jade foo bar --out /tmp

jade語法

基本語法

jade使用不含尖括號的html標籤和tab縮進的層級關係來描述頁面內容。
好比咱們新建一個stu.jade文件，首先聲明頁面類型：安全

doctype html

經過jade stu.jade命令編譯後，產生stu.html文件，編譯後內容以下：ide

<!DOCTYPE html>

若是須要頻繁的修改jade文件內容，而不想每次都用jade命令編譯的話，咱們可使用jade - P-w stu.jade命令，監聽stu.jade文件的變化，自動進行編譯，-P參數表示編譯結果不被壓縮（是可讀的）。學習

修改stu.jade的內容以下(注意層級之間的縮進關係)：ui

doctype html
html
    head
        meta(charset='utf-8')
        title jade
    body
        div#content
            h1 my first jade
        p
            |aaaa
            |bbbb
            |cccc
            <a href="#">testtest</a>
            |ddd
            span#test ffffff
            a(src='xxx.jpg') testsrc
        script.
            console.log('hello jade.')
            console.log('welcome to jade.')

文件自動編譯爲：編碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jade</title>
  </head>
  <body>
    <div id="content">
      <h1>my first jade</h1>
    </div>
    <p>
      aaaa
      bbbb
      cccc
      <a href="#">testtest</a>
      ddd<span id="test">ffffff</span><a src="xxx.jpg">testsrc</a>
    </p>
    <script>
      console.log('hello jade.')
      console.log('welcome to jade.')
    </script>
  </body>
</html>

能夠看到，jade中不須要關注標籤的閉合關係，只須要關注具體的標籤、標籤層級關係和內容便可。
上一個例子中，咱們看到，能夠經過標籤+#id.css的方式增長此標籤的id名和css樣式名，這點與css和jQuery都是一致的；能夠經過標籤+(屬性名=‘屬性值’)來爲標籤設置屬性，也能夠在jade語法標籤中嵌套html語法標籤內容；而若是在標籤中緊接着加一個.的話，其子層級內容，則徹底使用html標籤語法。spa

代碼

Jade目前支持三種類型的可執行代碼，第一種以-爲前綴，不會被緩衝：

- for (var i = 0; i < 3; i++)
    li hello jade!

輸出以下：

<li>hello jade!</li>
<li>hello jade!</li>
<li>hello jade!</li>

接下來咱們轉義了緩衝代碼，用於緩衝返回值，以等號（=）做爲前綴：

p= 'Welcome to jade, we want <b>you</b>'

輸出：

<p>Welcome to jade, we want &lt;b&gt;you&lt;/b&gt;</p>

能夠看到，被’='緩衝的代碼會默認通過轉義以加強安全性，要輸出爲轉義的值須要使用!=：

p!= 'Welcome to jade, we want <b>you</b>'

輸出：

<p>Welcome to jade, we want <b>you</b></p>

使用變量

- var name = 'kelvin';
    p my name is #{name}

輸出：

<p>my name is kelvin</p>

若是定義的變量中包含特殊字符，則在使用時須要使用!來替換#來調用：

- var scr1 = '<script>console.log(\'hello jade.\');</script>';
    |!{scr1}

輸出：

<script>console.log('hello jade.');</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。