DoraCMS

您现在的位置是:首页>文档内容页

文档详情

Express 4.8.x—JADE模版引擎

doramart 2015-10-17 13:31:33 Express227712
​jade 可以减少编写 html ,下面是个例子

JADE模版引擎

jade 可以减少编写 html ,下面是个例子:

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }
  body
    h1 Jade - node template engine
    #container.col
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!
      p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

下面是转换后的 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container" class="col">
      <p>You are amazing</p>
      <p>
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.
      </p>
    </div>
  </body>
</html>

基本上jade是以缩进的方式编写,比如:

html
    head
    body

转换后的html是:

<html>
  <head></head>
  <body></body>
</html>

编写网页 javascript 代码

head
    script(type='text/javascript').
      if (foo) {
         bar(1 + 5)
      }

转换后的html

<head>
    <script type="text/javascript">
      if (foo) {
         bar(1 + 5)
      }
    </script>
</head>

单行内容

p You are amazing

转换后

<p>
You are amazing
</p>

多行内容

  p.
        Jade is a terse and simple
        templating language with a
        strong focus on performance
        and powerful features.

注意 p. 后面的 .  。

循环

尽管已经支持 JavaScript 原生代码,Jade 还是支持了一些特殊的标签,它们可以让模板更加易于理解,其中之一就是 each, 这种形式:

each VAL[, KEY] in OBJ

一个遍历数组的例子 :

- var items = ["one", "two", "three"]
each item in items
  li= item

渲染为:

<li>one</li>
<li>two</li>
<li>three</li>

遍历一个数组同时带上索引:

items = ["one", "two", "three"]
each item, i in items
  li #{item}: #{i}

渲染为:

<li>one: 0</li>
<li>two: 1</li>
<li>three: 2</li>

遍历一个数组的键值:

obj = { foo: 'bar' }
each val, key in obj
  li #{key}: #{val}

将会渲染为:<li>foo: bar</li>

Jade 在内部会把这些语句转换成原生的 JavaScript 语句,就像使用 users.forEach(function(user){, 词法作用域和嵌套会像在普通的 JavaScript 中一样:

each user in users
  each role in user.roles
    li= role

如果你喜欢,也可以使用 for

for user in users
  for role in user.roles
    li= role

条件语句

Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号,这样会看上去对设计师更友好一点, 同时要在心里记住这个表达式渲染出的是 常规 JavaScript:

for user in users
  if user.role == 'admin'
    p #{user.name} is an admin
  else
    p= user.name

和下面的使用了常规 JavaScript 的代码是相等的:

for user in users
  - if (user.role == 'admin')
    p #{user.name} is an admin
  - else
    p= user.name

Jade 同时支持 unless, 这和 if (!(expr)) 是等价的:

for user in users
  unless user.isAnonymous
    p
      | Click to view
      a(href='/users/' + user.id)= user.name

模板继承

Jade 支持通过 blockextends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ,它将在子模板中实现,同时是支持递归的。

Jade 块如果没有内容,Jade 会添加默认内容,下面的代码默认会输出 block scripts, block content, 和 block foot.

html
  head
    h1 My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

现在我们来继承这个布局,简单创建一个新文件,像下面那样直接使用 extends,给定路径(可以选择带 .jade 扩展名或者不带). 你可以定义一个或者更多的块来覆盖父级块内容, 注意到这里的 foot没有 定义,所以它还会输出父级的 "some footer content"。

extends extend-layout

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

block content
  h1= title
  each pet in pets
    include pet

同样可以在一个子块里添加块,就像下面实现的块 content 里又定义了两个可以被实现的块 sidebarprimary,或者子模板直接实现 content

extends regular-layout

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

参看中文详细教程 https://github.com/visionmedia/jade/blob/master/Readme_zh-cn.md

文章评论

Cancel the reply
Login Participate In Comments

Review(