Макет страницы и подшаблоны

У всех страниц блога одинаковые <head>, шапка и подвал. Копировать их в каждый шаблон плохо: изменить меню придётся во всех файлах. Общую разметку выносят в макет (layout) — шаблон-обёртку, внутрь которого подставляется содержимое страницы. В Edge 6 макет — это обычный компонент.

Файл макета

Шаблоны из папки resources/views/components/ Edge превращает в теги: файл components/layout.edge становится тегом @layout. Создайте макет:

node ace make:view components/layout

{{-- resources/views/components/layout.edge --}}
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>{{ title ?? 'Мой блог' }}</title>
</head>
<body>
  <header>
    <a href="/">Мой блог</a>
  </header>
 
  <main>
    {{{ await $slots.main() }}}
  </main>
 
  <footer>Блог на AdonisJS</footer>
</body>
</html>

$slots.main() возвращает то, что страница положила внутрь тега. Тройные скобки нужны, потому что это готовый HTML, а await — потому что содержимое слота отрисовывается асинхронно.

Страница с макетом

Перепишите список статей так, чтобы он использовал макет:

{{-- resources/views/pages/posts/index.edge --}}
@layout({ title: 'Все статьи' })
  <h1>Все статьи</h1>
  <ul>
    @each(post in posts)
      <li>{{ post.title }}</li>
    @end
  </ul>
@end

Всё между @layout(...) и @end попадёт в $slots.main(). Объект в скобках — свойства (props) компонента: title станет переменной внутри макета. Откройте /posts: у страницы появились шапка, подвал и заголовок вкладки «Все статьи».

Подшаблоны

Кусок разметки, который повторяется на нескольких страницах, но не оборачивает их, выносят в подшаблон (partial) и подключают тегом @include:

{{-- resources/views/partials/nav.edge --}}
<nav>
  <a href="{{ route('posts.index') }}">Статьи</a>
  <a href="/about">О блоге</a>
</nav>

{{-- resources/views/components/layout.edge --}}
<header>
  <a href="/">Мой блог</a>
  @include('partials/nav')
</header>

Подшаблон видит те же переменные, что и шаблон, который его подключил.

Когда что использовать

Частая ошибка

Если в макете написать {{ await $slots.main() }} с двойными скобками, на странице вместо разметки появится HTML-код текстом: Edge экранирует его, как любой вывод. Для слотов всегда используйте тройные скобки {{{ }}}.