jade-起步
原 其他读完大概需要6分钟
- 发布时间：2017-09-08 16:41 星期五
- 刘伟波
- 774
- 更新于： 2017-09-08 16:41 星期五
1.cnpm install jade -g
cnpm install jade coffee-script less markdown --save
2.jade -P -w index.jade -O immo.json
-P 保持原有的html缩进，不压缩
-w watching 保持自动更新编译jade文件
-O 传入外部json文件到index.jade中
3.index.jade
extends layout.jade
// block 代码块 解决了代码复用的问题
block content
include style.jade
include title.html
style.
h3 {
color:green
}
h1 immoc jade study2
- var immoc={"course":"immoc","leverl":"heigh"}
- for(var key in immoc)
p= immoc[key]
-each value,key in immoc
p #{key}:#{value}
- var name = 'jade'
case name
when "java"
p= "java"
when "jade"
p= "jade"
mixin lesson
p immo jade study
+lesson
// mixin 变量名 +变量名 调用
mixin study(name,courses)
p #{name}
ul.course
each course in courses
li= course
+study('tom',['html','css','js'])
// 模板继承
block desc
p immoc jade study extends
// 再次继承
block desc
4.layout.jade
doctype html
html
head
include head
body
block desc
p desc from layout
block content
5.immoc.json
{
"course":"jade2"
}6.index.html jade生成的html如下
<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8">
<title>immoc jade2 jade study</title>
<body>
<p>immoc jade study extends</p>
<style>
h1{
color:red
}
</style><div>
<h3>content from html</h3>
</div>
<style>
h3 {
color:green
}
</style>
<h1>immoc jade study2</h1>
<p>immoc</p>
<p>heigh</p>
<p>course:immoc</p>
<p>leverl:heigh</p>
<p>jade</p>
<p>immo jade study</p>
<!-- mixin 变量名 +变量名 调用-->
<p>tom</p>
<ul class="course">
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<!-- 模板继承-->
<p>immoc jade study extends</p>
<!-- 再次继承-->
<p>immoc jade study extends</p>
</body>
</html>
7.style.jade
style.
h1{
color:red
}
8.title.html
<div>
<h3>content from html</h3>
</div>
9.head.jade
meta(charset='utf-8')
title immoc #{course} jade study
10.server.js
var http=require('http');
var jade=require('jade');
http.createServer(function (req,res) {
res.writeHead(200,{
'Content-Type':'text/plain;charset=utf-8'
})
// 1.compile
// var fn=jade.compile('div #{course}',{});
// var html=fn({course:'jade'})
//2.jade.render
// var html=jade.render('div #{course}',
// {course:'jade render'})
//3.jade.renderFile
var html=jade.renderFile('index.jade',
{course:'jade renderFile',pretty:true})
// pretty:true 为html格式化
res.end(html)
}).listen(1337,'localhost')
console.log("server in 127.0.0.1:1337");
发表评论：