В ЧАСТИ 1 мы понимаем, как настроить MVC-фреймворк laravel. Чтобы понять это, я рекомендую посмотреть предыдущий блог. Я собираюсь создать HomeController. Для этого я собираюсь использовать команду make:controller artisan для создания контроллера. Откройте терминал, перейдите в папку проекта и выполните следующую команду:

php artisan make:controller HomeController

artisan — это утилита командной строки Laravel для выполнения различных задач, таких как создание модели, контроллеров и т. д. Вы можете получить полный список команд, запустив php artisan. Вы также можете написать свою собственную команду для какой-то конкретной цели.

В app/Http/Controllers будет создан новый файл с именем HomeControllers.php, который выглядит так:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
  
}

В этом классе я собираюсь создать метод public с именем index. Нет необходимости называться index, потому что он вызывает корневую страницу. Вы можете называть это как mySweetMethod, кто вас останавливает?

Итак, мой метод index будет выглядеть так:

public function index() {
    return view('index');
    }

Этот метод возвращает результат метода view, который сам принимает здесь параметр. В моем случае это index. Что это такое на самом деле? Если вы помните, я создал файл с именем index.blade.php. Эта функция берет имя блейд-файла и после обработки возвращает HTML-разметку страницы в браузер. Подробнее обсудим в следующих постах. Если работает хорошо, теперь при доступе к http://golmarket.dev вы увидите разметку индексной страницы нашей темы. Это некрасиво, так как пути CSS и изображения неверны, но, по крайней мере, это работает. Если вы проверите источник Домашней страницы демонстрации, вы увидите несколько вызовов файлов CSS и JS. Это нормально, но это не то, что я хочу, и это не рекомендуется в современной веб-разработке. Причина в том, что множественные запросы замедляют работу вашей страницы. Нашей целью должно быть как можно меньше запросов к странице, чтобы она загружалась быстрее. Если он загружается быстрее, то, скорее всего, он будет лучше ранжироваться в Google, поскольку скорость является одним из основных факторов для появления на верхних страницах Google.

Сейчас я расскажу, как оптимизировать вашу страницу, сократив ненужные запросы в один, и как создать мастер-макет, который можно было бы использовать для других внутренних страниц. Прямо сейчас, если вы посетите главную страницу на своем локальном компьютере, она будет выглядеть так:

Выглядит нормально, если сравнивать с первоисточником. Если вы проверите его источник, вы обнаружите несколько тегов <script> и несколько запросов .css и .js. Мы собираемся устранить это, воспользовавшись другим замечательным инструментом Laravel под названием Laravel Mix.

Что такое Laravel Mix?

С веб-сайта Laravel:

Laravel Mix предоставляет гибкий API для определения шагов сборки Webpack для вашего приложения Laravel с использованием нескольких распространенных препроцессоров CSS и JavaScript.

По сути, Laravel Mix построен поверх Webpack, который проходит через различные модули зависимостей (CSS или JS) и создает статические ресурсы, которые вы можете использовать на своих веб-страницах. Вам не нужно беспокоиться о том, какой файл JS используется в другом JS, поскольку webpack позаботится о графе зависимостей. Взгляните на это, чтобы изучить понятия. Если вы пришли из мира Gulp, то он не должен быть для вас таким чуждым.

В любом случае, теперь перейдите к app/resources/saas/app.scss, здесь вы найдете некоторые начальные записи, такие как:

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
@import "variables";
// Bootstrap
@import "bootstrap";

Я удалил все ненужные встроенные теги css link и вызвал @import, чтобы включить необходимые библиотеки и другие файлы. Финал app.scss будет выглядеть так:

// Variables
@import "variables";
// Bootstrap
@import "bootstrap";
@import "../../../node_modules/font-awesome/scss/font-awesome";
@import "../../../node_modules/flexslider/flexslider";
@import "style";
@import "site";

Теперь давайте откроем файл webpack.min.js, который выглядит так:

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Поскольку Laravel Mix основан на ES6, здесь используется присвоение деструктуризации для назначения переменной mix. Прочтите об этом в другом месте, так как это выходит за рамки этой статьи. Следующие несколько строк творят всю магию; mix.js('resources/assets/js/app.js', 'public/js') говорит прочитать содержимое app.js, вытащить его и положить в public/jsпосле того, как перепутаете. То же самое для mix.sass. Поскольку он использует совместимость с SAAS, вы можете использовать синтаксис на основе CSS или SAAS для определения своих макетов. В любом случае Webpack скомпилировал их в один CSS. Теперь в master.blade.php все, что мне нужно сделать, это два вызова ресурсов JS и CSS соответственно:

