jade初探
2017-02-15 本文已影响0人
sunny2786
建立项目文件夹
$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);
源码------源码github地址
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<arr1.length;i++){
li hello #{arr1[i]}
-}
h2 测试each
ul
each val, index in arr1
li hello #{val}
h2 测试json
ul
each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}
li= index + ': ' + val
- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friends
default: p you have #{friends} friends
mixin list
ul
li jmxb
li jdhydca
li zdhxwjd
+list()
+list()
mixin article(title)
.article
.article-wrapper
h2= title
if block
block
else
p 文章没有内容
+article('yan')
+article('li')
+article('hui')
p 我是来搞笑的
include test1
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
#footer
p Copyright (c) foobar
最终jade 模板会被解析成
<!DOCTYPE html>
<html>
<head>
<title>test</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">
</head>
<body>
<h1>test</h1>
<p>hello jade</p>
<p>foo bar baz
rawr rawr</p>
<p>foo bar baz
rawr rawr</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>helloworld</p>
<h2>描述</h2>
<p>my name is jmxb</p>
<p>亲爱的 Alan 您并不是 VIP</p>
<ul>
<li>hello zdhxwjd</li>
<li>hello jdhydca</li>
<li>hello jmxb</li>
</ul>
<h2>测试each</h2>
<ul>
<li>hello zdhxwjd</li>
<li>hello jdhydca</li>
<li>hello jmxb</li>
</ul>
<h2>测试json</h2>
<ul>
<li>1: 苹果</li>
<li>2: 梨子</li>
<li>3: 乔布斯</li>
</ul>
<p>you have a friends</p>
<ul>
<li>jmxb</li>
<li>jdhydca</li>
<li>zdhxwjd</li>
</ul>
<ul>
<li>jmxb</li>
<li>jdhydca</li>
<li>zdhxwjd</li>
</ul>
<div class="article">
<div class="article-wrapper">
<h2>yan</h2>
<p>文章没有内容</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h2>li</h2>
<p>文章没有内容</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h2>hui</h2>
<p>我是来搞笑的</p>
</div>
</div>
<div id="footer">
<p>Copyright (c) foobar</p>
</div>
</body>
</html>
