Jade学习记录

hello.jade

使用npm安装jade,然后新建一个文件:

doctype html
html
    head
        title Hello Jade
    body
        h1 Welcome To Jade Cook Book For Chinese

使用命令,查看输出:

jade -P hello.jade//本地会生成hello.html

我使用sublime,安装了插件后,选择编译也能生成html文件。

基本语法

每行第一个为标签,通过缩进来表示标签的嵌套

注释

//来注释当前行
块注释是 // 后换行并缩进

行内嵌套

html: head: title Tag Demo
body
    p This is a Tag Demo

<html>
  <head>
    <title>Tag Demo
      <body>
        <p>This is a Tag Demo</p>
      </body>
    </title>
  </head>
</html>

标签后加/--自定义封闭标签

属性

a(href="google.com")
//<a href="google.com"></a>

转义属性

div(escaped="<code>")
div(unescaped!="<code>")
//
<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

样式属性 p(style="color:red;font-size:33px") 样式

class/id

a.commit
a#commit
//
<a class="commit">
<a id="commit">

a.commit.first //<a class="commit first"></a>
//or
- var classes = ['commit','first'];
a(class=classes)

变量插入

三种方式: 1. =:直接赋值 2. #{}: 会把特殊字符转义;字符串连接 3. !{}:不转义 4. #[]:插入标签

- var title = "On Dogs: Man's Best Friend";
- var author = "enlore";
- var theGreat = "<span>escape!</span>";
//
h1= title
p Written with love by #{author}
p This will be safe: #{theGreat}
//
h1= title
p Written with love by !{author}
p This will be safe: !{theGreat}
//
p this is a link #[a(href="http://jade.terrynie.com")]

文本

管道

| Plain text can include <strong>html</strong>
p
  | It must always be on its own line

标签块文本

script.
  if (usingJade)
    console.log('you are awesome')
  else
    console.log('use jade')

进阶

block

block blockName
 content

例如:

//layout.jade
- var title = 'blog'
html
  head
    title My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content

//page.jade
extends ./layout.jade
//覆盖
#block scripts
#  script(src='/bootstrap.js')
//追加,prepend也存在;block还能省略
block append scripts
  script(src='/bootstrap.js')

includes

用于文件复用。

//head.jade
head
    title This is head

//page.jade
html
    include ./head.jade
    body
        h1 this is a include demo
        include ./footer.jade

也可以用来引入css,js文件

filters

用于在jade中引入其他语言,例如:

:markdown
  # Markdown

  I often like including markdown documents.
script
  :coffee-script
    console.log 'This is coffee script'
    //
    <h1>Markdown</h1>
    <p>I often like including markdown documents.</p>
    <script>console.log('This is coffee script')</script>

现在支持的语言有: sass:需要安装sass.js less:需要安装less.js markdown:需要安装markdown-js(jstransformer-markdown) cdata: * coffeescript:需要安装coffee-script(jstransformer-coffee-script)

iteration

有两种迭代器:

  • each/for: for等同于each
  • while:

each可以获得索引/键和内容:

ul
  each val, index in ['zero', 'one', 'two']
    li= index + ': ' + val
ul
  each val, index in {1:'one',2:'two',3:'three'}
    li= index + ': ' + val

while的用法就更简单了:

- var n = 0
ul
  while n < 4
    li= n++

mixin

mixin可以看做一段函数,可以带参数,形如:

mixin mixinName (par)
    this is in a mixinName
    p #{par} 1
    p= par + can also use = //注意区别

调用的时候:

+mixinName("try")

在书写mixin时,传入的参数可以使用#{}=,但是需要两者的区别。

mixin可以包含block;

mixin addTitle(title)
  h1= title
  if block
    block
  else
    p no block

调用的时候,mixin换行缩进可以传入block:

+addTitle('Hello world no block')
+addTitle('Hello world with block')
  ul
     li a
     li block

mixin也可以添加属性,有两种方法:

//1
mixin addTitle2(title)
    p(style=attributes.clas)= title + " for  attributes.class"
+addTitle2("Demo")(clas=style="font-family:arial;color:green;font-size:10px;")
//2
mixin addTitle3(text)
    p&attributes(attributes)!= text +" for &attributes"
+addTitle3("demo")(style="font-family:arial;color:red;font-size:20px;")

相比较之下,还是使用 &attributes 的方式更好些。
最后,就是mixin可以传入多个参数(rest arguments--不理解为什么这么说)。举个例子:

mixin list(id, items)
  ul(id=id)
    each item in items
      li= item

+list('first', [1, 2, 3, 4])
+list('second',['a', 'b', 'c', 'd', 'e'])

参考

主要参考jade小书,部分代码有更新。
当然,还是需要多看官方文档