Node.js进阶之【12】 : node.js模板引擎：jad

2020-03-27 本文已影响0人岚平果

一、模板引擎简介

node.js里的模板引擎，就是通过【node.js来生成html页面】。不需要通过前台，自已进行生成。
模板引擎分两种：【jade】和【ejs】。
jade模板引擎是破坏性的、侵入性的，强信赖，一旦使用，终生使用, jade可自动识别单双标签，例如 input编译过来是 <input />。
ejs模板引擎是非侵入性的，弱信赖，比较温和。

二、jade 模板引擎操作

一、下载 jade模板

cnpm i jade

二、【.jade】文件书写规则

1. 【.jade】文件是根据缩进情况来规定层级情况。

html
  head
  body
    div
    div
      span

通过【jade.renderFile】编译出来的效果如下：

image.png
2. 【.jade】文件里标签属性放在()里面，多个属性的话用逗号分隔开.

p(title="导出",class="top_right")

通过【jade.renderFile】编译出来的效果如下：

image.png
3. 【.jade】文件属性也可以进行简写或混写。

//- jade文件属性进行简写,见下面的div 和 p
//- jade文件属性也可以混着写，见下面的 span
html
    head
    body
        div.box
        p#left_top
        span.name(title="文字")

通过【jade.renderFile】编译出来的效果如下：

image.png
4. 【.jade】文件style属性也可以当作JSON来处理，例如下面的div,这种写法只归【style】属性所拥有。

p(class="selected active left_top")
p(class= ['selected', 'active', 'left_top'])

通过【jade.renderFile】编译出来的效果如下：

image.png
5. 【.jade】文件class属性也可以当作数组来处理，例如下面的p ,这种写法只归【class】属性所拥有。

div(style="width:200px;height:200px;background:red;")
div(style= {'width':'200px', 'height': '200px', 'background': 'red'})

通过【jade.readfile】编译出来的效果如下：

image.png

6. 【.jade】文件往标签输入内容，直接加一个空格，再输入内容

//- 往【.jade】文件里输入标签内容，直接加一个空格，再输入内容
html
    head
    body
        a(href="http://www.baidu.com") 百度
        p(id="name") 搜索

通过【jade.renderFile】编译出来的效果如下：

image.png
7. 【.jade】可以自定义标签，和前台html一样可以自定义标签。

html
    head
    body
        aaa

通过【jade.renderFile】编译出来的效果如下：

image.png
8. 【.jade】用【｜】竖线后面跟内容，这样【｜】竖线后面的内容可以不进行编译，保持原样。

html
    head
        script
            |wiondow.onload=function() {
            |   let a = 2;
            |   console.log(2)
            |}
    body
        div
            |abc

通过【jade.renderFile】编译出来的效果如下：

image.png
9. 【.jade】要想标签后面的内容不让编译，除了【｜】竖线后面跟内容，也可以标签后面加一个 . 【点】，表示这个标签子级里都保持原样，不要编译。

html
    head.
        div
    spcrpt.
        window.onload = function() {
            let a = 2;
            console.log(2)
        }
    body
        div

通过【jade.renderFile】编译出来的效果如下：

image.png
10. 【.jade】想要内容不进行编译，除了｜后面跟内容，标签加.【点】。我们也可以把不编译的内容单独放在一个文件里，例如我们现在的index.js, 用 include加文件名。

html
    head
    script
        include index.js
    body
        div

通过【jade.renderFile】编译出来的效果如下：

image.png
11. 【.jade】里面放变量， #{变量名}加变量名，并且把变量编译出来，#{变量名}等价于【=】,style和class变量不用加#{}，直接等于变量就行,class如果想要在变量的基础上，再加个其他没有的样式名，直接在后面class="样式名"就行
【jade 文件】如下内容：

html
    head
    body
        div 我的名字是：#{name}
        p #{name}
        p=name
        p(style = json)
        div(class = arr)
        div(class = arr class="especial")

【js文件】如下内容：

// 把引擎模板中的变量赋值，并且编译出来
const jade = require('jade');
let str = jade.renderFile('./www/read8.jade', {
    pretty: true,
    name: 'gg',
    json: {width:'200px', height: '200px', background: 'red'},
    arr: ['top_left', 'active', 'selected']
})
console.log(str)

通过【jade.renderFile】编译出来的效果如下：

image.png
12. 【.jade】用【-】横杠加js内容，编译的时候可以把【-】横杠后面的内容当作js来进行解析。

html
    head
    body
        -var a = 12;
        -var b = 5;
        div #{a+b}

通过【jade.renderFile】编译出来的效果如下：

image.png
13. 【.jade】for循环一个标签，标签里面的内容不确定，对应jade10.js编译结果。
【.jade】文件内容如下：

html
    head
    body
        -for(var i=0; i<arr.length; i++) 
            div=arr[i]

【jade.js】文件内容如下：

const jade = require('jade');
let str = jade.renderFile('./www/read10.jade', {
   pretty: true,
   arr: ['内容1','内容2','内容2','内容2']
})
console.log(str)

通过【jade.renderFile】编译出来的效果如下：

image.png
14. 【.jade】要想变量里的内容原样输出，需要【!=】，表示强调要把变量里的内容输出,对应jade11.js。
【.jade】文件内容如下：

p!=content
p=content

【jade.js】文件内容如下：

const jade = require('jade');
let str = jade.renderFile('./www/read11.jade', {
    pretty: true,
    content: '<h2>标题</h2><p>这是一段话</p>'
})
console.log(str)

