Макеты и наборы ресурсов

Макет — общая рамка всех страниц: шапка, меню, подвал. Его описывают один раз, а шаблон страницы подставляется внутрь. Стили и скрипты подключают к макету через набор ресурсов — класс со списком файлов.

Где лежит макет

Макет по умолчанию — файл views/layouts/main.php, он уже есть в проекте. В упрощённом виде он выглядит так:

<?php
// views/layouts/main.php
 
use app\assets\AppAsset;
use yii\helpers\Html;
 
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="utf-8">
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
 
<header><?= Html::a('Мой блог', ['post/index']) ?></header>
 
<main><?= $content ?></main>
 
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

В переменной $content лежит готовая разметка шаблона страницы. Вызовы head(), beginBody() и endBody() отмечают места, куда Yii вставит теги стилей и скриптов. Если их убрать, оформление пропадёт.

Другой макет

Чтобы у части страниц была другая рамка, создайте второй файл, например views/layouts/admin.php, и укажите его в контроллере:

// controllers/AdminController.php
class AdminController extends Controller
{
    public $layout = 'admin';
}

Все действия этого контроллера будут выводиться в макете admin. Для одного действия макет меняют строкой $this->layout = 'admin'; перед render(). Метод renderPartial('index') выводит шаблон совсем без макета.

Набор ресурсов

Набор ресурсов (asset bundle) — класс, перечисляющий файлы CSS и JavaScript. В проекте он уже есть — assets/AppAsset.php:

// assets/AppAsset.php
namespace app\assets;
 
use yii\web\AssetBundle;
 
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap5\BootstrapAsset',
    ];
}

Пути указаны относительно папки web: строка css/site.css означает файл web/css/site.css. Свойство depends перечисляет наборы, которые нужно подключить раньше, — здесь это скрипты Yii и стили Bootstrap.

Свой файл стилей или скриптов

Создайте файл web/js/app.js и добавьте его в набор:

public $js = [
    'js/app.js',
];

Строка AppAsset::register($this) в макете подключает набор, и на каждой странице появится тег script с адресом /js/app.js.

Скрипт для одной страницы

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

<?php
// views/post/index.php
 
$this->registerJs('console.log("Страница статей открыта");');

Yii вставит этот код перед закрывающим тегом body.

Частая ошибка

Теги link и script, вписанные в макет вручную, обходят систему ресурсов: порядок подключения ломается, и скрипт может загрузиться раньше библиотеки, от которой зависит. Добавляйте файлы в AppAsset, а зависимости указывайте в depends.