子视图

未匹配的标注

顾名思义,partials 是一种将一大块标记提取到其文件中,然后在多个模板中重复使用它的方法。

将网站 headerlogofootersidebar 保留在其文件中是部分部分的一些常见用例。

基本示例

让我们使用部分创建一个带有页眉、侧边栏、主要和页脚的标准网页。

1. 创建如下文件结构

├── views
│   ├── partials
│   │   ├── footer.edge
│   │   ├── header.edge
│   │   └── sidebar.edge
│   └── home.edge

2. 在相应的部分中写入以下内容

// 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')

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

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

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

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

上一篇 下一篇
贡献者:1
讨论数量: 0
发起讨论 查看所有版本


暂无话题~