Layouts

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.