jade模板

jade node.js

Posted by SixTeen on July 11, 2016

Jade

jade引擎是一个前端模板引擎，可以渲染出html

Jade的一些语法

Jade的语法很简单，不需要像html一样写2个标签，看起来也比html可读性高。

标签

tag.classname.classname2(property = "",property="",style="property:xx;")
    tag.classname content

eg. 
div.ui(height:100px)
    span 我是内容

link(rel='stylesheet', href='/stylesheets/style.css')
script(src="/javascript.js")

Jade特点

使用后台传输的数据

jade作为一个模板引擎，自然是可以使用后台传递的数据渲染填充前端。#{json.property}

img(src="#{data.profile}")

span #{data.content}

嵌入代码段

在jade中可以嵌入代码,最常用的大概有each,for,if...else...。使用循环和逻辑判断块基本能实现所有的逻辑。

-var categories = ['1','2','3'];

each category in categories
    span category

模块化

extends

在jade中添加一个标识block，表明可以被extends的元素填充

//html基础模板
doctype html
html
  head
  body
    block content
extends layout

block content
    div...

include

name
    div...
include name

与JS共享数据

在jade模板中加入JSON.stringify(object)

//在js中就可以使用window.data
script.
    window.data = !{JSON.stringify(data)};

Jade中文教程

1

FIN  2016.7.18/19.46