README

Jade.php 为 Jade 模板编译器添加了内联 PHP 脚本支持。

分支详情

由于存在多个原始项目的分支，此分支的目的是仅跟踪更改，在必要时添加新修复，并通过个人 composer 账户共享源代码。
欢迎提出问题。

注意

请检查 git 提交历史以获取贡献者名单的权威列表这里。

语法（进行中）

官方 Jade 语法

行结束符

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)

注意：attr 对的引导/尾随空白被忽略。

文档类型

要添加文档类型，只需使用 !!! 后跟一个可选的值

!!!

将输出过渡文档类型，但是

!!! 5

将输出 html 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 支持 sharp 注释（//- 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。

geedmo / jade.php

维护者

详细信息