通过【jade.renderFile】编译出来的效果如下：

image.png
15. 【.jade】条件判断进行编译，用-if，如果我们前面是js，加了【-】，后面也可以不加【-】。

-var a = 17;
-if(a%2===0)
    div(style={background:'red'}) 偶数
-else
    div(style={background: 'blue'}) 奇数


-var b = 2;
if(b%2===0)
    p(style={background:'red'}) 偶数
else
    p(style={background: 'blue'}) 奇数

通过【jade.renderFile】编译出来的效果如下：

image.png
16. 【.jade】原生的我们多个判断可以用switch，现在jade文件也能用，不过把case变成原生的switch,when变成原生的case,jade也有自己的default。

html
    head
    body
        -var a = 4;
        case a
            when 0
                div 数字为0
            when 2
                div 数字为2
            when 4
                div 数字为4
            default
                div 为其他数字

通过【jade.renderFile】编译出来的效果如下：

image.png

三、渲染纯标签, jade.render('标签名')

// 查看jade渲染是一个什么文件
const jade = require('jade');
let str = jade.render('html')
console.log(str)

预览：

image.png

四、渲染【jade文件】, jade.renderFile( '文件名', {pretty: true} )

// 编译【.jade】文件标签里有内容
const jade = require('jade');
let str = jade.renderFile('./www/read2.jade', {pretty: true});
console.log(str)

预览如下：

image.png

五、读取【jade文件，写入html文件里】

// 把【.jade】文件渲染出来再写入html中

const jade = require('jade');
const fs = require('fs')
let str = jade.renderFile('./www/read.jade', {pretty: true})

fs.writeFile('./build/write.html', str, (err) => {
    if(err)
        console.log('写入失败')
    else
        console.log('写入成功')
})

预览：

image.png

六、【jade模板应用】

1.新建一个【index.jade】文件

doctype
html
    head
        meta(charset="UTF-8")
        title jade测试页面
        style.
            p{
                color:red;
                font-size:14px;
                text-align:center;
                margin-right:15px;
                background:#eeee;
            }
        body
            -var a = 0;
            while a < 12
                if a%4===0 && a!==0
                    p.last=a++
                else    
                    p=a++

2.新建一个【index.js】文件

const jade = require('jade');
const fs = require('fs')
let str = jade.renderFile('./www/index.jade', {pretty: true})
// 把这个index.jade文件编译后写入index.html文件里
fs.writeFile('./build/index.html', str,(err, data) => {
    if(err)
        console.log('编译失败')
    else 
        console.log('成功')
})

3.运行node index.js查看index.html 如下：

image.png

三、ejs 模板引擎操作

一、下载ejs

cnpm i ejs

二、【.ejs】模板引擎书写规则

一. 【.ejs】文件中引入变量 <%= 变量名 %>

新建一个【read.ejs】文件，里面和前台html一样写，唯一不同html里可带参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  // 这里<%= name %>中name为参数
    我的名字是 <%= name %>
</body>
</html>

2）【ejs 模板引擎】解析【.ejs 文件】

// 编译一个ejs文件
const ejs = require('ejs');
let str = ejs.renderFile('./www/read.ejs', {name: 'xxl'}, (err,data) => {
    if(err)
        console.log('编译失败')
    else
        console.log(data)
})

预览：

image.png

二. 【.ejs】<%- 变量名 %> 进行不转义输出

【.ejs】文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <% 
    var str="<div></div>";
    %>
    <%- str %>
</body>
</html>

【ejs.js】文件内容如下

const ejs = require('ejs');
ejs.renderFile('./www/read3.ejs', {}, (err, data) =>{
    console.log(data)
})
//  <%- 变量名 %>是不转义输出，<%= 变量名 %> 是经过转义输出

3）运行结果如下

image.png
三. 【.ejs】<% include 文件名 %> 引用文件进行输出

【.ejs】文件内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <% include text.txt  %>
</body>
</html>

2）【ejs.js】文件内容如下：

const ejs = require('ejs');
ejs.renderFile(('./www/read4.ejs'), {}, (err, data) => {
    console.log(err)
})
// <% include 文件名 %> .ejs文件引用一个文件进来

Node.js进阶之【12】 : node.js模板引擎：jad

一、模板引擎简介

二、jade 模板引擎操作

一、下载 jade模板

二、【.jade】文件书写规则

三、渲染纯标签, jade.render('标签名')

四、渲染【jade文件】, jade.renderFile( '文件名', {pretty: true} )

五、读取【jade文件，写入html文件里】

六、【jade模板应用】

三、ejs 模板引擎操作

一、下载ejs

二、【.ejs】模板引擎书写规则

猜你喜欢

热点阅读

Node.js进阶之【12】 : node.js模板引擎：jad

一、模板引擎简介

二、jade 模板引擎操作

一、下载 jade模板

二 、【.jade】文件书写规则

三 、渲染纯标签, jade.render('标签名')

四 、渲染【jade文件】, jade.renderFile( '文件名', {pretty: true} )

五、读取 【jade文件，写入html文件里】

六 、【jade模板应用】

三、ejs 模板引擎操作

一、下载ejs

二、【.ejs】 模板引擎书写规则

猜你喜欢

热点阅读

二、【.jade】文件书写规则

三、渲染纯标签, jade.render('标签名')

四、渲染【jade文件】, jade.renderFile( '文件名', {pretty: true} )

五、读取【jade文件，写入html文件里】

六、【jade模板应用】

二、【.ejs】模板引擎书写规则