https://itproger.com/course/laravel/2
Удаляем старые пути и прописываем новые в /route/web.php
Route::get('/', function () {
return view('home');
});
Route::get('/about', function () {
return view('about');
});
Route::get('/contact', function () {
return view('contact');
});
Из resources/views удаляем шаблон welcome.blade.php и создаем три файла: home.blade.php, about.blade.php, contact.blade.php .
С содержимым:
—home.blade.php
<h1>Главная страница</h1>
—about.blade.php
<h1>О сайте</h1>
—contact.blade.php
<h1>Контакты</h1>
Теперь, если зайти на laratest.loc, мы увидим home.blade.php. На laratest.loc/about — about.blade.php, laratest.loc/contact — contact.blade.php
Добавим обязательные html-теги в наши шаблоны.
Если у Вас установлен emmet (в PHPStorm он по-умолчанию), то пишем i и нажимаем Tab. И вписываем в title, body нужные нам содержимое. Вот так:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/app.css">
<title>Главная</title>
</head>
<body>
<h1>Главная страница</h1>
</body>
</html>
В остальных файлах по аналогии.
Макеты
В resources/views создаем папку layouts, в ней файл app.blade.php, с содержимым:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/app.css">
<title>@yield('title-block')</title>
</head>
<body>
@yield('content')
</body>
</html>
Это наш макет для всех страниц, а вместо @yield(‘content’) и @yield(‘title-block’) будет подставляться содержимое, в зависимости от шаблона.
Файл home.blade.php очищаем и пишем код:
@extends('layouts.app')
@section('title-block')Главная@endsection
@section('content')
<h1>Главная страница</h1>
@endsection
@extends(‘layouts.app’) — значит, что мы подключаемся к файлу layouts/app.blade.php
@section(‘title-block’)Главная@endsection — заполняем секцию title-block
С секцией ‘content’ — аналогично.
Теперь, если перезагрузить главную страницу, то ничего не измениться. У нас также будет главная страница со всеми тегами и необходимым содержимым.
В остальных файлах-шаблонах делаем по аналогии.
@include (подключение)
Добавим боковую панель к нашему сайту.
В папке resources/views создаем папку inc и в ней файл aside.blade.php с содержимым:
@section('aside')
<div class="aside">
<h2>Боковая панель</h2>
<p>Это боковая панель</p>
</div>
В app.blade.php добавляем @include(‘inc.aside’):
<body>
@yield('content')
@include('inc.aside')
</body>
Теперь у нас есть боковая панель, которая пока отображается не с боку.
Вывод текста в подключаемой секции в зависимости от шаблона
В файле aside.blade.php допишем директиву @show . На месте этой директивы будет отображаться текст из наших шаблонов:
<p>Это боковая панель</p>
@show
</div>
В шаблоне home.blade.php обратимся к нашей секции:
@section('aside')
@parent
<p>Дополнительный текст</p>
@endsection
Директива @parent будет заменена содержимым макета при отрисовке шаблона. И вставится наш дополнительный текст. Там, где будет директива @show .
Стилизация. webpack.mix.js
Этот файл находится в корне Ларавел.
В этом файле находятся миксы. Миксы — это те файлы, которые позволяют нам преобразовывать одни типы данных в другие. Например, Sass в css .
Сейчас у нас там такая запись:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Это значит, что файл resources/js/app.js преобразуется в сжатый js-файл public/js/app.js, а файл resources/sass/app.scss в сжатый css файл public/css/app.css .
Установка NodeJS
Для всех преобразований внутри проекта нужно скачать и установить NodeJs . nodejs.org — скачиваем и устанавливаем LTS-версию, как обычное Windows приложение.
В терминале переходим в корень нашего проекта и выполняем команду:
npm i
Если команда не нашлась, то нужно перезагрузить ПК.
Таким образом будут устанавливаться зависимости из файла package.json .
В корне должна появится папка node_modules и в ней все наши зависимости.
Теперь можно записать наши стили в формате Sass (или в любом другом формате, но нужно добавить mix в webpack.mix.js) .
Пишем стили в файл resources/sass/app.scss :
body {
background: red
}
В терминале, в корневой папке проекта пишем:
npm run dev
Этой командой скомпилируются наши файлы scss и js. Появились файлы public/css/app.css и public/js/app.js .
В файле app.blade.php подключим наши стили:
<link rel="stylesheet" href="/css/app.css">
Теперь можно смотреть стилизацию на сайте.
Но при изменении файла app.scss, новых изменений мы не увидим, нужно будет заново выполнять команду npm run dev . Чтобы изменения отслеживались и применялись автоматически используем команду:
npm run watch
Теперь все изменения js и css из resources автоматически отслеживаются и компилируются.
Bootstrap
В app.blade.php подключаем css файл bootstrap отсюда . Перед /css/app.css , чтобы стили из /css/app.css имели перевес.
В папке inc создаем файл header.blade.php :
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Компания</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="/">Главная</a>
<a class="p-2 text-dark" href="/contact">Контакты</a>
<a class="p-2 text-dark" href="/about">О сайте</a>
</nav>
<a class="btn btn-outline-primary" href="#">Войти</a>
</div>
И подключаем его в app.blade.php:
<body>
@include('inc.header')
В папке inc создаем файл footer.blade.php :
<footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<small class="d-block mb-3 text-muted">© 2017-2020</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
И подключаем по аналогии.
Прописываем стили в app.blade.php:
@include('inc.header')
<div class="container mt-5">
<div class="row">
<div class="col-8">@yield('content')</div>
<div class="col-4">@include('inc.aside')</div>
</div>
</div>
@include('inc.footer')
Подключение макета на определённых страницах
В папке inc создаем файл hero.blade.php :
<div class="container">
<div class="row">
<h1>Приветствую Вас на моём сайте!</h1>
</div>
</div>
В файле app.blade.php :
@if (Request::is('/'))
@include('inc.hero')
@endif
Это значит, что файл inc/hero.blade.php будет подключаться только на главной странице.