Шаблоны

Как определяется общий макет страницы и как создавать новые шаблоны.

Введение

Шаблон определяет общий макет Страницы — это значение поля template страницы, и оно соответствует папке в website/src/pages/Template/.

Происхождение механизма типов компонентов

Механизм типов компонентов (динамические папки + info.json) был вдохновлён этим механизмом шаблонов, который уже работал таким образом раньше. Структура практически такая же, только применяется к целым страницам, а не к блокам содержимого.

Как это работает

website/src/pages/Template/
├── index.jsx        # роутер: выбирает шаблон для рендеринга
└── Default/
    ├── index.jsx      # сам шаблон
    ├── index.less
    └── info.json       # имя/описание шаблона по языкам

Каждая папка внутри Template/ — это шаблон, доступный для выбора в поле Шаблон формы редактирования страницы. Имя папки (Default) — это значение, сохраняемое в поле template страницы.

info.json шаблона по умолчанию, например:

{
  "en": { "label": "Default", "description": "For pages that use generic styling." },
  "pt": { "label": "Padrão", "description": "Para páginas que utilizam o estilo genérico." }
}

Раскрывающийся список использует переведённую метку из info.json

Как и в типах компонентов, раскрывающийся список шаблонов в форме страницы показывает переведённую метку (label) из info.json — для этого запрос к сервису передаёт текущий язык (Cluar.currentLanguage().locale). При этом в поле template страницы по-прежнему сохраняется имя папки (Default).

Также есть серверный сервис (server/services/page/template/list/), который сканирует папки в реальном времени и возвращает список доступных шаблонов — по той же причине: не нужно перезапускать сервер, чтобы добавить новый шаблон, достаточно создать папку.

Одно отличие от типов компонентов: у шаблонов нет config.json — сегодня нет возможностей, настраиваемых для каждого шаблона, только index.jsx и info.json.

Шаблон по умолчанию

Шаблон по умолчанию (Default) — это тот, который использует большинство страниц: он оборачивает содержимое страницы шапкой и подвалом сайта (BaseHeader / BaseFooter) вокруг Builder — компонента, который фактически обходит и рендерит компоненты страницы (Баннер, Контент, Список, Слайдер, Функциональность) в порядке, заданном полем «Порядок» каждого из них.

Страница с нераспознанным шаблоном

Если поле template страницы не соответствует ни одной существующей папке (например, имя написано неправильно или папка удалена), CLUAR не завершается ошибкой и не использует шаблон по умолчанию как запасной — вместо этого он рендерит только «голый» Builder, без шапки и подвала сайта. Это поведение отличается от типов компонентов, где нераспознанный тип переключается на тип по умолчанию.

Это решает роутер (Template/index.jsx):

import Default from "./Default";
import Builder from "../../common/Builder";

const Template = ({ page }) => {
  if (page.template === "Default") {
    return <Default page={page} />;
  } else {
    return <Builder page={page} />;
  }
};

export default Template;

Обратите внимание: здесь есть только одна явная проверка ("Default") — любое другое значение template, распознанное или нет, сразу попадает в ветку else и рендерит только Builder.

Как создать новый шаблон

1. Создайте новую папку внутри website/src/pages/Template/ (например, Template/Лендинг/).
2. Внутри неё создайте index.jsx (React-макет шаблона), index.less (стили) и info.json (метка (label)/описание по языкам — именно эта метка отображается в раскрывающемся списке).
3. В index.jsx роутера (Template/index.jsx) импортируйте новый шаблон и добавьте его в условие, которое выбирает шаблон по полю page.template.
4. Новый шаблон автоматически появится в раскрывающемся списке шаблонов формы редактирования страницы; сохраняемым значением будет имя папки.

Следующий шаг

Изучите Разрешения.