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

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

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

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

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

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

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

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее

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

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

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

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

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

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

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

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

<?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> 

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

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

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

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

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

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

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

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

AppAsset::register($this);

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

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

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

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

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

Фреймворк YII2. Быстрая разработка с современным PHP фреймворком

Узнай тонкости современной веб-разработки с помощью фреймворка YII2

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк YII2: теория и первая практика

Овладейте азами фреймворка Yii2 за 5 дней!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree