Разработка шаблонов
Шаблоны отвечают за внешний вид клиентского сайта, личного кабинета и отдельных модулей. Они должны оставаться читаемыми, безопасными и устойчивыми к отсутствующим данным.
Рабочий процесс
- Найдите страницу или блок, который нужно изменить.
- Скопируйте шаблон в рабочую тему или расширение.
- Внесите минимальное изменение.
- Проверьте светлую и темную тему.
- Проверьте мобильную ширину.
- Проверьте пустые, успешные и ошибочные состояния.
Структура шаблона
Хороший шаблон обычно содержит:
- понятный заголовок блока;
- проверку доступности данных;
- основной вывод;
- пустое состояние;
- вывод ошибки или предупреждения;
- подключение частичных шаблонов для повторяемых элементов.
Безопасный вывод
По умолчанию выводите пользовательские данные с экранированием. Сырой HTML используйте только для доверенного контента, который уже прошел очистку на стороне системы.
Безопасный вывод
{{ user.name }}
{{ notice.content }}
{{ trustedNoticeHtml|raw }}
Не используйте raw для email, никнеймов, сообщений пользователя, URL из формы и других данных, которые может изменить пользователь.
Безопасный вывод
- {{ user.email|raw }}
- {{ comment.text|raw }}
+ {{ user.email }}
+ {{ comment.text }}
Повторяемые блоки
Для карточек, строк таблиц и одинаковых форм используйте include или macro. Это уменьшает расхождение между страницами и упрощает поддержку.
Повторяемые блоки
{% include '@site/partials/server-card.html.twig' with {
server: server
} %}
Состояния интерфейса
Для каждого блока проверьте:
- данные загружены;
- список пустой;
- пользователь не авторизован;
- операция запрещена;
- сервер недоступен;
- API вернул ошибку.