jade学习笔记

我的博客

简介

什么是jade?

jade是一款源于Node.js的HTML模板引擎。

  1. 模板引擎

  2. 依赖于JavaScript实现jade到HTML的转换

  3. 供Node使用

安装和编译

# 安装npm install -g jade# 编译jade demo.jade# 编译后将在同级目录下生成demo.html

工具

  1. jade官网

  2. 在线html转jade

  3. 空格和缩进的问题可能导致编译失败,建议选择合适的编辑器,比如:WebStrom。

语法

doctype

doctype html

编译后:

注意: !!! 这种简写方式已经废除。
可选值还有:

  1. xml

  2. transitional

  3. strict

  4. frameset

  5. 1.1

  6. basic

  7. mobile

基本结构

//jadedoctype htmlhtml    head        meta(charset='utf-8')        title JadeNotes    body        h1 Hello Jade!

编译后:

        JadeNotes    # Hello Jade!

注释

//这行注释将被编译//- 这行注释不会被编译//    多行注释    多行注释    多行注释

编译后:

文本

p Hello Jade!

编译后:

Hello Jade!

选择器

//类选择器p.red-txt//ID选择器p# blue-txt//一个ID多个Classp# yellow-text.high-txt.demo-txt

编译后:

属性

input(type='text', placeholder='Input your Phone')

编译后:

嵌套

ul# demo-ul    li.demo-li Hello    li.demo-li World

编译后:

    Hello    World

变量

- var welcome = 'Hello World'p 'Xiguaaxigua, # {welcome}'

编译后:

'Xiguaaxigua, Hello World'

标签中有大段的块内容

script.    console.log('Hello');    console.log('World');//或者script.    | console.log('Hello');    | console.log('World');

编译后:

console.log('Hello');console.log('World');console.log('Hello')console.log('World')

转义

- var welcome = 'Hello Wrold'p welcomep= welcomep!= welcome

编译后:

welcomeHello WroldHello Wrold

= 会转义内容,不想被转义可以加 != 。

循环

使用each循环:

- var arr = ['A', 'B', 'C', 'D', 'E']ul    each a in arr        li= a- var obj = {'name': '老王', 'age': '33', 'money'}table    each value, key in obj        tr            td # {key}            td # {value}

编译后:

    1. A    1. B    1. C    1. D    1. E        name        老王        age        33        money        1000

case

case 和JavaScript里的 switch 作用一样。

- var money = 1000case money    when 10000        h1 土豪    when 1000        h1 地主    when 100        h1 平民    when 1        h1 穷逼

编译后:

# 地主

或者:

- var money = 10000000case money    when 10000: h1 土豪    when 1000: h1 地主    when 100: h1 平民    when 1: h1 穷逼    default: h1 你有多少钱?

编译后:

# 你有多少钱?

过滤器

支持markdown。必须是安装了 markdown-js 或者 node-discount 。

# 安装markdown-jsnpm install -g markdown-js# 或者安装node-discountnpm install -g node-discount

例如:

:markdown    ### Hello Markdown!

编译后:

### Hello Markdown!

mixin

无参数的mixin:

mixin welcome    ul        li 为系统而生,为框架而死,为debug奋斗一辈子         li 吃符号的亏,上大小写的当,最后死在需求上!        li Hello World!+welcome()

编译后:

    1. 为系统而生,为框架而死,为debug奋斗一辈子    1. 吃符号的亏,上大小写的当,最后死在需求上!    1. Hello World!

有参数的mixin:

mixin welcome(param)    ul        li 为系统而生,为框架而死,为debug奋斗一辈子         li 吃符号的亏,上大小写的当,最后死在需求上!        li Hello # {param}!+welcome('Mixin')

编译后:

    1. 为系统而生,为框架而死,为debug奋斗一辈子    1. 吃符号的亏,上大小写的当,最后死在需求上!    1. Hello Mixin!

mixin中文支持block:

mixin welcome(param)    ul        if block            block        else            li Nothing!        li Hello Wrold!+welcome()    li 为系统而生,为框架而死,为debug奋斗一辈子     li 吃符号的亏,上大小写的当,最后死在需求上!

编译后:

    1. Hello Wrold!    1. 为系统而生,为框架而死,为debug奋斗一辈子    1. 吃符号的亏,上大小写的当,最后死在需求上!

mixin支持attributes

mixin link(href, name)    a(class != attributes.class, title != attributes.title, href=href)= name+link('https://segmentfault.com/a/xiguaaxigua.cn', 'xiguaaxigua')(class='main-link', title='Hello Xigua!')

编译后:

xiguaaxigua

包含

有点类似freemaker,通过include来载入一些jade模板。

End

推荐文章:

  1. W3CPlus-jade学习

  2. Jade——源于Node.js的HTML模板引擎

  3. Jade Syntax Documentation

  4. 10个最好的 JavaScript 模板引擎

关键字:jade, hello, 编译, welcome

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部