Layouts

You can use slots to render templates. Let's create a app.edge file inside the views/components/layout directory.

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>

Edit the welcome.edge file inside the views directory.
In this example, we want to render the main content of our welcome page using $slots.main function, add a meta markup with $slots.meta, and change the default title.

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

As you can see, we can use slots to replace section of our layout. This is what we have done with the meta section and the main section.