Jade/pug-HTML模板引擎

66 阅读 0 评论 44 点赞

我是靠谱客的博主彪壮诺言，最近开发中收集的这篇文章主要介绍Jade/pug-HTML模板引擎，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

基本介绍

Jade 是一个高性能的模板引擎，它深受 Haml 影响(缩进关系表示嵌套关系)，它是用 JavaScript 实现的，并且可以供 Node 使用。

我们可以通过node的npm来安装jade,具体详细步骤这里就不做介绍了，下面直接来看看代码：
index.jade文件

doctype html

<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->

head 
    meta(charset='utf-8')
    title jade
body
    //- var say = "good"
    -var name = "zhangsan"
    h1 this is first jade1
    h1 #{hello}
    //使用=和.的作用，注意都是紧挨在标签元素后面
    h1= name
    p.
        #{say}
        #{user}
    //直接以#或者.开始的直接生成div标签
    #div
    //-非缓存注释
    input(type="text",name='agreement')

    ul
        li.first: a(href="#") 跳转
    - var jobs = {"catagory" : "fe", "company" : "wandoujia", "local" : "beijing"}
    each val,key in jobs
        li #{key} : #{val}

    - var users = [{ id: 12, name: 'tobi',role:'user' },{id:12,name:'admin',role:'admin'}]
    for user in users
        if user.role == 'admin'
            p #{user.name} is an admin
        else
            p= user.name

</html>

使用下面jade命令来编译文件
jade index.jade -P -w -O data.json
-P格式化输出
-w 检测文件修改，类似热启动
-O 制定外部json文件数据，当修改了json文件数据，必需重新执行上面的命令
结果如下：

<!DOCTYPE html>
<!--[if IE 8]><html class='ie8'><![endif]-->
<!--[if IE 9]><html class='ie9'><![endif]-->
<!--[if !IE]><!--><html><!--<![endif]-->
<head> 
  <meta charset="utf-8">
  <title>jade</title>
</head>
<body>
  <h1>this is first jade1</h1>
  <h1>world</h1>
  <h1>zhangsan</h1>
  <p>
    good
    chm
  </p>
  <!--直接以#或者.开始的直接生成div标签-->
  <div id="div"></div>
  <input type="text" name="agreement">
  <ul>
    <li class="first"><a href="#">跳转</a></li>
  </ul>
  <li>catagory : fe</li>
  <li>company : wandoujia</li>
  <li>local : beijing</li>
  <p>tobi</p>
  <p>admin is an admin</p>
</body>
</html>

jade提供许多高级的语法比如:

Mixins
模板继承
过滤器

具体语法可以参看源于Node.js 的 HTML 模板引擎，或者这里。

nodejs中使用jade

jade核心api

compile(source, options)
compileFile(path, options)
compileClient(source, options)
render(source, options)
renderFile(filename, options)
上面所有的方法中options有下面一套参数

看看下面的代码如何使用jade:

var http = require("http");
var jade = require("jade");

http.createServer(function(req, res){
    res.writeHead(200, {"Content-Type":"text/html"});
    // var fn = jade.compile('div #{course}',{});
    // var html = fn({course:"jade complier"});

    // var html = jade.render("div #{course}", {course:"jade render"});

    var html = jade.renderFile("jade/index.jade",{"say":"good","hello":"world","user":"chm"});

    res.end(html);

}).listen(1337,"127.0.0.1");