Запуск локального сервера и начальное состояние проекта
Для запуска локального сервера перейдите в папку проекта и выполните команду php artisan serve. После этого откройте в браузере необходимый URL-адрес. Изначально на сайте существует только главная страница. Необходимо удалить её шаблон и создать собственные страницы, которые в дальнейшем будут оформлены стилями.
Удаление стандартного шаблона и настройка маршрутов
Удалите файл welcome.blade.php из папки resources/views. Перед созданием HTML-файлов необходимо настроить маршруты. Откройте файл routes/web.php. Удалите имеющиеся комментарии. В этом файле настройте маршруты:
Route::get('/', function () {
return view('home');
});
Route::get('/about', function () {
return view('about');
});
Route::get('/contact', function () {
return view('contact');
});
Обратите внимание, что расширение .blade.php здесь не указывается. После удаления шаблона welcome.blade.php при загрузке страницы возникнет ошибка, так как шаблон не будет найден.
Создание HTML-шаблонов и базовой структуры
Создайте в папке resources/views файлы: home.blade.php, about.blade.php и contact.blade.php. В них создайте простую структуру:
home.blade.php:
<h1>Главная страница</h1>
about.blade.php:
<h1>О нас</h1>
contact.blade.php:
<h1>Страница контактов</h1>
После обновления страницы эти шаблоны будут отображаться. Создайте базовую HTML-структуру, используя, например, Emmet в текстовом редакторе (ввод ! и Ctrl+Enter). Дублирование этого кода для каждой страницы неудобно, поэтому далее будет использовано наследование шаблонов.
Наследование шаблонов с помощью Blade
Создайте папку layout в папке resources/views. Внутри создайте файл app.blade.php. Скопируйте в него базовую HTML-разметку, удалив содержимое тега <body>. Добавьте директиву @yield(‘content’):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
@yield('content')
</body>
</html>
В файлах home.blade.php, about.blade.php и contact.blade.php добавьте директивы @extends(‘layout.app’) и @section(‘content’):
@extends('layout.app')
@section('content')
<h1>Главная страница</h1>
@endsection
Аналогично для других файлов, заменяя содержимое <h1>. Для установки заголовка страницы используйте @section(‘title’).
Включение компонентов: боковая панель, шапка, подвал и блок презентации
Создайте файлы aside.blade.php, header.blade.php, footer.blade.php и presentation.blade.php в папке resources/views/partials. Подключите эти файлы в app.blade.php с помощью директивы @include. В home.blade.php отобразите блок презентации (presentation.blade.php) условно, используя директиву @if(Request::is(‘/’)).
Стиль и подключение Bootstrap
Laravel использует Sass в качестве препроцессора. Для преобразования Sass в CSS используйте npm run dev. В файле resources/sass/app.scss напишите стили. Подключите скомпилированный CSS-файл в app.blade.php. Для автоматического обновления стилей используйте npm run watch. Подключите Bootstrap через CDN, добавив ссылку на CSS-файл Bootstrap в <head> основного шаблона.
В этом уроке мы создали базовый шаблон сайта с тремя страницами, используя наследование шаблонов, Sass для стилей и Bootstrap для готовых стилей. В следующих уроках мы продолжим работу над сайтом.