模板语法

未匹配的标注

使用 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>' }}

输出将是:

&lt;script&gt; alert(&#x60;foo&#x60;) &lt;/script&gt;

但是,在你信任表达式的情况下,你可以 使用三个花括号指示 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>

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/adonisjs/5.x/vi...

译文地址:https://learnku.com/docs/adonisjs/5.x/vi...

上一篇 下一篇
贡献者:2
讨论数量: 0
发起讨论 只看当前版本


暂无话题~