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)

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

文档类型

要添加文档类型声明，只需使用!!!，后面可以跟一个可选值。

!!!

不过，这将输出过渡型文档类型声明。

!!! 5

以下是默认定义的文档类型，可以轻松扩展。

$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。

pagon / jade

维护者

详细信息