README

Pug-php 和 Phug 的模板组件扩展

安装

composer require phug/component

全局启用

\Phug\Component\ComponentExtension::enable();

要自动在调用 \Pug\Facade 或 \Phug\Phug 类上的静态方法 render、renderFile、display、displayFile 等，启用它。

如果在一个 \Pug\Pug 或 \Phug\Renderer 实例中使用，将 ComponentExtension 类添加到模块中

$pug = new \Pug\Pug([/*options*/]);
\Phug\Component\ComponentExtension::enable($pug);

使用方法

//- Register a component
component alert
  .alert.alert-danger
    .alert-title
      slot title
  
    slot

section
  //- Somewhere later in your template
  +alert
    slot title
      | Hello #[em world]!

    p This is an alert!

输出

<section>
  <div class="alert alert-danger">
    <div class="alert-title">
      Hello <em>world</em>!
    </div>

    <p>This is an alert!</p>
  </div>
</section>

默认插槽

component page
  header
    slot header
      | Default header

  slot

  footer
    slot footer
      | Default footer

+page
  | My page content

  slot footer
    | Custom footer

输出

<header>
  Default header
</header>

My page content

<footer>
  Custom footer
</footer>

参数

组件继承混入行为。

参数可以作为混入传递

component page($title)
  header
    h1=$title

  slot

  footer
    slot footer
      | Footer of #{$title} page

+page("Contact")
  | Contact us

(如果使用 pug-php 或 js-phpize，则 $title 变为 title)

输出

<header>
  <h1>
    Contact
  </h1>
</header>

Contact us

<footer>
  Footer of Contact page
</footer>

回退组件

此包还包括一个函数，用于获取给定名称中定义的第一个混入/组件

component page
  | Page component

+#{$firstComponent('customPage', 'page')}

输出

Page component

如果定义了 customPage 组件，则将使用它代替

component page
  | Page component

component customPage
  | CustomPage component

+#{$firstComponent('customPage', 'page')}

输出

CustomPage component

(如果使用 pug-php 或 js-phpize，则 $firstComponent 变为 firstComponent) $firstMixin 也是一个别名。