Jade官方教程翻译草稿

(随手翻译,误多莫怪。翻译整理自Jade官方Tutorial)

Jade是一个服务器端模板系统,它主要用在Node.js,同时也支持很多其他环境。它唯一的目的就是去产生“类XML”格式的文档,例如HTML、RSS等。所以不要使用它去创建纯文本、markdown、CSS之类的文档。

在这个教程中你将会掌握以下内容:

  • 基本知识

    1. 创建简单的标签
    2. 在标签中放置文本
    3. 给标签添加属性
    4. ID和Class
  • JavaScrit

    1. 输出文本
    2. 设置属性
    3. 循环和条件
  • 高级模板(官方教程尚未给出)

    1. 继承(Extends)和块(Blocks)
    2. 包含文件
    3. 掺杂模式(Mixin)
    4. 过滤器

基本知识

Jade可以被当做是HTML的“速记法”,这一小节中将会讲述所有你需要知道的用法。

创建简单的标签

Jade使用强制缩进的方法控制标签,所以你不再需要写封闭标签,Jade会自动帮你的。你能通过缩进的方式让一些标签被包含到另一些标签之中:

jade代码:

div  
    address
    i
    strong

生成代码:

<div>  
    <address></address><i></i><strong></strong>
</div>  

在标签中放置文本

默认情况下,标签中的内容会被当做其他Jade元素,所以你需要做一些处理才能让内容正常显示出来,例如以下三种方式: jada代码:

h1 Welcome to Jade  
p  
  | Text can be included in a number of
  | different ways.
p.  
  This way is shortest if you need big
  blocks of text spanning multiple
  lines.

生成代码:

<h1>Welcome to Jade</h1>  
<p>  
  Text can be included in a number of
  different ways.
</p>  
<p>  
  This way is shortest if you need big
  blocks of text spanning multiple
  lines.
</p>  

译注: 第一种方法由于是单独一行,所以在h1标签之后可以直接写内容而不会被当做是jade内容 第二种方法由于文本处于p的下一级,所以每一行的第一个词(Text和different)会被当做是jade关键字处理。避免的方法就是在行首添加“|”(shift+\)字符。 第三种方法在p后加一个英文句号,则整个下一级内容全部都被当做是文本而非Jade代码。

给标签添加属性

想要给标签添加属性,可以在标签后面紧跟一个括号,在括号中写上属性和值,多个属性则由逗号分隔,例如: jade代码:

h1(id="title") Welcome to Jade  
button(class="btn", data-action="bea").  
    Be Awesome

生成代码:

<h1 id="title">Welcome to Jade</h1>  
<button class="btn" data-action="bea">  
  Be Awesome
</button>  

ID和Class

由于经常要为标签添加ID和Class,所以Jade提供一种简单的方法,它的语法就像CSS的选择器,例如: jade代码:

h1#title Welcome to Jade  
button.btn(data-action="bea") Awesome  

生成代码:

<h1 id="title">Welcome to Jade</h1>  
<button class="btn" data-action="bea">  
  Awesome
</button>  

JavaScript

Jade的绝不只是个HTML的简写方法,它的一些特征能够让你创建动态内容的模板。

输出文本

你能直接将JavaScript变量中的纯文本输出出来,Jade的过滤机制能够让你免受HTML注入攻击 JavaScript代码:

var jade = require('jade');  
var fn = jade.compile(jadeTemplate);  
var htmlOutput = fn({  
  maintainer: {
    name: 'Forbes Lindesay',
    twitter: '@ForbesLindesay',
    blog: 'forbeslindesay.co.uk'
  }
});

Jade代码:

h1  
  | Maintainer:
  = ' ' + maintainer.name
table  
  tr
    td Twitter
    td= maintainer.twitter
  tr
    td Blog
    td= maintainer.blog

生成代码:

<h1>Maintainer: Forbes Lindesay</h1>  
<table>  
  <tr>
    <td>Twitter</td>
    <td>@ForbesLindesay</td>
  </tr>
  <tr>
    <td>Blog</td>
    <td>forbeslindesay.co.uk</td>
  </tr>
</table>  

注:如果不想要让Jade过滤你的输出内容,可以使用“!=”而非“=”。

译注:显而易见,想要在Jade模板中使用传递进来的变量,可以通过“=”进行。“=”后面紧跟传递进来的变量的变量名,这个变量可以是词典等复杂的数据类型。Jade会自动解析并将其填充进模板中,最终生成HTML代码。

设置属性

通过JavaScript所填充的值,也可以用来给标签设置属性,例如: jade代码:

h1(name=maintainer.name)  
  | Maintainer:
  = ' ' + maintainer.name
table  
  tr
    td(style='width: '+(100/2)+'%').
      Twitter
    td= maintainer.twitter
  tr
    td(style='width: '+(100/2)+'%').
      Blog
    td= maintainer.blog

生成代码:

<h1 name="Forbes Lindesay">  
  Maintainer: Forbes Lindesay
</h1>  
<table>  
  <tr>
    <td style="width: 50%">Twitter</td>
    <td>@ForbesLindesay</td>
  </tr>
  <tr>
    <td style="width: 50%">Blog</td>
    <td>forbeslindesay.co.uk</td>
  </tr>
</table>  

译注:JavaScript中传递进来的值,不但可以作为标签中的内容,还能够作为标签的属性。Jade甚至支持在标签中进行一些表达式计算,而“=”则表示后面的内容是一个表达式。在表达式中可以使用传入参数和正常的表达式运算。其运算结果将会填充进模板。

循环和条件

你可以根据某个表达式去决定是否显示一些东西,例如根据用户是否登陆,显示不同的内容。 Jade中的if语句和JavaScript中的if语句很相似。但Jade中的if语句可以不用写小括号,例如:

jade代码:

- var user = { name: 'John' }
if user  
  div.welcomebox
    // Filtered inline output
    p.
      Welcome, #{user.name}
else  
  div.loginbox
    form(name="login", action="/login", method="post")
      input(type="text", name="user")
      input(type="password", name="pass")
      input(type="submit", value="login")

生成代码:

<div class="welcomebox">  
  <!-- Filtered inline output-->
  <p>Welcome, John</p>
</div>  

其他教程官方尚未更新

Friskit

继续阅读此作者的更多文章