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>