AdonisJS 中文文档布局
Edge 中的布局允许你定义页面的主要布局，然后根据需要覆盖特定部分。
基本示例#
让我们使用布局创建一个标准网页。
1. 创建如下文件结构#
.
├── views
│ ├── layouts
│ │ └── main.edge
│ └── home.edge2. 将以下标记粘贴到布局文件中。#
// title: resources/views/layouts/main.edge
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
</nav>
@!section('body')
<footer class="footer">
</footer>
</body>
</html>3. 将以下标记粘贴到 resources/views/home.edge 文件。#
// title: resources/views/home.edge
@layout('layouts/main')
@set('title', 'Home page')
@section('body')
<section class="hero is-warning">
<div class="hero-body">
<p class="title">
Title
</p>
<p class="subtitle">
Subtitle
</p>
</div>
</section>
@end4. 渲染视图，你会得到以下结果#
layout 标签#
布局标签用于定义给定模板的布局。
- 它必须出现在模板的第一行。否则，它将被忽略。
- 每个模板只能使用一种布局
- 布局名称必须是静态的，不能使用运行时变量定义。
section 标签#
section 标签是一个布局暴露的占位符，用于注入内容。布局可以根据需要定义任意数量的部分，并且父模板可以在必要时覆盖它们。
在以下示例中，布局渲染 scripts 部分内的脚本标签，这允许所有页面使用这些脚本或通过使用不同的脚本标签重新定义相同的部分来覆盖。
布局#
@section('scripts')
<script src="./vendor.js"></script>
<script src="./app.js"></script>
@end父模板最高覆盖优先级#
@section('scripts')
<script src="./vendor.js"></script>
<script src="./admin.js"></script>
@end附加到现有脚本的父模板#
@section('scripts')
@super {{-- Super means inherit --}}
<script src="./autocomplete.js"></script>
@end- 所有节 (section) 标签的名称必须是唯一的。
- 节名称必须是静态的，并且不能使用运行时变量来定义。
- 你不能有嵌套的节。
- 所有节都必须位于顶层，此约束类似于 JavaScript 中的 ESM 导出，其中每个
export语句都顶级 (top-level) 和唯一。
本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号