Сайт-визитка на Laravel. Практическая работа с шаблонами

Обращение к читателям моего блога

Доброго вам времени суток, уважаемые читатели. Я с удивлением увидел, что мои статьи по 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 я описывать не буду, про неё достаточно написано в сети. Плюс к этому добавится шаблоны функциональной части сайта: шаблоны ошибок, поиска и форм обратной связи.

Поэтому я создаю такую структуру:

Теперь поясню данную структуру:

1. layouts – это папка, где храниться все основные макеты (главные шаблоны) страниц: основной шаблон, rss, sitemap и так далее
2. partials – это части шаблонов, в которые выносятся куски кода html, чтобы легче было ориентироваться в шаблоне.
3. errors – это папка с шаблонами ошибок.
4. emails – это папка с шаблонами писем, уведомлений и так далее.

Это основные папки, которые структурируют шаблоны в любом проекте. Думаю, что идея понятна.

Далее идут папки контроллеров:

1. home – это папка с шаблонами HomeController. Пока такой контроллер я не создаю, но в последствии это будет контроллер, отвечающий за главную страницу и вспомогательные страницы rss, sitemap;
2. pages – это папка с шаблонами для статических страниц контроллера PagesController, которого у нас тоже пока нет;
3. blog  – это папка с шаблонами (её нет на картинки) для блога контроллера BlogController, которого у нас так же пока нет.

Как видите, теперь легко понять, откуда начинать смотреть: идете в папку нужного контроллере, смотрите нужный шаблон, а уж в нем прописаны макет, который он расширяет  и куски кода Html, которые подключаются. В шаблоне тоже есть куски кода, хранящиеся в partials, расширяющие основной макет.

Эту структуру можно улучшить для сложного приложения. Тогда в каждой папке с шаблонами контроллеров создается папка partials, в папку с макетами layouts переносится основная папка partials. Таким образом куски кода будут лежать по папкам и в них будет легче ориентироваться.

По зрелому размышлению, я в проекте шаблоны именно так и организую.

Partials или чанки

О кусках в папке(папках) partials нужно сказать особо. Теоретически можно обойтись без них, но тогда будут загромождаться основные макеты, их сложно будет читать и править.

В терминах моей любимой CMS MODX это чанки – вспомогательные куски кода.

Поэтому я применяю такую же идеологию и в разработке сайта на Laravel:

1. Шаблон или чанк должен иметь 40-50 строк, остальное в чанки;
2. Если код повторяется в разных шаблонах – вынеси в чанк;
3. Слишком большой код делающий одно и тоже – в чанк;
4. Шаблон для вывода данных в цикле или еще где – можно вынести в чанк.

Таким образом, структура шаблона получается не более 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 выложу в понедельник, когда остальные шаблоны привяжу.