Обращение к читателям моего блога
Доброго вам времени суток, уважаемые читатели. Я с удивлением увидел, что мои статьи по Laravel попали в twitter @LaravelRUS, хотя в них пока нет ничего серьезного, и которые могут быть полезны разве что для абсолютных новичков. Буквально за несколько часов посещение моего блога подскочило в несколько раз и даже начали комментировать люди.
Мне очень приятно! Это очень хороший способ мотивации, когда тебя читают и обсуждают. Я постараюсь почаще писать статьи и обязательно в комментариях отвечу на все вопросы.
Увы, на работе весна – горящая пора, и выхватывать время на свои поиски и свою писанину трудно, так что прошу быть снисходительными.
По поводу Laravel 5. По моему скромному мнению новичка, его слишком накачивают возможностями и абстракциями чтобы он начал играть на поле Symfony – middle и enterprise приложениях. И развиваться он начал так, как хотят парочка его создателей. 4 ветка гораздо проще, удобнее, на мой взгляд, и заточена на простенькие сайты и middle приложения. Я даже в мыслях пока не замахиваюсь на middle и enterprise, так что 4 мне вполне хватает.
Когда я почувствую, что мне чего-то не хватает в 4, я перейду на 5 или что выйдет тогда. Я никого не агитирую, это просто моё мнение. Поэтому не надо наездов и хамства.
Интермедия перед работой
Увы, когда я выбирал шаблон, я не заглянул в исходный код. Сейчас, во время работы оказалось, что в коде есть ошибки, а сам шаблон не оптимален для натягивания на Laravel. Фактически, из 4 страниц получается 4 шаблона. Нет, можно все через условия свести к 1 шаблону, но на мой взгляд это просто глупо.
Ну уж если я создал себе лишнюю головную боль, то не буду менять своего решения и продолжу с выбранным шаблоном. Увы, многое будет не оптимально по коду.
Сейчас в учебных целях я буду что называется «на живую нитку» собирать визитку чтобы только работало. А вот когда будет уже сделан каркас и перейду к базе, я постараюсь поправить косяки и оптимизировать шаблоны.
Вспомогательные файлы шаблона
Для начала в папке public создадим папку thema, где будем хранить вспомогательные файлы темы – css, js, fonts и так далее. Я просто разархивировал папку с шаблоном туда и перенес заодно и все файлы верстки. Именно от этого я и начну отталкиваться.
Корень сайта, видимый из интернета, как раз является папка public. Папка thema нужна для того, чтобы все файлы не валялись в корне, а лежали по своим местам.
Потом можно будет создать папку admin, куда можно положить вспомогательные файлы темы админки, папку images для хранения картинок статей, files для хранения файлов… Ну и так далее, думаю идея понятна.
Где находятся и как хранить шаблоны
В 4 ветке Laravel все шаблоны хранятся в папке app/views. В 5 версии «в целях разделения кода самого фреймворка и кода приложения» была создана отдельная парка resource, а в ней уже папка views. Если честно, то я не понял, как это «разделяет код».
Если хранить их все в корне этой папки, то даже для визитки из 4 страниц там быстро образуется каша и понять, что и за что отвечает, без бутылки будет сложно.
Во всех скринкастах, видео уроках и просто статьях советуют делать из папок делать структуру и раскидывать файлы шаблонов по ним.
Есть несколько вариантов, лично мне понравилась идея разбивки структуры по будущим контроллерам – частям сайта, код которых объединён одной идей. Теорию MVC я описывать не буду, про неё достаточно написано в сети. Плюс к этому добавится шаблоны функциональной части сайта: шаблоны ошибок, поиска и форм обратной связи.
Поэтому я создаю такую структуру:
Теперь поясню данную структуру:
- layouts – это папка, где храниться все основные макеты (главные шаблоны) страниц: основной шаблон, rss, sitemap и так далее
- partials – это части шаблонов, в которые выносятся куски кода html, чтобы легче было ориентироваться в шаблоне.
- errors – это папка с шаблонами ошибок.
- emails – это папка с шаблонами писем, уведомлений и так далее.
Это основные папки, которые структурируют шаблоны в любом проекте. Думаю, что идея понятна.
Далее идут папки контроллеров:
- home – это папка с шаблонами HomeController. Пока такой контроллер я не создаю, но в последствии это будет контроллер, отвечающий за главную страницу и вспомогательные страницы rss, sitemap;
- pages – это папка с шаблонами для статических страниц контроллера PagesController, которого у нас тоже пока нет;
- blog – это папка с шаблонами (её нет на картинки) для блога контроллера BlogController, которого у нас так же пока нет.
Как видите, теперь легко понять, откуда начинать смотреть: идете в папку нужного контроллере, смотрите нужный шаблон, а уж в нем прописаны макет, который он расширяет и куски кода Html, которые подключаются. В шаблоне тоже есть куски кода, хранящиеся в partials, расширяющие основной макет.
Эту структуру можно улучшить для сложного приложения. Тогда в каждой папке с шаблонами контроллеров создается папка partials, в папку с макетами layouts переносится основная папка partials. Таким образом куски кода будут лежать по папкам и в них будет легче ориентироваться.
По зрелому размышлению, я в проекте шаблоны именно так и организую.
Partials или чанки
О кусках в папке(папках) partials нужно сказать особо. Теоретически можно обойтись без них, но тогда будут загромождаться основные макеты, их сложно будет читать и править.
В терминах моей любимой CMS MODX это чанки – вспомогательные куски кода.
Поэтому я применяю такую же идеологию и в разработке сайта на Laravel:
- Шаблон или чанк должен иметь 40-50 строк, остальное в чанки;
- Если код повторяется в разных шаблонах – вынеси в чанк;
- Слишком большой код делающий одно и тоже – в чанк;
- Шаблон для вывода данных в цикле или еще где – можно вынести в чанк.
Таким образом, структура шаблона получается не более 2-3 уровневая, шаблоны легко читать и править при необходимости.
О производительности можно не беспокоиться особо – Blade компилирует шаблоны и потому отдача страницы почти не зависит от количества вызовов этих чанков.
Мастер-шаблон или макет
Когда начинаешь натягивать верстку на любой движок, смотришь структуру верстки всех страниц и уже от неё пляшешь дальше. В случае шаблона nova прекрасно видно, что есть блок заголовка страницы, есть блок шапки страницы, есть блок основного контента и есть блок подвала.
Для начала в папке layouts создаем файл front.blade.php
как основной шаблон для фронтенда сайта. В него копируем из файла index.html все и вставляем.
Теперь подключим и посмотрим что получилось.
Для этого в папке home создаем пустой файл index.blade.php и туда вставляем директиву @extennds(), указывающую шаблонизатору Blade, что он расширяет главный макет.
Но для отображения на главной странице теперь нужно поправить файл с роутами:
Route::get('/', function() { return View::make('home.index'); });
View::make()
– это вызов для отображения вьюху (шаблон) в папке home файл index.blade.php
. Как я уже писал, .blade.php
опускается. Вместо точки можно использовать символ «/», но так никто не делает, так что не будем привыкать к плохому.
Теперь перейдем на главную страницу сайта и увидим какую-то кашу. Это каша из-за того, что стили подключены по неправильному пути, скрипты подключены не правильно, картинки. Правильно отобразятся только текст.
Хелперы Laravel для скрпитов, стилей и картинок
Можно сейчас поменять пути для стилей, картинок и скриптов и все заработает. Но это не совсем правильно, поскольку пути могут меняться, правиться код. Правильное использовать для генерации вспомогательных элементов хелперы Laravel.
Давайте заменим сначала разметку подключения стилей на хелперы:
{{ HTML::style('thema/css/bootstrap.css') }} {{ HTML::style('thema/css/font-awesome.min.css') }} {{ HTML::style('thema/css/style.css') }} {{ HTML::style('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900') }}
В заголовке страницы стили Google не советует писать, поскольку они замедляют отображения показ контента, так что перенесем их перед концом страницы:
<!-- JavaScripts--> {{ HTML::script('thema/js/jquery.min.js') }} <script type="text/javascript"> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top},1200); }); }); </script> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
Теперь проверим – все заработало, но картинки пока отображаются не правильно.
Поскольку для главной страницы в шапке используется логотип, поправим ему путь так:
<div class="logo"> <a href="index.html">{{ HTML::image('/thema/images/logo.png', 'Nova' )}} </a></div> <div class="menu"> <a class="toggleMenu" href="#">{{ HTML::image('/thema/images/nav_icon.png' )}} </a>
Остальные картинки могут меняться пользователями, так что с ними пока работать не будем, только поправим пути.
Итак, у нас есть готовый макет, есть шаблон и мы его научились вызывать для отображения. Пришло время заняться самым интересным: разбиением шаблона на части.
Бьем основной макет на части
Начну я не сверху, а снизу макета.
Итак, сходу можно увидеть, что внизу подключаются скрипты. Все скрипты вынесем в отдельный чанк layouts/partials/scripts.blade.php
:
А вместо этого кода поставим вызов этого чанка
@include(‘layouts.partials.scripts’)
Это как раз привило №3 – если кода много. Точно так же вынесем в отдельный чанк и подключение стилей.
Далее идет подвал страницы, его мы так же вынесем в отдельный чанк footer.blade.php
. В чанке нет никакой динамики, есть только статический код, так что это как раз правило №2.
Вернемся к шапке страницы. Вынесем код из шапки с меню и логотипом в отдельный чанк header.blade.php (правило № 2).
Я заодно правлю косяки в html (не закрытый тег div class=”main”), что-то на русский перевожу, так что творчески подхожу к шаблону.
Теперь для превращения статической страницы верстки в динамическую, мне необходимо расставить области, в которые я буду выводить что-то.
Первая такая область – это область баннера. На других страницах там похожая на баннер верстка, где находится расширенный заголовок страницы. Поэтому сам баннер вырезаю и сохраняю в файле home/partials/banner.blade.php
. Пусть будет пока статическим файлом.
А на его место добавлю конструкцию
@yield(‘header’)
Эта конструкция создает необязательную секцию header, в которую можно что-то вывести в конкретном шаблоне. При необходимости, можно задать какой-нибудь контент по умолчанию, можно вывести сначала контент предыдущего шаблона и так далее. В документации описаны все варианты и даны куча примеров. Для сайта-визитки этих наворотов пока не надо.
Дальше в шаблоне идет текст с картинками, который встречается только на главной странице. Но похожая разметка есть и на странице «Услуги», поэтому все это удалим и ставим блок с именем «dashboard».
В итоге у нас страница упростилась и превратилась в саму простую разметку, где легко разобраться:
<!DOCTYPE HTML> <html> <head> <title>Nova</title> @include('layouts.partials.head') </head> <body> @include('layouts.partials.header') @yield('header') @yield('content') @include('layouts.partials.footer') @include('layouts.partials.scripts') </body> </html>
Шаблон вывода главной страницы
Но если сейчас мы глянем на главную страницу, то, кроме шапки и подвала, все наполнение исчезло. Сейчас мы это поправим.
Откроем файл index.blade.php
и добавим вывод в него вывод данных в первый блок
@section('header') @include('home.partials.banner') @stop
Вот и чанк для баннера пригодился! Фактически мы сказали Blade, что на месте @yiled(‘header’)
подставь директиву @include('home.partials.banner')
при выводе страницы. А дальше уже идет подстановка чанка home/partials/banner.blade.php
и вывод страницы.
Теперь выведем в блок dashboard остальной текст по аналогии. Кусок слишком большой, так что я не буду его приводить.
Проверяем – все работает как нужно. Могут только картинки не показываться, если вы не поправили пути как я.
Заключение
Фактически, по шажочкам мы подошли уже к практическому сайту. Так что можно простейшую визитку на клепать – задать роуты, привязать шаблон и готово. Только такой сайт не слишком будет отличаться от чистого html. Но для верстки такой велосипед можно использовать, я так делал и получил массу удовольствия.
Однако при всей кажущейся простоте этого решения, у частей шаблонов (чанков или подшаблонов) есть масса нюансов и подводных камней. Особенно это касается передачи данных в шаблоны и с чем будут проблемы в дальнейшем. Сейчас я эту тему не затронул совсем, подождите до работы с контроллерами.
Поэтому я рекомендую тому, кто не просто читает статьи, а старается вникнуть и научиться, сделать 3-5 сайта самостоятельно на разных шаблонах, с разным наполнением хотя бы простых визиток. Так вы лучше закрепите материал.
Статья опять получилась очень длинная, поэтому пока я прекращаю, а в следующей статье мы будем возиться с шаблонами и макетами других внутренних страниц.
Код на github выложу в понедельник, когда остальные шаблоны привяжу.
Спасибо за статьи.
Вот только твиттер @LaravelRUS это малая часть трафика, группа в ВК более популярна. Советую сосредоточится на анонсе статей там и я с радостью сделаю репост.
Спасибо за совет! Но я пока сосредоточусь на статьях, чтобы было чего репостить ?