布局（Layouts）

你可以使用插槽来渲染模板。让我们在 views/components/layout 目录中创建一个 app.edge 文件。

views/components/layout/app.edge

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{{ title || "Your default title" }}</title>
  @if ($slots.meta)
    {{{ await $slots.meta() }}}
  @endif
</head>
<body>
  {{{ await $slots.main() }}}
</body>
</html>

将布局定义在 components 目录中，让我们可以利用以标签形式引用组件特性。由于我们将文件存放在 layout 目录中，且文件名为 app.edge，因此可以使用 @layout.app 标签来渲染该布局。

编辑 views 目录中的 welcome.edge 文件。在本示例中，我们希望使用 $slots.main 函数渲染欢迎页的主内容，使用 $slots.meta 添加 meta 标记，并更改默认标题。

views/welcome.edge

@layout.app({ title: "Welcome page title" })
  @slot('meta')
    <meta name="description" content="A welcome page made with EdgeJS">
  @endslot

  @slot('main')
    <h1>Hello world</h1>
  @endslot
@end

如你所见，我们可以使用插槽来替换布局中的某些部分。这正是我们对 meta 部分 和 main 部分 所做的操作。