Подключение CSS, JS в отдельном шаблоне Yii2

Подключение CSS, JS в отдельном шаблоне Yii2

В целях оптимизации и уменьшения веса Web страниц иногда появляется необходимость подключать отдельные скрипты JS или CSS для полноценной визуализации страницы с прописанным сценарием. Для фреймворк Yii2 имеется метод регистрации для отдельного шаблона, к примеру, вывод кода стилей и JS скриптов или подключение файлов.

Регистрацию можно проводить через через файл контроллера:

Yii::$app->view->registerCss();

или через файл просмотра:

$this->registerCss();

Рекомендую использовать именно запись регистрации в файле просмотра, т.к. нагружать контроллер дополнительными строками не хорошо.

Давайте рассмотрим несколько примеров:

registerCss

В файле просмотра, к примеру, view необходимо добавить кусок стиля заголовка:

$this->registerCss('h1 {color: red;}');

В результате просмотра источника кода на странице в секции <head> появится дополнительная секция <style> и будет выведена строка:

<style>h1 {color: red;}</style>

registerCssFile

Данным методом подключаются файлы. Этот метод хорош тем, что файлы CSS или JS могут храниться на вашем или на любом другом CDN хостинге.

Для примера подключим набор шрифтов от Google Fonts:

$this->registerCssFile('//fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

В данном случае в <head> появится строка:

<link href="//fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&amp;display=swap" rel="stylesheet">

registerJs

Иногда появляется необходимость прописать JS непосредственно в шаблоне страницы, вплоть до вывода строки в нужном месте. Для этого необходимо выполнить регистрацию скрипта следующим образом:

$this->registerJs(<<<JS
    $('#button').on('click', function() { alert( 'Ok!' ); });
JS
);

При нажатии на соответствующую кнопку всплывет ваше сообщение.

registerJsFile

Соответственно подключить файл JS скрипта можно так:

$this->registerJsFile('//cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js');

В нижней части исходного кода страницы появится новая строка:

<script src="//cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

В заключение

В данной статье были превидены элементарные примеры использования регистрации кода и файлов на отдельных страницах шаблона. В методе register также существует множество опций и передачи динамических данных для обработки сценариев.


Комментарии (0)

    Нет комментариев.
    Чтобы оставить свой комментарий, Вам необходимо авторизоваться. У Вас нет аккаунта? Пожалуйста, пройдите процедуру регистрации.