模板引擎 编译成html 静态 js css
node： jade也叫pug
jade中不允许强制换行
先下载jade
cnpm install jade
一：如何使用jade解析字符串
const jade =require('jade');
var str=jade.render('html');//渲染字符串
console.log(str);
解析字符串
二：如何使用jade解析文本
const jade=require('jade');
var str=jade.renderFile('./jade/text.jade',{pretty:true});//pretty：按照所写格式输出。renderFile用来渲染文本
console.log(str);
.jade格式用TAB表示层级关系，如图所示：
./jade/text.jade
解析文本
三、jade属性
const jade=require('jade');
var str=jade.renderFile('./jade/shuxing.jade',{pretty:true});//pretty：按照所写格式输出
console.log(str);
多个属性用逗号隔开
html
head
body
a(href='http://www.baidu.com')
input(type='button',name='uname',value='名字')
jade属性
jade中的style与css
html
head
body
div(style='width:100px,height:100px;background:red')
div(style={width:'100px',height:'100px',background:'red'})
p(class='left right box')
p(class=['left','right','box'])
Image 5.png
四、把jade模板引入到html中
const jade=require('jade');
const fs=require('fs');
var str=jade.renderFile('./jade/style-class.jade',{pretty:true});
fs.writeFile('a.html',str,function(err){
if(err){
colsole.log('失败');
}else{
console.log('成功');
}
})
此时文件夹中会多出一个a.html文件
cmd+r
2.html中代码显示
五、如何在jade中给元素添加内容
内容前用空格隔开
html
head
body
div asdf
p ghjk
a(href='http://www.baidu.com') asdfasdfasdf
给元素添加内容
六、原样输出html
个别用竖杠|隔开，多个用点.隔开
引入外部js文件用include
html
head
body
div
|asdf
|ghjkl
script.
var but=document.getElementById('button');
var on=document.getElementById('input');
div
a script中引入外部文件用include
script
include 2.js
Image 12.png
