jade初探

建立项目文件夹

$mkdir my-project
$cd my-project
$npm init -y

安装express和jade

$npm i --save jade express

建入口文件app.js和views和public两个文件夹

$touch app.js
$mkdir views
$mkdir public

在package.json里加入,便于启动项目

  "scripts": {
    "start": "node ./app.js"
  },

编辑app.js，app.js加入以下代码

/*
* Created by jmxb on 2017/02/15
* 开心每一天
*/
var express = require('express');
var path = require('path');
var http = require('http');
var port = process.env.PORT || 3000;
var app = express();
app.set('views', path.resolve(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));//静态文件路径
app.set('view engine', 'jade');
app.get('/', function(req,res) {
    res.render('test',{'title': 'test'})
});
var server = http.createServer(app);
server.listen(port);
console.log('server listen at '+ port);

jade教程参考

源码------源码github地址

test.jade

test.jade
extends ./layout
block content
    h1 #{title}
    p hello jade
    p.
        foo bar baz
        rawr rawr
    p
        | foo bar baz
        | rawr rawr
    -console.log('hello')
    -var s = 'hello world'
    p #{s}
    p=s
    -var s1 = 'world'
    p hello #{s1}
    p='hello'+s1
    -var user = {name: 'jmxb'}
    -if(user.name == 'jmxb')
        h2 描述
        p my name is #{user.name}
    -else
        h2 描述
        p not my computer
    - var user1 = { name: 'Alan', isVip: false }
    unless user1.isVip
        p 亲爱的 #{user1.name} 您并不是 VIP
    -var arr1 = ['zdhxwjd', 'jdhydca', 'jmxb']
    ul
        -for(var i=0;i

layout.jade

layout.jade
doctype html
html
  head
    title= title
    meta(name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")
    link(rel='stylesheet', href='/stylesheet/style.css')
  body
    block content

test1.jade

test1.jade
#footer
  p Copyright (c) foobar

最终jade 模板会被解析成

    
        
        
        
    
    
        
test
        
hello jade
        
foo bar baz
rawr rawr
        
foo bar baz
rawr rawr
        
hello world
        
hello world
        
hello world
        
helloworld
        
描述
        
my name is jmxb
        
亲爱的 Alan 您并不是 VIP
        

            
hello zdhxwjd
            
hello jdhydca
            
hello jmxb
        
        
测试each
        

            
hello zdhxwjd
            
hello jdhydca
            
hello jmxb
        
        
测试json
        

            
1: 苹果
            
2: 梨子
            
3: 乔布斯
        
        
you have a friends
        

            
jmxb
            
jdhydca
            
zdhxwjd
        
        

            
jmxb
            
jdhydca
            
zdhxwjd
        
        

            

                
yan
                
文章没有内容
            
        
        

            

                
li
                
文章没有内容
            
        
        

            

                
hui
                
我是来搞笑的
            
        
        

            
Copyright (c) foobar