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)

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

Doctypes

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

!!!

将输出过渡的doctype，然而

!!! 5

将输出HTML 5的doctype。下面是默认定义的doctypes，可以很容易地扩展

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

marcwoozie / jade-php

维护者

详细信息