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

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

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

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

Теперь давайте подключим в комплект необходимые стили и скрипты. Сделать это очень просто. В прошлой статье мы скопировали все папки с ресурсами в публичную папку web. Теперь необходимо открыть класс assets/AppAsset и в свойства $css и $js прописать каждый из подключаемых к верстке стилей и скриптов. В результате мы должны получить следующий код:

class AppAsset extends AssetBundle
{
 public $basePath = '@webroot';
 public $baseUrl = '@web';
 public $css = [
 'css/style.css',
 'http://fonts.googleapis.com/css?family=Oswald:100,400,300,700',
 'http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,300italic',
 ];
 public $js = [
 'js/move-top.js',
 'js/easing.js',
 'js/main.js',
 ];
 public $depends = [
 'yii\web\YiiAsset',
 'yii\bootstrap\BootstrapAsset',
 ];
}

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

Обратите внимание, в коде верстки нигде не было файла main.js, зато был инлайновый код JS, т.е. куски JS кода прямо в коде HTML. Соответственно, я создал в папке web/js файл main.js и вынес весь такой код в него, а сам файл, соответственно, мы подключили:

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

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

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

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

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

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

Как видим, все отлично! Главная страница ничем не отличается от выбранного нами шаблона. Также обязательно проверьте консоль браузера на предмет ошибок, их там быть не должно. Если они есть, значит, вы где-то ошиблись и ошибки необходимо исправить.

На этом мы завершим данную статью. В дальнейшем вам останется лишь выделить часть контента и заменить ее выводом переменной $content:

<?=$content?>

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

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