Первый шаблон

Что такое шаблон

Страница в менеджере это данные: заголовок, адрес, текст. Шаблон это рамка, в которую эти данные вставляются: где стоит заголовок, какого он цвета, что в шапке и что в подвале. Одну рамку можно надеть на сколько угодно страниц.

Шаблоны в Eile пишутся на Svelte. Это обычный HTML, в который можно вставлять данные в фигурных скобках. Учить его отдельно не нужно: всё необходимое разберём по ходу.

Шаблон Minimal

Над деревом страниц слева есть вкладка Элементы. Откройте её: там списки шаблонов, компонентов, плагинов и полей страниц. Щёлкните по шаблону Minimal.

<script>
  let { page, site } = $props();
</script>

<svelte:head>
  <title>{page.longTitle || page.title} — {site.name}</title>
</svelte:head>

{@html page.content}

Разберём по частям.

• <script>…</script>: служебная часть, здесь готовят данные. Строка let { page, site } = $props(); говорит: «шаблон получает страницу page и сайт site». Так в каждом шаблоне.
• <svelte:head>: то, что попадёт в заголовок документа. Тег <title> задаёт текст на вкладке браузера.
• {page.title}: фигурные скобки значат «вставь сюда значение». page.title это заголовок страницы, site.name название сайта.
• page.longTitle || page.title: «длинный заголовок, а если его нет, то обычный». Две черты || читаются как «или».
• {@html page.content}: текст страницы, который вы пишете в менеджере.

Три приёма Svelte

Всё, что нам понадобится в кукбуке, держится на трёх приёмах. Первый вы уже видели: выражение в фигурных скобках.

<p>Сайт называется {site.name}</p>

Второй: показать кусок, только если выполнено условие.

{#if page.introText}
  <p class="intro">{page.introText}</p>
{/if}

Анонс выведется, только если вы его заполнили. Пустой абзац на странице не появится.

Третий: повторить кусок для каждого элемента списка.

<ul>
  {#each ['эспрессо', 'капучино', 'фильтр'] as drink}
    <li>{drink}</li>
  {/each}
</ul>

Получится список из трёх пунктов. Внутри блока {#each} слово drink по очереди принимает каждое значение.

Свой шаблон Base

1. На вкладке Элементы нажмите + рядом со словом «Шаблоны».
2. Напишите имя Base. Имена элементов пишутся латиницей с заглавной буквы.
3. Нажмите Создать. Откроется редактор с заготовкой: сотрите её и вставьте код ниже.
4. Сохраните: Сохранить или Ctrl+S.

<script>
  import Content from '$core/Content';

  let { page, site } = $props();
</script>

<svelte:head>
  <title>{page.longTitle || page.title} — {site.name}</title>
</svelte:head>

<header class="top">
  <a class="logo" href="/">{site.name}</a>
</header>

<main>
  <h1>{page.longTitle || page.title}</h1>
  <Content of={page} />
</main>

<footer class="bottom">
  <p>{site.name} · кухни на заказ</p>
</footer>

<style>
  :global(body) {
    margin: 0;
    background: #f1efeb;
    color: #1f1e1c;
    font: 18px/1.6 system-ui, sans-serif;
  }

  .top,
  main,
  .bottom {
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem;
  }

  .logo {
    color: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
  }

  h1 {
    font-size: 2.75rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }

  .bottom {
    color: #6b6862;
    font-size: 0.9rem;
  }
</style>

Что здесь нового по сравнению с Minimal:

• import Content from '$core/Content';: подключаем встроенный компонент Content. Он выводит текст страницы и при этом превращает ссылки на другие страницы, вставки компонентов и формы в готовый HTML. Поэтому дальше мы пишем <Content of={page} /> вместо {@html page.content}.
• <header>, <main>, <footer>: шапка, основная часть и подвал. Это обычные теги HTML.
• <style>: стили, то есть цвета, шрифты и отступы. Стили шаблона действуют только на его разметку. :global(body) нужен, чтобы задать фон всей странице.

Надеть шаблон на страницы

Шаблон создан, но страницы по-прежнему на Minimal. Переключим их. Быстрее всего это сделать на обзоре: откройте Страницы в шапке и в колонке шаблона выберите Base у каждой страницы. Значение сохраняется, как только вы уходите из ячейки.

Второй способ: открыть страницу и выбрать шаблон в блоке Место на сайте справа, затем сохранить.

Новые страницы получают шаблон родителя, а на верхнем уровне шаблон соседей. Раз все страницы теперь на Base, новые тоже будут на нём.

Ошибка в шаблоне

Сделаем ошибку нарочно, чтобы не бояться её потом. Сотрите в шаблоне Base одну закрывающую фигурную скобку, например в {site.name}, и сохраните.

Менеджер не сохранит шаблон и покажет, на какой строке ошибка. Сайт в это время работает на прежней версии: посетители ничего не заметят. Верните скобку и сохраните снова.