3 个版本
| 0.1.2 | 2024 年 6 月 6 日 |
|---|---|
| 0.1.1 | 2024 年 6 月 6 日 |
| 0.1.0 | 2024 年 6 月 6 日 |
84 在 模板引擎 中
110KB
3K SLoC
platelet
platelet 是一种以 HTML 为首的模板语言。
此仓库包含用于渲染 platelet 模板的 Rust 库。
为什么选择 platelet？
与 moustache、handlebars、Jinja、Liquid 和其他模板语言不同，platelet 的语法是 HTML 的一部分（类似于 Vue.js）。
这有几个优点
- 高级 但比直接字符串操作 功能更少
- 当与 HTML 一起工作时，语言 易于阅读和编写，控制流程遵循 HTML 结构
- 您可以使用自己的 HTML 格式化和 工具
- HTML 清理 更自然和直接
示例
您可以在 platelet 演示场 中探索实时示例
模板
<ul pl-if="n > 0">
<li pl-for="i in [1, 2, 3]">{{ i }} × {{ n }} = {{ i * n }}</li>
</ul>
上下文（输入）
{ "n": 7 }
输出
<ul>
<li>1 × 7 = 7</li>
<li>2 × 7 = 14</li>
<li>3 × 7 = 21</li>
</ul>
更多示例
高级示例
模板 templates/index.html
<!doctype html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<template pl-for="b in blogposts" pl-src="./blogpost.html" ^blogpost="b">
</template>
</body>
</html>
模板 templates/blogpost.html
<article>
<img ^src="blogpost.img_url" />
<div>
<h2>
<a ^href="blogpost.link">{{blogpost.title}}</a>
</h2>
<template pl-html="blogpost.summary"></template>
<date>{{blogpost.date}}</date>
</div>
</article>
<style>
article {
display: flex;
}
</style>
上下文（输入）
{
"title": "Angus' Blog",
"blogposts": [
{
"img_url": "...",
"link": "...",
"summary": "...",
"title": "...",
"date": "01/11/2025"
},
{
"img_url": "...",
"link": "...",
"summary": "...",
"title": "...",
"date": "01/11/2020"
}
]
}
参考
| 语法 | 示例 | 详细信息 |
|---|---|---|
pl- 指令 |
pl-if、pl-for ... |
→ |
^ 属性 |
^class、^name ... |
→ |
{{ ... }} 节点 |
{{user.email}} |
→ |
| 表达式 | 1 +users[i].score |
→ |
pl- 指令
以 pl- 开头的 HTML 属性是特殊的。它们受到了 Vue 指令的启发。
| 属性 |
|---|
pl-if |
pl-else-if |
pl-else |
pl-for |
pl-html |
pl-src |
pl-slot |
pl-is |
条件语句：pl-if、pl-else-if、pl-else
pl-if仅在表达式为真时渲染此元素
pl-else-if，在pl-if之后使用，仅在表达式为真时渲染此元素
pl-else，在pl-if或pl-else-if之后使用，否则将渲染此元素
<button pl-if="stock >= 1">Add to cart</button>
<button pl-else-if="stock > 0">Add to cart (1 item left!)</button>
<button pl-else disabled>Out of stock</button>
当应用于<template>时，模板将被渲染并渲染子元素。
pl-for
多次渲染元素。
允许4种表达式类型
<div pl-for="item in items">{{item.text}}</div>
<div pl-for="(item, index) in items">...</div>
<div pl-for="(value, key) in object">...</div>
<div pl-for="(value, name, index) in object">...</div>
当应用于<template>时，模板将被移除并渲染子元素。
pl-html
将innerHTML（不进行清理）设置为给定的表达式。
要设置outerHTML，将其应用于<template>。
<p pl-html="markdown"></p>
{ "markdown": "<h1>Content from a CMS</h1>..." }
pl-src
给定一个字符串路径，在路径处渲染模板并替换元素。
<slot pl-src="./sidebar.html" ^username="data.username">
<p>Some text...</p>
</slot>
设置在元素上（常规属性或渲染^属性）的属性用于渲染模板的上下文。
pl-slot
在<slot>上，pl-slot（可选带有名称）将元素标记为要替换的槽。
在<template>上，pl-slot标记模板内容为“填充该槽的内容”。
index.html
<slot pl-src="layout.html">
<template pl-slot="sidebar">
<ul> ...
</template>
<template pl-slot="content">
<table> ...
</template>
</slot>
layout.html
<body>
<nav>
<slot pl-slot="sidebar"></slot>
</nav>
<main>
<slot pl-slot="content"></slot>
</main>
</body>
输出
<body>
<nav>
<ul> ...
</nav>
<main>
<table> ...
</main>
</body>
pl-is
给定一个返回字符串的表达式，将渲染的元素的标签替换为此元素
<slot pl-is='i == 0 ? "h1" : "h2"'>{item}</slot>
^属性
在HTML属性中，使用^前缀属性允许您将值设置为platelet表达式。
<a ^href='"/products/" + slug'></a>
如果表达式为false或null，则属性不会渲染。
<div
class="static"
^class="{ active: isActive, 'text-danger': hasError }"
^name="null"
></div>
这将渲染
<div class="static active text-danger"></div>
文本节点
在HTML文本节点中，{{variable}}插入一个（清理过的）字符串。
<h1>Welcome back {{user.name}}!</h1>
如果变量未定义，则返回错误。
| 数据类型 | 渲染为 |
|---|---|
| 数字 | 一个数字 |
| 字符串 | 一个字符串 |
| 布尔值 | true或false |
| 空值 | 空白 |
| 数组 | 错误 |
| 对象 | 错误 |
表达式
所有有效的JSON值都是有效的platelet表达式。在此基础上，为了方便在HTML中使用，允许单引号字符串'like this'。
运算符
对任何东西：==、!=、&&、||、!、x ? y : z
对数字：+（加法）对字符串和数组：+（连接）对对象：+（浅合并，右侧覆盖）
关于数字： -（减号）、*（乘号）、/（除号）、%（取模）
关于数字： >（大于）、<（小于）、>=（大于等于）、<=（小于等于）
关于对象数组字符串，索引运算符 a[b]
关于对象，点访问： {"": ""}.name
关于数组、对象和字符串： len(z)
表达式可以加括号 (9 + 3) / 2 == 6
真值
false、[]、""、{}、null 是 假的。
所有其他值都是 真的。
依赖
~6–13MB
~165K SLoC