模板语法
使用 Edge,我们确保不会引入太多新概念,而是依赖 JavaScript 语言功能。
Edge 的语法围绕着两个主要的原语。
- 花括号 用于评估表达式并显示其输出值。
- 边缘标签 用于向模板引擎添加新功能。标签 API 被 Edge 的核心使用,并且也被暴露以添加自定义标签。
花括号
Edge 使用流行的双花括号(又名 mustache)方法来评估 JavaScript 表达式。你可以在花括号内使用任何有效的 JavaScript 表达式,Edge 将为你评估它。
{{ user.username }}
{{ user.username.toUpperCase() }}
{{ (2 + 2) * 3 }}
{{ (await getUser()).username }}
双花括号会转义表达式的输出,以保护你的模板免受 XSS 攻击。
给定以下表达式
{{ '<script> alert(`foo`) </script>' }}
输出将是:
<script> alert(`foo`) </script>
但是,在你信任表达式的情况下,你可以 使用三个花括号指示 Edge 不要转义该值。
{{{ '<script> alert(`foo`) </script>' }}}
输出
<script> alert(`foo`) </script>
忽略花括号
你可以通过为 @
符号添加前缀来指示 Edge 忽略花括号。当你使用 Edge 为另一个模板引擎生成标记时,这通常很有帮助。
Hello @{{ username }}
输出
Hello {{ username }}
边缘标签
标签是以 @
符号开头的表达式。标签提供了一个统一的 API,用于向模板层添加功能。
Edge 的核心使用标签来实现条件、循环、部分和组件等功能。
{{-- if tag --}}
@if(user)
@end
{{-- include tag --}}
@include('partials/header')
标签必须始终出现在其行中,并且不能与其他内容混合。这是 广泛的语法指南。
{{-- ✅ Valid --}}
@if(user)
@end
{{-- ❌ Invalid --}}
Hello @if(user)
@end
我们将标签进一步划分为子组,以满足不同的模板需求。
块级标签
块级标签是可以选择接受其中内容的标签。必须始终使用@end
语句关闭块级标记。例如:
if
是块级标签
@if(user)
@end
section
是块级标签
@section('body')
@end
内联标签
内联标签不接受其中的任何内容,并且在同一语句中自封闭。例如:
include
是一个内联标签
@include('partials/header')
layout
是一个内联标签
@layout('layouts/master')
自封闭块级标签
有时你会发现自己会自动关闭块级标签。component
标签就是一个很好的例子。
例如,按钮组件可选择接受按钮的标记。但是,在某些情况下,你不想定义标记,因此你可以使用 @!
表达式自动关闭标记。
带有body的按钮组件
@component('button')
<span> Login </span>
@end
自闭按钮组件
@!component('button', { text: 'Login' })
可搜索标签
可搜索标签是接受一个或多个参数的标签。例如:
include
是一个可搜索的标签,因为它需要部分路径
@include('partials/header')
super
不是可搜索标签
@super
引入可搜索标签的概念来优化 Edge 编译器。对于不可查找的标签,Edge 编译器不会等待左括号和右括号出现,而是移动到下一行。
注释
注释是通过将文本包装在 {{-- --}}
表达式中来编写的。
{{-- This is a comment --}}
{{--
This is a multiline comment.
--}}
Hello {{ username }} {{-- inline comment --}}
{{-- surrounded by --}} Hello {{-- comments --}}
新行
由于标签总是写在行首,因此会在最终输出中添加一个空行。这个空行对 HTML 标记没有问题,因为 HTML 对空格并不敏感。但是,如果你使用的是对空格敏感的语言,则可以使用波浪号 ~
字符删除换行符。
<p>Hello
@if(username)~
{{ username }}
@endif~
</p>
输出
<p>Hello virk</p>
本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。