Главная > Блог > Web-разработка > Yii2 и Laravel >

Yii2. Подключение css и js файлов

01.03.2019

Теги: CSS • JavaScript • PHP • Web-разработка • Yii2 • Теория • Фреймворк

Ресурс в Yii — это файл, который нужен для формирования страницы сайта. Это может быть CSS-файл, JavaScript-файл, файл шрифта, файл изображения или видео и так далее. Ресурсы располагаются в доступных по протололу HTTP директориях и обслуживаются непосредственно сервером Apache или Nginx.

Yii управляет ресурсами как единицей комплекта ресурсов. Комплект ресурсов — это набор ресурсов (файлов), расположенных в определенной директории. При регистрирации комплекта ресурсов в представлении, для страницы сайта включается набор CSS и JavaScript файлов.

Комплект ресурсов определяется как PHP-класс, наследующиий yii\web\AssetBundle. Имя комплекта соответствует полному имени класса без ведущего обратного слеша. При задании комплекта необходимо указать, где ресурсы находятся, какие CSS и JavaScript файлы входят в комплект, и как этот комплект зависит от других комплектов.

Создание комплекта ресурсов

После установки Yii2 уже существует класс AppAsset, который задает комплект ресурсов:

<?php
/*
 * Файл assets/AppAsset.php
 */
namespace app\assets;
use yii\web\AssetBundle;
use yii\web\View;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'js/site.js'
    ];
    public $jsOptions = [
        // скрипты будут подключены в <head>
        'position' => View::POS_HEAD
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

В коде выше класс AppAsset указывает, что файлы ресурса находятся в директории @webroot, которой соответствует URL @web; комплект содержит единственный css-файл css/site.css и единственный js-файл js/site.js; комплект зависит от двух других комплектов: yii\web\YiiAsset и yii\bootstrap\BootstrapAsset.

sourcePath: Задаёт корневую директорию, содержащую файлы ресурса этого комплекта. Это свойство должно быть установлено, если корневая директория не доступна по HTTP. В противном случае достаточно установить basePath и baseUrl. Здесь могут быть использованы псевдонимы путей.

basePath: Задаёт директорию, доступную по HTTP, содержащую файлы ресурсов этого комплекта. Если задано свойство sourcePath, менеджер ресурсов (yii\web\AssetManager) скопирует файлы этого комплекта в директорию, доступную по HTTP. И перезапишет свойство basePath. Это свойство надо задавать только в том случае, если файлы ресурсов уже расположены в директории, доступной по HTTP. Здесь могут быть использованы псевдонимы путей.

baseUrl: задаёт URL, соответствующий директории basePath. Также как и для basePath, если задано свойство sourcePath, менеджер ресурсов перезапишет свойство baseUrl. Здесь могут быть использованы псевдонимы путей.

js: Массив, перечисляющий JavaScript файлы, содержащиеся в данном комплекте.

css: массив, перечисляющий CSS файлы, содержащиеся в данном комплекте.

depends: массив, перечисляющий имена комплектов ресурсов, от которых зависит данный комплект.

jsOptions: Задаёт параметры, которые будут переданы методу yii\web\View::registerJsFile(), когда он вызывается для регистрации каждого JavaScript файла комплекта.

cssOptions: Задаёт параметры, которые будут переданы методу yii\web\View::registerCssFile(), когда он вызывается для регистрации каждого CSS файла комплекта.

publishOptions: Задаёт параметры, которые будут переданы методу yii\web\AssetManager::publish(), когда метод будет вызван для публикации файлов ресурсов. Публикация — это копирование файлов ресурсов в директорию, доступную по HTTP. Это свойство используется только в том случае, если задано свойство sourcePath.

Ресурсы, в зависимости от их расположения, могут быть классифицированы как:

Исходные ресурсы: файлы ресурсов, расположенные вместе с исходным кодом PHP, которые не могут быть непосредственно доступны через Web. Для того, чтобы использовать исходные ресурсы на странице, они должны быть скопированы в Web директорию. Этот процесс называется публикацией ресурсов.
Опубликованные ресурсы: файлы ресурсов, расположенные в Web-директории и, таким образом, могут быть напрямую доступны через Web.
Внешние ресурсы: файлы ресурсов, расположенные на другом Web сервере.

Если задано свойство sourcePath — любые перечисленные ресурсы будут рассматриваться как исходные. Если свойство не задано, все ресурсы рассматриваются как опубликованные. В этом случае следует задать basePath и baseUrl, чтобы дать знать Yii, где эти ресурсы располагаются.

Рекомендуется размещать ресурсы, принадлежащие приложению, в Web директорию, для того, чтобы избежать не нужного процесса публикации. Вот почему в примере выше заданы basePath и baseUrl вместо sourcePath.

Использование комплекта ресурсов

Для использования комплекта ресурсов, нужно его зарегистрировать. Зарегистриуем комплект ресурсов в layout-шаблоне, вызвав метод yii\web\AssetBundle::register():

use app\assets\AppAsset;
AppAsset::register($this);

При вызове этого метода:

для каждого css-файла будет вызван метод yii\web\View::registerCssFile()
для каждого js-файла будет вызван метод yii\web\View::registerJsFile()

Если какой-то js-файл нужно подключить только для одной страницы контроллера, можно его зарегистрировать прямо в view-шаблоне:

<?php
namespace app\controllers;
use yii\web\Controller;

class SiteController extends Controller {
    public function actionIndex() {
        return $this->render('index');
    }
    public function actionHello() {
        return $this->render('hello');
    }
}

<?php
/* @var $this yii\web\View */
use yii\helpers\Html;

$this->registerJsFile('@web/js/hello.js');
$this->title = 'Hello';
?>
<div class="site-hello">
    <h1><?= Html::encode($this->title) ?></h1>
    <p>Это страница «Hello». Вы можете изменять эту страницу, редактируя файл шаблона:</p>
    <code><?= __FILE__ ?></code>
</div>

При подключении скрипта можно указать дополнительные параметры:

$this->registerJsFile(
    '@web/js/hello.js',
    [
        'depends' => 'yii\web\YiiAsset', // зависимости для скрипта
        'position' => $this::POS_HEAD    // подключать в <head>
    ]
);

Пример подключения шрифта Font Awesome

<?php
// создаем комплект ресурсов
namespace app\assets;
use yii\web\AssetBundle;

class FontAwesomeAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'icon/css/font-awesome.min.css',
    ];
}

