README

Jade 是一个高性能的模板编译器，深受 Haml 影响，并为 PHP 5.3 实现。

特性

高性能解析器
优秀的可读性
编译和运行时的上下文错误报告
HTML 5 模式（使用 !!! 5 doctype）
结合动态和静态标签类
无标签前缀
清晰且美观的 HTML 输出
过滤器
- :php
- :cdata
- :css
- :javascript
甚至可以通过 API 编写并添加自己的过滤器
TextMate Bundle
VIM 插件

公共 API

$dumper = new PHPDumper();
$dumper->registerVisitor('tag', new AutotagsVisitor());
$dumper->registerFilter('javascript', new JavaScriptFilter());
$dumper->registerFilter('cdata', new CDATAFilter());
$dumper->registerFilter('php', new PHPFilter());
$dumper->registerFilter('style', new CSSFilter());

// Initialize parser & Jade
$parser = new Parser(new Lexer());
$jade   = new Jade($parser, $dumper);

// Parse a template (both string & file containers)
echo $jade->render($template);

语法

行结束符

CRLF 和 CR 在解析之前被转换为 LF。

缩进

Jade 是基于缩进的，但目前仅支持 2 个空格 缩进。

标签文本

只需在标签后放置一些内容即可

p wahoo!

渲染 wahoo!。

很酷，但关于大量文本怎么办

p
  | foo bar baz
  | rawr rawr
  | super cool
  | go Jade go

渲染 foo bar baz rawr.....

实际上想用 <?php echo ... ?> 的原因？请使用 {{}} 代替

p {{$something}}

现在我们有 <?php echo $something ?>

嵌套

ul
  li one
  li two
  li three

属性

Jade 目前支持 '(' 和 ')' 作为属性分隔符。

a(href='/login', title='View login page') Login

或者我们可以使用冒号来分隔对

a(href: '/login', title: 'View login page') Login

布尔属性也得到支持

input(type="checkbox", checked)

布尔属性与代码将在 true 时输出属性

input(type="checkbox", checked: someValue)

注意：属性对的前导和尾随空白将被忽略。

Doctype

要添加 doctype，只需使用 !!! 后跟一个可选值

!!!

将输出过渡的 doctype，然而

!!! 5

将输出 HTML 5 的 doctype。以下是由默认定义的 doctype，可以轻松扩展

$doctypes = array(
       '5' => '<!DOCTYPE html>',
       'xml' => '<?xml version="1.0" encoding="utf-8" ?>',
       'default' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
       'transitional' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
       'strict' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
       'frameset' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">',
       '1.1' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">',
       'basic' => '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">',
       'mobile' => '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">'
   );

注释

Jade 注释

Jade 支持尖锐注释（//- COMMENT）。因此 jade 块

//- JADE
- $foo = "<script>";
p
//- ##### COMMENTS ARE SUPPER! ######
  - switch ($foo)
    -case 2
      p.foo= $foo
//-    - case 'strong'
  //-      strong#name= $foo * 2
    -   case 5
      p some text

将被编译为

<?php $foo = "<script>"; ?>
<p>
  <?php switch ($foo) ?>
    <?php case 2 ?>
      <p class="foo"><?php echo $foo ?></p>
    <?php break; ?>
    <?php case 5 ?>
      <p>some text</p>
    <?php break; ?>
  <?php endswitch; ?>
</p>

HTML 注释

Jade 支持 HTML 注释（// comment）。因此块

peanutbutterjelly
  // This is the peanutbutterjelly element
  | I like sandwiches!

将变成

<peanutbutterjelly>
  <!-- This is the peanutbutterjelly element -->
  I like sandwiches!
</peanutbutterjelly>

与多行注释一样

//
  p This doesn't render...
  div
    h1 Because it's commented out!

将编译为

<!--
  <p>This doesn't render...</p>
  <div>
    <h1>Because it's commented out!</h1>
  </div>
-->

IE 条件注释

此外，Jade 支持 IE 条件注释，因此

// [if IE]
  a( href = 'http://www.mozilla.com/en-US/firefox/' )
    h1 Get Firefox

将被解析为

<!--[if IE]>
  <a href="http://www.mozilla.com/en-US/firefox/">
    <h1>Get Firefox</h1>
  </a>
<![endif]-->

过滤器

过滤器以 : 为前缀，例如 :javascript 或 :cdata，并将以下文本块传递给任意函数进行处理。请查看此文档顶部的功能了解可用的过滤器。

body
  :php
    | $data = 40;
    | $data /= 2;
    | echo $data;

渲染

<body>
  <?php
    $data = 40;
    $data /= 2;
    echo $data;
  ?>
</body>

代码

缓冲/非缓冲输出

Jade 目前支持两种可执行代码的分类。第一种以 - 为前缀，且不进行缓冲

- var $foo = 'bar';

这可以用于条件或迭代

- foreach ($items as $item):
  p= $item

由于 Jade 的缓冲技术，以下也是有效的

- if ($foo):
  ul
    li yay
    li foo
    li worked
- else:
  p hey! didnt work

第二种是回声代码，用于回显返回值，以 = 为前缀

- $foo = 'bar'
= $foo
h1= $foo

这将输出

<?php $foo = 'bar' ?>
<?php echo $foo ?>
<h1><?php echo $foo ?></h1>

代码块

此外，Jade 支持代码块，支持基本的 PHP 模板语法

ul
  - while (true):
    li item

将被渲染为

<ul>
  <?php while (true): ?>
    <li>item</li>
  <?php endwhile; ?>
</ul>

但别忘了在指令开始后（如 - if(true) :）使用冒号 :

有一些默认的指令：if、else、elseif、while、for、foreach、switch、case。

maht0rz / jade

维护者

详细信息