README

Kirby Template Sugar

一个轻量级的模板编译器，为 Kirby 的 php 模板添加了一些语法糖。

Kirby 的新带有插槽的片段允许您采用类似 Laravel blade 模板或 Vue 等javascript 框架的组件式工作流程。然而，纯 php 语法可能很冗长。因此，通过一些模板语法糖，您可以编写如下内容

<snippet:card $rounded="<? true ?>" class="bg-yellow" id="my-card">
  <slot:icon>🍬</slot:icon>
  <slot:title>
    <h2>Kirby Template Sugar</h2>
  </slot:title>
  <slot>
    <snippet:link $url="github.com/arnoson/kirby-template-sugar">
      <i>Read more ...</i>
    </snippet:link>
  </slot>
</snippet:card>

而不是这个

<?php snippet('card', [
  'rounded' => true,
  'attr' => ['class' => 'bg-yellow', 'id' => 'my-card']
], slots: true); ?>
  <?php slot('icon'); ?>🍬<?php endslot(); ?>
  <?php slot('title'); ?>
    <h2>Kirby Template Sugar</h2>
  <?php endslot(); ?>
  <?php slot(); ?>
    <?php snippet('link', ['url' => 'github.com/arnoson/kirby-template-sugar'], slots: true); ?>
      <i>Read more ...</i>
    <?php endsnippet(); ?>
  <?php endslot(); ?>
<?php endsnippet(); ?>

它是如何工作的

您的模板文件需要编译成常规 php，类似于其他模板语言的工作方式。但本项目目标不是为 Kirby 创建一个新的完整模板语言。相反，它拥抱现有的 php 模板，并在它们变得过于杂乱的地方添加一点语法糖。您仍然编写 php/html（带有语法高亮、智能感知等）并在这里或那里添加特殊的 <snippet>、<slot> 或 <layout> 标签来保持整洁。

入门指南

开始使用最简单的方法是查看示例之一

如果您想要一个不依赖于任何其他构建工具的最小入门套件，请使用CLI 示例。
要编译您的模板以及其他前端资源，请使用Vite 示例。

要手动开始（或转换现有项目），请查看CLI 或Vite 插件。并确保您还安装了Kirby 插件。

语法

片段

片段可以有插槽或自闭合

属性和属性

片段可以有 props，它们直接传递给片段，以及属性，它们组合成一个 $attr 变量传递给片段，与 props 一起。Props 以 $ 开头（如 $open 和 $items），属性就像常规 html 属性（class、aria-label）一样指定。

如果您想将 php 表达式传递给片段，例如：items => $site->children()->listed()，您只需将其包裹在 php 标签中（见下面的代码）

实际上，编译后的代码看起来像这样。为了使调试更容易，行号将保持不变

这使得实现这样的片段变得非常简单

// snippets/menu.php
<nav <?= attr($attr) ?>>
  <?php foreach ($items as $item) { /* ... */ } ?>
</nav>

或者使用 @fabianmichael 的出色的 kirby-template-attributes 来做得更好

// snippets/menu.php
<nav <?= classes('menu', ['menu--open' => $open])->merge($attr) ?>>
  <?php foreach ($items as $item) { /* ... */ } ?>
</nav>

属性简写语法

如果您的属性名称和 php 变量名称相同，您可以使用简写语法

<?php foreach ($projects as $project): ?>
  <snippet:project $project />
<?php endforeach ?>

这将与以下内容相同

<?php foreach ($projects as $project): ?>
  <snippet:project $project="<? $project ?>" />
<?php endforeach ?>

CSS 变量

您可以使用类似于属性的语法分配 CSS 变量。这适用于任何标签，而不仅仅是 <snippet> 和 <layout>。

注意：如果您引用另一个变量名（如 --some-variable），则可以省略 var()。

布局

如果您还使用 Kirby 的布局，则可以使用 <layout> 标签定义它们

或者使用插槽、属性和属性值

调试

如果你使用的是 xdebug，你将无法通过IDE设置断点，但可以在源文件中使用 xdebug_break()。要移除断点，只需删除 xdebug_break() 并重新保存源文件。

arnoson / kirby-template-sugar

维护者

详细信息