模板引擎 編譯成html 靜態(tài) js css
node： jade也叫pug
jade中不允許強(qiáng)制換行
先下載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表示層級關(guān)系，如圖所示：

./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()
        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中給元素添加內(nèi)容

內(nèi)容前用空格隔開

html
    head
    body
        div asdf
            p ghjk
            a() asdfasdfasdf

給元素添加內(nèi)容

六、原樣輸出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

今天就先總結(jié)到這里，下章咱們接著說jade中的東西