一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Jade安装使用示例介绍

时间:2016-08-11 编辑:简简单单 来源:一聚教程网

安装

npm install jade
在Sublime Text开发的配置

Jade语法高亮显示:
Jade代码高亮显示需要安装的插件有:Jade;

Jade编译为HTML:
首先需要全局安装Jade模块:

npm install jade --global
然后,通过 Package Control 安装 Jade Build 插件。

使用时,在菜单 Tools > Build System 中,确认勾选了 Automatic 或 Jade。在 .jade 文件中按 Ctrl+B (Mac: Cmd+B) 执行编译即可。如果编译成功,则会在同级目录下生成 .html 文件。

推荐通过 Package Control 安装 Sublime​On​Save​Build,参考 https://sublime.wbond.net/packages/SublimeOnSaveBuild 进行配置,将 jade 添加到 filename_filter 中,这样每次保存文件即可以自动执行编译。

Jade语法

标签
Jade:

html
渲染后变成:。

Jade:

div#foo.bar.baz
渲染后变成:

文本

对于小段文本,可以把简单内容直接放在标签之后:

p wahoo!
渲染后:

wahoo!

对于大段文本,可以在每一行文本的前面加上” | “:

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go jade go
渲染后为:

foo bar baz rawr rawr super cool go jade go

对于大段文本,还可以选择以” . “:

p.
    foo asdf
    asdf
      asdfasdfaf
      asdf
    asd
渲染后:


  foo asdf
  asdf
    asdfasdfaf
    asdf
  asd


这和带一个空格的 ‘.’ 不一样。带空格的 ” . ” 会被Jade的解析器忽略,当作一个普通的文字:

p .
渲染为:

.

注释

单行注释有以下三种:

// 单行注释

//- 不输出的单行注释
属性

Jade支持使用 “(” 和 “)” 作为属性分隔符。

a(href='/login', title='View login page') Login
渲染为:Login

当一个值是 undefined 或者 null 属性不会被加上。如:

div(something=null)
渲染为:

可执行代码

Jade目前支持三种类型的可执行代码。第一种是前缀 –, 这是不会被输出的:

- var foo = 'bar';
-var items = [1, 2, 3, 4]
- if (items.length)
  ul
    - items.forEach(function(item){
      li= item
    - })
渲染为:


     
  • 1

  •  
  • 2

  •  
  • 3

  •  
  • 4


使用=输出转义的代码:

- var foo = 'bar'
= foo
h1= foo
输出:bar

bar

循环

遍历数组:

-var items = ["one", "two", "three"]
each item, i in items
  li #{item}: #{i}
渲染为:

  • one: 0

  • two: 1

  • three: 2

  • 遍历对象:

    -var obj = { foo: 'bar', name: "hello" }
    each val, key in obj
      li #{key}: #{val}
    渲染为:

  • foo: bar

  • name: hello

  • 也可以使用for循环

    -var users = { bob: {roles: "1", custom: "2"}, jeny: {roles: "2"} }
    for user in users
      for role in user.roles
        li= role
    渲染为:

  • 1
  • 2
  • 条件判断

    if判断:
    -var users = { bob: {role: "admin", name: "bob"}, jeny: {role: "custom", name: "jeny"} }
    for user in users
      - if (user.role == 'admin')
        p #{user.name} is an admin
      - else
        p= user.name
    渲染为:

    bob is an admin


    jeny


    case判断:
    - var friends = 10
    case friends
      when 0
        p you have no friends
      when 1
        p you have a friend
      default
        p you have #{friends} friends
    或:

    - var friends = 1
    case friends
      when 0: p you have no friends
      when 1: p you have a friend
      default: p you have #{friends} friends
    均渲染为:

    you have 10 friends


    模板继承

    Jade支持通过block和extends关键字来实现模板继承。

    在父模板中,使用block定义占位符,如下:

    layout.jade:

    html
      head
        h1 My Site - #{title}
        block scripts
          script(src='/jquery.js')
      body
        block content
        block foot
          #footer
            p some footer content
    在子模板中,直接使用extends定义它的父模板。父模板可以选择带.jade扩展名或者不带。

    child.jade:

    extends layout

    block scripts
      script(src='/jquery.js')
      script(src='/pets.js')

    block content
      h1= title
      each pet in pets
        include pet
    其中,child.jade渲染为:

     
     
       

    My Site -


       
       
     
     
       

    pet


       

    pet


       

    pet


       

    pet


       
       

    some footer content


     

    包含

    Includes 允许你静态包含一段Jade,或者别的存放在单个文件中的东西比如css, html。

    如:

     html
        include head.jade
        body
            h1 My Site
            p Welcome to my super amazing site.
            include foot.jade
    Mixins

    mixin list
        ul
            li foo
            li bar
            li baz

    h2 Groceries
    +list
    +list
    渲染为:

    Groceries



       
    • foo

    •  
    • bar

    •  
    • baz



       
    • foo

    •  
    • bar

    •  
    • baz


    带参数的mixin:

    mixin pets(pets)
        ul.pets
        each pet in pets
            li= pet

    mixin profile(user)
        .user
            h2= user.name
            mixin pets(user.pets)

    -var user = {name: "bob", pets: ["cat", "dog", "pig"]}
    +profile(user)
    渲染为:


     

    bob


     

       
    • cat

    •  
    • dog

    •  
    • pig


    • 变量调用

      jade 的变量调用有 3 种方式:

      {表达式}

      =表达式 // 会对字符进行转义
      !=表达式 // 不会对字符进行转义
      - var s = 'hello world' // 在服务端空间中定义变量
      p #{s}
      p= s
      渲染为:

      hello world


      hello world

      热门栏目