<script src="{!! asset('js/app.js') !!}"></script>
и
<link rel="stylesheet" href="{!! asset('css/app.css') !!}">

Круто, нет? Больше не нужно заботиться о нескольких URL-адресах на вашей странице. В будущем, если вы захотите добавить новую библиотеку или файл css, все, что вам нужно сделать, это добавить в соответствующий файл точка входа.

Точно так же окончательное app/resources/js/app.js выглядит так:

require('../../../node_modules/jquery/dist/jquery.min')
require('../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap.min')
require('./move-top')
require('./easing')
require('../../../node_modules/flexslider/jquery.flexslider-min')
require('./minicart.min')
require('./site')

Теперь, чтобы смешать их и поместить в папку public/, вам нужно запустить команду. Перейдите в корневую папку вашего проекта и выполните следующую команду:

npm run dev

Он прочитает материал и поместит окончательный вывод в соответствующие файлы /public/. В нашем случае это app.css и app.js

Если вы заметили содержимое, это просто слияние файла, что хорошо, если вы находитесь в режиме разработки, но для окончательного развертывания это все еще не так хорошо. Микс приходит с командой:

npm run production

которые минимизируют все ресурсы для оптимальной производительности.

Хорошо, пока все хорошо, теперь пришло время создать наш мастер-макет, очистив его среднюю часть. При проверке я понял, что мне нужно сделать содержимое w3l_banner_nav_right динамическим, так как окружение будет повторяться на других страницах. Срезал разметку и перешел на index.blade.php. В master.blade.php, <div> с классом w3l_banner_nav_right теперь выглядят так:

<div class="w3l_banner_nav_right">
        @yield('content')
</div>

@yield — это директива Laravel Blades, механизма шаблонов, предлагаемого Laravel. Если вы пришли из других фреймворков MVC, то это не должно быть для вас чуждым. Шаблоны упрощают управление, когда они представляют собой повторяющийся HTML-код, такой как заголовок, нижний колонтитул, боковые панели и т. д. Механизм шаблонов также помогает отображать вывод, который готовится на уровне контроллера. Теперь, прежде чем я объясню @yeild дальше, давайте откроем файл index.blade.php, который после внесения изменений будет выглядеть так:

@extends('layout.master')
@section('content')
    <section class="slider">
        <div class="flexslider">
            <ul class="slides">
                <li>
                    <div class="w3l_banner_nav_right_banner">
                        <h3>Make your <span>food</span> with Spicy.</h3>
                        <div class="more">
                            <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="w3l_banner_nav_right_banner1">
                        <h3>Make your <span>food</span> with Spicy.</h3>
                        <div class="more">
                            <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="w3l_banner_nav_right_banner2">
                        <h3>upto <i>50%</i> off.</h3>
                        <div class="more">
                            <a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now">Shop now</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
@stop

Вверху есть директива @extends('layout.master'), которая говорит, что эта внутренняя страница, index.blade.php, на самом деле расширяет свою родительскую страницу, master.blade.php, которая находится в каталоге layout. Точечная нотация используется для ссылки на саму папку. Нет необходимости помещать в папку layout, все дело в управлении кодом, и я предпочитаю делать вещи модульными и управляемыми, насколько это возможно.
Хорошо, следующая строка — @section('content'), эта директива сообщает, что есть раздел с именем content, все, что вы найдете в нем, должно быть помещено в contentplaceholder master.blade.php, который затем отображается и отображается директивой @yield('content'). Теперь вы узнали, что делает @yield. @@stop предлагает остановиться здесь и не включать дальше. Проверьте документы, чтобы узнать больше об этом.

Хорошо! это все на данный момент. Этот пост должен помочь вам обрести уверенность в переносе и разметке HTML в системе Laravel, а также получить представление об основах Laravel Mix. В следующем посте я коснусь некоторых основ функций базы данных, предлагаемых Laravel. Быть в курсе!

Репо этого проекта поддерживается здесь.