模板引擎jade（pug）

模板引擎编译成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