Яндекс.Практикум

Сайт-визитка на Laravel. Шаблоны внутренних страниц

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

Одноколоночный макет

Займемся теперь внутренними страницами. У страниц контактов и услуг похожая организация в одну колонку. Этим мы и воспользуемся.

Первый блок после заголовка с меню, которое мы вырезали, содержит заголовок страницы. Его можно вырезать и сделать блоком. Тогда в шаблоне каждой страницы этот блок можно будет просто задавать расширенный заголовок. В последствии можно в макете этот объявление блока заменить на переменную, куда выводить из контроллера расширенный заголовок. Я сразу поставил переменные в макет и сделал заглушки для передачи данных в шаблон.

Сайт-визитка на Laravel. Шаблоны внутренних страниц

Ниже основного контента есть еще один блок с текстом и картинками. Превратим его в блок dashboard, куда на странице услуг будет выводить контент, а в контактах ничего не будем.

В итоге получится следующий файл app/views/layouts/1-column.blade.php:

<!DOCTYPE HTML>
<html>
<head>
    <title>{{ $title }} — Nova</title>
    @include('layouts.partials.head')
</head>
<body>
 
@include('layouts.partials.header')
 
<div class="about">
  <div class="container">
    <section class="title-section">
      <h1 class="title-header">{{ $longtitle }}</h1>
    </section>
  </div>
</div>
 
@yield('content')
 
@yield('dashboard')
 
@include('layouts.partials.footer')
@include('layouts.partials.scripts')
</body>
</html>

Двухколоночный макет

Шаблон страницы about.html сделан в 2 колонки. Убрав контент и сделав два поля для основного контента и боковой панели, мы получаем снова простой макет app/views/layouts/2-columns.blade.php:

<!DOCTYPE HTML>
<html>
<head>
    <title>{{ $title }} — Nova</title>
    @include('layouts.partials.head')
</head>
<body>
@include('layouts.partials.header')
<div class="about">
  <div class="container">
    <section class="title-section">
      <h1 class="title-header">{{ $longtitle }}</h1>
    </section>
  </div>
</div>
 
<div class="container">
  <div class="row">
    <div class="col-md-8 about_left">
      @yield('content')
    </div>
    <div class="col-md-4">
      @yield('sidebar')
    </div>
  </div>
</div>
 
@yield('dashboard')
 
@include('layouts.partials.footer')
@include('layouts.partials.scripts')
</body>
</html>

В принципе, двухколоночный макет подойдет и для блога, в нем не будет использоваться dashboard.

Блог в роутах

По зрелому размышлению, страница blog.html не должна быть в роуте со статическими страницами, ведь она должна будет генерироваться динамически. Исправлю эту ошибку и создам еще одни роут, который будет обрабатывать главную страницу блога:

Route::get('index.html', 'HomeController@showWelcome');
 
Route::get('/{slug}.html', function ($slug){
	$title     = 'Заголовок страницы';
	$longtitle = 'Заголовок страницы';
    return View::make('pages.'.$slug, compact('longtitle', 'title'));
})->where('slug', '(about|contact|services)');
 
Route::get('/blog', function() {
	return 'Здесь будут новости компании';
});

Шаблоны внутренних страниц

Теперь создаю в папке app/views/pages два файла с шаблонами страниц about.blade.php  и services.blade.php. В них я переношу все данные из файлов шаблонов, которые я удалил из макета.

Поскольку получились очень длинные файлы, я не буду их приводить в статье, смотрите на github

Заключение

В принципе, с привязкой шаблонов закончены. Я специально пока оставил в стороне большой раздел блога, к нему подойдем после окончания работы со статическими страницами.

Есть и несколько «косяков»:

  1. Не работает форма обратной связи
  2. Сайт статический без всякой динамики
  3. Пока все заголовки одинаковы
  4. Нарушена концепция разработки MVC – все данные у нас в шаблоне

Поэтому в следующей статье перейдем к работе с данными – моделям.

Понравилась статья? Поделиться с друзьями:
IPCalc Blog
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: