2. Создание новых страниц на Laravel

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 имели перевес.

Header и Footer

В папке 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 будет подключаться только на главной странице.

0 0 голос
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x