Теперь давайте отредактируем файл, добавим в него тег заголовка и привязку стилей
<head>
<title>Каталог картин</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
</head>
Обратите внимание, добавить это нужно после открывающего тега <html>
Этот код подключит CSS-фреймворк Bootstrap, что упростит создание стилей.
Вы можете использовать свой фреймворк или можете писать стили самостоятельно. Мы, для сокращения кода примера, используем именно Bootstrap.
Теперь изменим код, добавив контейнер и поле для поиска внутри тега <body>. Итоговый код должен выглядеть так:
import {jsx} from '@app/html-jsx'
app.html('/', async(ctx,req) => {
return <html>
<head>
<title>Каталог картин</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"/>
</head>
<body>
<div class="container p-3 col-md-6 col-12">
<h1 class={"fs-1 fs-header fs-bold"}>Каталог картин</h1>
</div>
</body>
</html>
})
Сохраните и посмотрите, что получилось в правом окне
