Отображение первой страницы#

Формирование HTML выполняется на сервере; небольшие взаимодействия могут оставаться на обычном JavaScript.

Создание шаблона#

Создайте resources/views/welcome.twig:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>{{ title }}</title></head>
<body>
  <h1>{{ title }}</h1>
  <p>Hello, {{ name }}.</p>
</body>
</html>

Передача данных из маршрута#

use Elang\View\View;
$router->get('/welcome', fn (View $view) =>
    $view->render('welcome', ['title' => 'My first Elang page', 'name' => 'Ada'])
);

Проверка экранирования#

Измените имя на строку с HTML-тегом. Twig должен отобразить тег как текст. Избегайте |raw для недоверенного содержимого.

Добавление файлов интерфейса#

Поместите CSS и JavaScript в public/assets/ и подключите их обычными тегами link и script. CSP по умолчанию поддерживает внешние файлы того же источника, а встроенные скрипты и стили блокируются.

Ожидаемый результат и частые ошибки#

После сохранения шаблона и маршрута откройте /welcome. Страница должна показать «My first Elang page» («Моя первая страница Elang») и «Hello, Ada.» («Привет, Ada»). Просмотрите исходный код страницы в браузере, чтобы увидеть HTML, сформированный сервером.

Шаблон с именем welcome.twig отображается с помощью render('welcome', ...), без повторного указания расширения. При включённых строгих переменных отсутствие title или name вызывает ошибку шаблона, а не незаметно скрывает проблему. Читайте закрытый журнал, если страница возвращает 500.

Попробуйте макет#

Создайте resources/views/base.twig:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>{{ title }}</title></head>
<body><main>{% block content %}{% endblock %}</main></body>
</html>

Затем замените welcome.twig следующим содержимым:

{% extends 'base.twig' %}
{% block content %}
<h1>{{ title }}</h1>
<p>Hello, {{ name }}.</p>
{% endblock %}

Код контроллера остаётся прежним. Вы перенесли повторяющуюся структуру страницы в один макет, сохранив автоматическое экранирование данных.