In Yii2, Views and Layouts are responsible for rendering the user interface. Views display page-specific content, while Layouts define the overall structure of a page. Yii2 provides a flexible system that allows customization of views and layouts, including module-specific themes and layouts.
This guide covers:
Views are PHP files that primarily contain HTML mixed with PHP code to present data. They are stored in the views/ directory, typically within the respective controller's folder.
views/
├── site/
│ ├── index.php
│ ├── about.php
├── layouts/
│ ├── main.php
│ ├── admin.php
├── partials/
│ ├── _menu.php
│ ├── _sidebar.phprender()Renders a view with a layout.
public function actionIndex()
{
$message = "Welcome to Yii2";
return $this->render('index', ['message' => $message]);
}renderPartial()Renders a view without a layout.
return $this->renderPartial('index', ['message' => $message]);renderAjax()Optimized for AJAX responses, excludes unnecessary layouts.
return $this->renderAjax('index', ['message' => $message]);renderFile()Renders a view file from a custom path.
return $this->renderFile('@app/views/custom/example.php', ['data' => $data]);renderContent()Renders a raw string as a response.
return $this->renderContent("<h1>Hello, Yii2!</h1>");A layout is a wrapper that defines the common structure for multiple views.
By default, Yii2 uses views/layouts/main.php.
<?php $this->beginPage(); ?>
<!DOCTYPE html>
<html>
<head>
<title><?= $this->title ?></title>
</head>
<body>
<header>
<h1>My Yii2 Application</h1>
</header>
<main>
<?= $content ?>
</main>
<footer>
<p>© <?= date('Y') ?> My Company</p>
</footer>
</body>
</html>
<?php $this->endPage(); ?>class SiteController extends Controller
{
public $layout = 'admin';
}public function actionNoLayout()
{
$this->layout = false;
return $this->render('simple');
}Themes allow overriding view files dynamically. They are configured in the application component.
config/web.php'components' => [
'view' => [
'theme' => [
'pathMap' => [
'@app/views' => '@app/themes/custom/views'
],
],
],
],Now, Yii2 will load views from themes/custom/views instead of views/.
Each Yii2 module can have its own views, layouts, and themes.
modules/
├── admin/
│ ├── controllers/
│ │ ├── DefaultController.php
│ ├── views/
│ │ ├── default/
│ │ │ ├── index.php
│ ├── layouts/
│ │ ├── main.php
│ ├── themes/
│ │ ├── assets/
│ │ │ ├── views/In the module’s init() method, define a separate view path:
namespace app\modules\admin;
class Module extends \yiiase\Module
{
public function init()
{
parent::init();
\Yii::$app->view->theme = new \yii\base\Theme([
'pathMap' => ['@app/views' => __DIR__ . '/themes/assets/views'],
'baseUrl' => __DIR__ . '/themes/assets/views',
]);
}
}Now, all views inside the admin module will be loaded from modules/admin/themes/assets/views/ instead of the default views/ directory.
In Module.php, set the layout path:
public $layoutPath = '@app/modules/admin/layouts';
public $layout = 'main';Now, the module will use modules/admin/layouts/main.php instead of views/layouts/main.php.
Avoid writing complex logic in views. Instead, prepare data in the controller.
// Controller
$data = strtoupper($model->name);
return $this->render('index', ['data' => $data]);<?= $this->render('//partials/_menu'); ?>Define a default layout for a consistent page structure, and separate frontend/admin layouts.
| Feature | Method / Usage |
|---|---|
| Render a View | return $this->render('index', ['data' => $data]); |
| Render Without Layout | return $this->renderPartial('index'); |
| Render AJAX View | return $this->renderAjax('index'); |
| Render from File | return $this->renderFile('@app/views/custom.php'); |
| Render a Partial View | <?= $this->render('//partials/_menu'); ?> |
| Change Layout in Controller | $this->layout = 'admin'; |
| Disable Layout | $this->layout = false; |
| Define a Theme | @app/themes/custom/views/ |
| Separate Module Views | Override viewPath and layoutPath in Module.php |
Yii2’s Views and Layouts system provides a structured approach to rendering content. By properly utilizing layouts, themes, and module-specific views, developers can maintain clean, scalable, and reusable templates across different parts of an application.
Sign in to join the discussion and post comments.
Sign in