Как натянуть верстку на Yii2. Часть 1

Дата публикации: 2017-09-04

Как натянуть верстку на Yii2

От автора: приветствую вас, друзья. Мы продолжаем цикл статей, посвященных знакомству с фреймворком Yii2. В этой небольшой статье мы с вами посмотрим, как натянуть верстку на Yii2.

Итак, для реализации задуманного нам, конечно же, потребуется верстка, т.е. готовый шаблон, который мы и будем переносить под управление Yii2. Для примера я использую бесплатный шаблон Personal Blog, который можно скачать с сайта w3layouts.com.

Как натянуть верстку на Yii2

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

Как натянуть верстку на Yii2

Нас интересует файл index.html – это верстка главной страницы. Скопируем весь HTML из него и создадим в папке views/layouts новый шаблон, к примеру blog.php, в который вставим скопированный код верстки.

Как натянуть верстку на Yii2

Поскольку мы создали новый шаблон и хотим использовать именно его, нам нужно это указать в файле конфигурации. Откроем файл config/web.php и добавим в него свойство layout, значением которого и укажем название нового шаблона, который мы хотим использовать.

Как натянуть верстку на Yii2

Если сейчас обновить страницу нашего сайта, то мы получим примерно следующую картину:

Как натянуть верстку на Yii2

Все верно, к шаблону ведь идут картинки, стили и скрипты, которые мы пока не используем. Давайте возьмем соответствующие папки (css, images и js) и скопируем их со всем содержимым в публичную папку фреймворка – в папку web.

После этого нужно подключить данные ресурсы к шаблону. Для этого используем класс AppAsset. Также в шаблоне необходимо вызвать ряд методов, а именно: перед объявлением DOCTYPE.

<?php $this->beginPage() ?>

1	<?php $this->beginPage() ?>

А это будет содержимое тега head и объявление языка страницы:

<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>

<html lang="<?= Yii::$app->language ?>">

<head>

<?= Html::csrfMetaTags() ?>

<title><?= Html::encode($this->title) ?></title>

<?php $this->head() ?>

</head>

После открывающего тега body добавим следующий код:

<?php $this->beginBody() ?>

1	<?php $this->beginBody() ?>

Следующий код мы добавим перед закрывающим тегом body:

<?php $this->endBody() ?>

1	<?php $this->endBody() ?>

Ну и эту строку допишем в самый конец шаблона, после закрывающего тега html:

<?php $this->endPage() ?>

1	<?php $this->endPage() ?>

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

<?php
use yii\helpers\Html;
use app\assets\AppAsset;

AppAsset::register($this);

<?php

use yii\helpers\Html;

use app\assets\AppAsset;

AppAsset::register($this);

Как натянуть верстку на Yii2

Если теперь обновить страницу, то мы увидим уже куда лучшую картину:

Как натянуть верстку на Yii2

Однако, все еще чего-то не хватает. Не хватает стилей и скриптов данного шаблона. Подключив комплект ресурсов, мы тем самым подключили Bootstrap и наш шаблон, который использует Bootstrap, стал отображаться благодаря этому уже более-менее нормально. Теперь дело за подключением индивидуальных стилей и скриптов. Попробуйте подключить их самостоятельно в используемом комплекте ресурсов или загляните во вторую часть статьи и сделайте это вместе с автором. Ну а на сегодня пока все.

Больше о фреймворке вы можете узнать из наших бесплатных или платных уроков. Также создание простейшего блога на Yii2 можно посмотреть в этом цикле уроков.

Метки: yii2