Jade 模板引擎学习笔记 01

柔光的暖阳◎ 2022-05-26 22:51 192阅读 0赞

*   *  注意事项
     *  环境安装
        
         *  1. 实时编译
         *  2. Nodejs 中使用
         *  3. Express 框架中使用
     *  语法 API
        
         *  1. doctype html
         *  2. 注释
         *  3. id & class
         *  4. 标签属性
         *  5. 标签文本
         *  6. 内联 & 块展开
         *  7. Case 表达式

## 注意事项 ##

*  使用空格来缩进(使用Tab键，容易出问题)
 *  尽量使用 `p #{obj} #{obj}` 避免使用 `p=obj=obj`
 *  关键词前面一律不加 `-` 如 each、while、else …

## 环境安装 ##

### 1. 实时编译 ###

// 全局安装模块
    npm install -g jade
    
    // -P（格式化） -w（实时监测）
    jade -P -w index.jade

### 2. Nodejs 中使用 ###

### 3. Express 框架中使用 ###

const express = require('express');
    const app = express();
    
    // 导入 jade 模块
    const jade = require('jade');
    
    // 更改默认视图模板目录，默认为 views 目录
    app.set('views','view')
    
    // 直接到 views 文件夹中去读取
    app.set('view engine','jade')
    
    app.get('/', (req, res) => {
        // 渲染模板（views/home.jade）
        res.render('home')
    })

## 语法 API ##

*  Jade是变体的HTML，使用 `缩进` 来描述元素的层级从属关系

### 1. doctype html ###

// html 4.1
    doctype html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
    
    // html 5，!!!5 写法已废弃
    doctype html

### 2. 注释 ###

*  注释，使用 `//`，如需注释多行，请缩进注释内容即可
 *  不编译注释 ，使用`//-`
 *  条件注释（if IE）

### 3. id & class ###

*  添加 `id`、`class` 属性

div.className
    div.idName

*  添加多个 `id` & `class`

div.className#idName

*  省略标签，仅适用于 `div` 元素

#idName.className

### 4. 标签属性 ###

*  设置标签属性，当属性值是 `undefined` 或者 `null` 时不会被加上

a(href='index.html', title='home')
     // 写成多行，可省略逗号
    a(
        href='index.html'
        title='home')

*  支持 `:`

rss(xmlns:atom="atom")

*  链接

var user = { id: 12, name: 'hannah' } // 测试对象
     // 字符串拼接
    a(href='/user/' + user.id)= user.name
     // jade修改方式
    a(href='/user/#{user.id}')= user.name

*  布尔属性，默认为true，若设值为 `false`，则不会加入该属性。

input(type='checkbox', checked=false)

*  设置不转码编译，使用 `!=`

div='I am <b>very well</b>.'

div!='I am <b>very well</b>.'

*  能自动识别自闭合元素，也可使用 `/` 指明

img(src='one.jpg')/

*  设置元素行内样式 style

ul(style={
       list-style:none,margin:'5px 10px'})

*  class 属性，可传递一个数组

div(class=['red', 'blue'])

### 5. 标签文本 ###

*  设置标签文本（单行）

p hannah

<p>hannah</p>

*  设置标签文本（多行）

p.
        hannah
        logan is wolverine
    
    script.
        var obj = {
            name: 'hannah',
            age: 18
        };
        console.log(obj);

<p>
        hannah
        logan is wolverine
    </p>
    
    <script> var obj = { name: 'hannah', age: 18 }; console.log(obj); </script>

*  设置标签文本（多段文本）

p
        |hannah is
        |Shy girl

<p>hannah is Shy girl</p>

### 6. 内联 & 块展开 ###

*  Jade 支持以自然的方式定义标签嵌套

ul
        li.first
            a(href='#') contA
        li
            a(href='#') contB
        li.last
            a(href='#') contC

*  块展开可以在一行内创建嵌套的标签，使用 `:` 标识子级

ul
        li.first: a(href='#') contA
        li: a(href='#') contB
        li.last: a(href='#') contC

### 7. Case 表达式 ###

*  显示匹配项，与 switch 循环一样

friends = 5
    case friends
        when 0: p you have no friends
        when 1: p you have a friend
        default: p you have #{friends} friends