AdonisJS 中文文档子视图
顾名思义，partials 是一种将一大块标记提取到其文件中，然后在多个模板中重复使用它的方法。
将网站 header、logo、footer 和 sidebar 保留在其文件中是部分部分的一些常见用例。
基本示例#
让我们使用部分创建一个带有页眉、侧边栏、主要和页脚的标准网页。
1. 创建如下文件结构#
├── views
│ ├── partials
│ │ ├── footer.edge
│ │ ├── header.edge
│ │ └── sidebar.edge
│ └── home.edge2. 在相应的部分中写入以下内容#
// title: partials/header.edge
<header class="header"></header>// title: partials/sidebar.edge
<div class="sidebar"></div>// title: partials/footer.edge
<footer class="footer"></footer>3. 在 home.edge 文件中写入以下标记。#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* { margin: 0; padding: 0; }
.header { height: 60px; background: rgba(255,138,0,.2); }
.layout { height: calc(100vh - 100px); display: flex; }
.sidebar { height: 100%; background: rgba(156, 39, 176, 0.2); width: 250px; }
main { height: 100%; background: #f7f7f7; flex: 1 }
.footer { height: 40px; background: #5e5e5e; }
</style>
</head>
<body>
@include('partials/header')
<section class="layout">
@include('partials/sidebar')
<main></main>
</section>
@include('partials/footer')
</body>
</html>4. 结果#
The @include 标签#
@include 标签负责加载和内联部分。
- 它只接受一个参数，即相对于视图目录的部分路径
- 路径也可以是动态的。这意味着你可以使用变量来定义部分路径
- 部分可以访问父模板状态
此外，只有当某个条件为 true 时，才会有一个附加的 @includeIf 标记来包含部分。
@includeIf(post.comments, 'partials/comments')本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号