loading...

0

jade-起步

其他读完大概需要6分钟

  • 发布时间:2017-09-08 16:41 星期五
  • 刘伟波
  • 246
  • 更新于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");


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!