3.2 项目实现迭代二：创建并使用布局渲染首页视图-Yii2框架从入门到精通(上)

当前位置:　首页>> 技术小册>> Yii2框架从入门到精通(上)

3.2 项目实现迭代二：创建并使用布局渲染首页视图

在Yii2框架的项目开发过程中，随着功能的逐步增加，合理组织和管理视图文件变得尤为重要。布局（Layouts）作为Yii2 MVC架构中视图（View）层的一个重要组成部分，用于定义应用的公共部分，如头部、导航栏、侧边栏和页脚等，使得开发者能够轻松地复用这些元素，而无需在每个视图中重复编写相同的HTML代码。本章节将详细介绍如何在Yii2项目中创建并使用布局来渲染首页视图，以此提升项目的可维护性和可扩展性。

3.2.1 理解布局（Layouts）

在Yii2中，布局是一种特殊的视图文件，它通常包含一个或多个占位符（placeholders），用于嵌入其他视图内容。这些占位符通过$content变量和可能的其他自定义变量来实现。当控制器渲染一个视图时，Yii2会先渲染该视图文件，然后将渲染结果赋值给布局中的$content变量，最后渲染整个布局文件，从而生成最终的HTML页面。

3.2.2 创建布局文件

在Yii2项目中，布局文件通常位于views/layouts目录下。如果此目录不存在，你需要手动创建它。接下来，我们将创建一个名为main.php的布局文件，该文件将作为我们项目的主要布局模板。

<!-- views/layouts/main.php -->
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?> | My Yii2 Application</title>
    <?php $this->head() ?>
</head>
<body>
    <?php $this->beginBody() ?>
    <div class="wrap">
        <?php
        NavBar::begin([
            'brandLabel' => 'My Company',
            'brandUrl' => Yii::$app->homeUrl,
            'options' => [
                'class' => 'navbar-inverse navbar-fixed-top',
            ],
        ]);
        echo Nav::widget([
            'options' => ['class' => 'navbar-nav navbar-right'],
            'items' => [
                ['label' => 'Home', 'url' => ['/site/index']],
                ['label' => 'About', 'url' => ['/site/about']],
                ['label' => 'Contact', 'url' => ['/site/contact']],
                Yii::$app->user->isGuest ? (
                    ['label' => 'Login', 'url' => ['/site/login']]
                ) : (
                    '<li>'
                    . Html::beginForm(['/site/logout'], 'post')
                    . Html::submitButton(
                        'Logout (' . Yii::$app->user->identity->username . ')',
                        ['class' => 'btn btn-link logout']
                    )
                    . Html::endForm()
                    . '</li>'
                ),
            ],
        ]);
        NavBar::end();
        ?>
        <div class="container">
            <?= Breadcrumbs::widget([
                'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
            ]) ?>
            <?= $content ?>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <p class="pull-left">&copy; My Company <?= date('Y') ?></p>
            <p class="pull-right"><?= Yii::powered() ?></p>
        </div>
    </footer>
    <?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

在上述布局文件中，我们使用了Yii2的Bootstrap扩展来构建导航栏和面包屑导航，同时包含了页面头部、主体内容和页脚的基本结构。$content变量用于在适当的位置嵌入视图内容。

3.2.3 配置控制器以使用布局

在Yii2中，你可以通过配置控制器或视图文件来指定使用的布局。通常，我们会在控制器的$layout属性中指定布局文件的名称（不包括.php扩展名）。但是，为了更灵活地控制布局的使用，Yii2允许你在视图文件中通过调用$this->layout来动态设置布局。

不过，在本例中，我们假设希望整个应用的视图都使用main.php布局，因此可以在应用的配置文件中统一设置。打开config/web.php文件，在components数组中添加或修改view组件的配置，指定默认布局：

'components' => [
    'view' => [
        'theme' => [
            'basePath' => '@app/views',
            'pathMap' => ['@app/views' => '@app/themes/basic/views'],
            'baseUrl' => '@web/themes/basic',
        ],
        'layout' => 'main', // 指定默认布局为main.php
    ],
    // 其他组件配置...
],

注意：上面的配置还包含了主题（Theme）的设置，这是一个可选的功能，用于支持多主题切换。如果你的项目不需要使用主题，可以省略这部分配置。

3.2.4 渲染首页视图

现在，我们已经有了布局文件，并配置了控制器（或全局）以使用它。接下来，我们需要创建一个首页视图文件，并确保它能够被正确渲染。

在views/site目录下创建一个名为index.php的文件，该文件将作为首页的视图内容。内容可以非常简单，例如：

<!-- views/site/index.php -->
<div class="site-index">
    <div class="jumbotron">
        <h1>Congratulations!</h1>
        <p class="lead">You have successfully created your Yii-powered application.</p>
        <p><a class="btn btn-lg btn-success" href="http://www.yiiframework.com">Get started with Yii</a></p>
    </div>
    <div class="body-content">
        <div class="row">
            <div class="col-lg-4">
                <h2>Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur.</p>
                <p><a class="btn btn-default" href="http://www.yiiframework.com/doc/">Yii Documentation &raquo;</a></p>
            </div>
            <!-- 更多列内容... -->
        </div>
    </div>
</div>

当访问首页时（通常是URL的根路径，如http://yourdomain.com/），Yii2会自动找到SiteController中的actionIndex方法（或对应的index动作），渲染views/site/index.php视图文件，并将渲染结果嵌入到views/layouts/main.php布局文件中的$content占位符位置，最终生成完整的HTML页面并发送给客户端。

3.2.5 小结

通过本章节的学习，我们掌握了在Yii2项目中创建和使用布局来渲染首页视图的基本流程。布局的使用不仅提高了代码的重用性，还使得页面的结构和样式更加统一和易于管理。随着项目的深入，你可能会创建多个布局文件以适应不同的页面需求，但基本的原理和步骤是相似的。希望本章节的内容能为你的Yii2项目开发之路提供有力的支持。