// регистрируем два комплекта ресурсов в layout-шаблоне
use app\assets\AppAsset;
use app\assets\FontAwesomeAsset;

AppAsset::register($this);
FontAwesomeAsset::register($this);

Пример добавления небольшого JS-кода

// регистрируем небольшой js-код в view-шаблоне
$script = <<< JS
$('[type="submit"]').on('click', function(e) {
    $.ajax({
        url: '/path/to/action',
        data: {id: '123', other: 'other data'},
        success: function(response) {
            // process data
        },
        error: function() {
            alert('Произошла ошибка при отправке данных!');
        }
    });
});
JS;
// значение $position может быть View::POS_READY (значение по умолчанию),
// или View::POS_LOAD, View::POS_HEAD, View::POS_BEGIN, View::POS_END
$position = $this::POS_READY;
$this->registerJs($script, $position);

Если $position равно View::POS_READY, js-код будет обернут в

<script>
jQuery(document).ready(function() {
    // код будет здесь
});
</script>

Если $position равно View::POS_LOAD, js-код будет обернут в

<script>
jQuery(window).load(function() {
    // код будет здесь
});
</script>

Дополнительно

Ресурсы. Полное руководство по Yii 2.0

Поиск: CSS • JavaScript • PHP • Web-разработка • Yii2 • Фреймворк • Framework • Ресурсы • Assets • AssetBundle • AssetManager • sourcePath • basePath • baseUrl