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

Все главы  [1 Перед началом](https://eile.site/cookbook/nachalo)[2 Установка](https://eile.site/cookbook/ustanovka)[3 Страницы](https://eile.site/cookbook/stranitsy)[4 Первый шаблон](https://eile.site/cookbook/pervyi-shablon)[5 Компоненты](https://eile.site/cookbook/komponenty)[6 Рамка сайта](https://eile.site/cookbook/ramka)[7 Поля страниц](https://eile.site/cookbook/polya)[8 Списки страниц](https://eile.site/cookbook/spiski)[9 Свои настройки](https://eile.site/cookbook/nastroiki)[10 Заявка на замер](https://eile.site/cookbook/forma)[11 Живые части](https://eile.site/cookbook/zhivye-chasti)[12 В интернет](https://eile.site/cookbook/v-internet)[13 Что дальше](https://eile.site/cookbook/dalshe)

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

Шаблон решает, как выглядит страница. Разберём шаблон Minimal строчка за строчкой и напишем свой: с шапкой, заголовком и спокойными цветами студии.

Глава 4 из 13 · 4 минуты чтения

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

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

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

## Шаблон Minimal

Над деревом страниц слева есть вкладка **Элементы**. Откройте её: там списки шаблонов, компонентов, плагинов и полей страниц. Щёлкните по шаблону `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.

Шаблон Base

```
<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](https://eile.site/media/screens/cook-base-light.webp?v=6183c82eb5ced0dc)

Главная студии на шаблоне Base

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

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

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

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