Файлы сайта: шаблоны и статика

Вкладка «Файлы» (раздел «Сайт») — это файловое хозяйство вашего сайта: Liquid-шаблоны, которыми рисуются страницы, и статика — favicon, robots.txt, шрифты. Разбираем, что там лежит и как это редактировать.

Динамика и статика

Вкладка «Файлы» делится на две папки:

Вкладка «Файлы»: динамика и статика

Папка	Что там	Как отдаётся
Динамика	Liquid-шаблоны (`.liquid`), а также `.css` и `.js` сайта. Их обрабатывает сервер: подставляет данные, исполняет условия и циклы.	Рисуются на каждом заходе (с кэшем маршрута)
Статика	`favicon`, `robots.txt`, шрифты, картинки-«не-медиа».	Отдаются как есть, байт в байт

Ключевое различие — в черновиках: у динамики правки садятся в черновик и попадают на сайт после публикации; статика публикуется как есть.

Кто использует шаблоны

Два потребителя:

Флоу — узел «Рендер страницы» указывает шаблон по имени (katalog.liquid) и передаёт ему данные, собранные узлами GraphQL.
Служебные страницы — своя страница 404 и подобные тоже рисуются шаблонами из «Динамики».

Как редактировать

Выберите файл в дереве слева — справа откроется редактор с подсветкой синтаксиса. Правите текст, нажимаете «Сохранить шаблон» — правка садится в черновик; публикация выкатывает её на сайт (как и у флоу: посетители живого сайта видят изменения только после публикации).

Шаблон katalog.liquid в редакторе

Создать новый файл — поле имени и кнопка «Создать файл»; загрузить готовый — кнопка загрузки рядом. Имя файла можно переименовать и позже — только не забудьте поменять его и в узлах «Рендер страницы», которые этот шаблон используют. Удаление — значок корзины у файла в дереве.

Файлы можно раскладывать по папкам: укажите имя вместе с путём — partials/card.liquid — и папка появится в дереве сама (кнопка-папка рядом с «Создать файл» создаёт и пустую). Вложенность любая; slash в имени — это разделитель папок. Для партиалов заведите папку partials — так дерево не превращается в свалку, а в {% include "partials/card" %} путь совпадает с тем, что видно в дереве.

Liquid за одну минуту

Шаблон — обычный HTML с вставками:

<h1>{{ page.title }}</h1>
{% for s in catalog.data.services %}
  <li>{{ s.title }} — {{ s.price }} ₽</li>
{% endfor %}

{{ … }} — вывести значение (данные из флоу, поля записи);
{% … %} — логика: циклы for, условия if.

Данные приходят из флоу: то, что узел GraphQL положил в «Ключ результата», доступно шаблону как ключ.data.….

Базовый шаблон: общая обёртка страниц

Шапка, подвал, <head> одинаковы на всех страницах — чтобы не копировать их в каждый шаблон, заводят базовый шаблон. Это обычный файл в «Динамике», например base.liquid, в котором место для содержимого — переменная content:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>{{ page_title }}</title>
  <link rel="stylesheet" href="/static/main.css">
</head>
<body>
  <header>… меню сайта …</header>

  {{ content }}

  <footer>… контакты …</footer>
</body>
</html>

Страничный шаблон захватывает своё содержимое в content и подключает базу:

{% capture content %}
  <h1>Каталог услуг</h1>
  {% for s in catalog.data.services %}
    <li>{{ s.title }} — {{ s.price }} ₽</li>
  {% endfor %}
{% endcapture %}
{% include "base" %}

Платформа рисует страничный шаблон, потом подставляет то, что он захватил, в базу на место {{ content }}. Узел «Рендер страницы» при этом указывает только на страничный шаблон (katalog.liquid) — базу он подключает сам шаблон.

Полезно знать:

{% include %} видит всё, что определено в шаблоне страницы: данные флоу (results.ключ, form.*, params.*) и присвоенные переменные. Поэтому SEO-поля страницы можно вычислять в страничном шаблоне, а выводить в <head> внутри base.liquid.
Так же собираются партиалы — переиспользуемые куски разметки: заведите partials/card.liquid и подключайте {% include "partials/card" %}. Пути — внутри шаблонного корня, без ...
Тег {% render %} — включение с чистым скоупом: он не видит переменные страницы, всё нужное передавайте ему явно. Для обвязки и партиалов используйте {% include %}.

Правило простое: каркас меняем в одном файле base.liquid — обновляются все страницы; содержимое каждой страницы живёт в своём шаблоне.

Статика

Файлы статики (папка «Статика») отдаются браузеру без обработки. Типовые жители: favicon.ico, robots.txt, шрифты. Их можно загружать и заменять, черновиков у них нет.

Частые вопросы

Вопрос	Ответ
Сохранил шаблон, а сайт старый	Правка в черновике — нужна публикация (пилюля «черновик» у файла подскажет).
Где взять имя шаблона для узла «Рендер страницы»	Это путь файла из папки «Динамика», например `katalog.liquid`.
Сломал шаблон, сайт не публикуется	Публикация отклонит битый шаблон и покажет, что не так; исправьте и опубликуйте снова.

Следующая статья: Библиотека запросов →