Jade/pug-HTML模板引擎

来源：互联网发布：剑与家园知乎编辑：程序博客网时间：2024/06/11 21:11

基本介绍

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 jadebody    //- 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");

在浏览器中显示的结果：
这里写图片描述

1 0