Yii 布局

布局代表多个视图的公共部分，即例如页眉和页脚。默认情况下，布局应该存储在 views / layouts 文件夹中。

让我们看看基本应用程序模板的主要布局 -

<?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 name = "viewport" content = "width = device-width, initial-scale = 1">
      <?= Html::csrfMetaTags() ?>
      <title><?= Html::encode($this->title) ?></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']] :
                        [
                           'label' => 'Logout (' . Yii::$app->user->identity->username.')',
                           'url' => ['/site/logout'],
                           'linkOptions' => ['data-method' => 'post']
                        ],
                  ],
               ]);

               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">© My Company <?= date('Y') ?></p>
               <p class = "pull-right"><?= Yii::powered() ?></p>
            </div>
         </footer>

      <?php $this->endBody() ?>
   </body>
</html>
<?php $this->endPage() ?>

该布局生成所有页面通用的HTML页面。在 $内容 变量的内容视图渲染的结果。以下方法会触发有关渲染过程的事件，以便在其他位置注册的脚本和标记可以正确注入 -

head（） - 应该在 head 部分中调用。生成一个占位符，它将替换为针对头部位置的已注册HTML。
beginBody（） - 应该在正文部分的开头调用。触发 EVENT_BEGIN_BODY 事件。生成一个占位符，它将被替换为以身体开始位置为目标的已注册HTML。
endBody（） - 应该在正文部分的末尾调用。触发 EVENT_END_BODY 事件。生成一个占位符，该占位符将被替换为以身体结束位置为目标的已注册HTML。
beginPage（） - 应该在布局开始时调用。触发 EVENT_BEGIN_PAGE 事件。
endPage（） - 应在布局结束时调用。触发 EVENT_END_PAGE 事件。

创建一个布局

第1步 - 在views / layouts目录中，使用以下代码创建一个名为 newlayout.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 name = "viewport" content = "width = device-width, initial-scale = 1">
      <? = Html::csrfMetaTags() ?>
      <title><? = Html::encode($this->title) ?></title>
      <?php $this->head() ?>
   </head>

   <body>
      <?php $this->beginBody() ?>
         <div class = "wrap">
            <div class = "container">
               <? = $content ?>
            </div>
         </div>

         <footer class = "footer">
            <div class = "container">
               <p class = "pull-left">© My Company <?= date('Y') ?></p>
               <p class = "pull-right"><? = Yii::powered() ?></p>
            </div>
         </footer>
      <?php $this->endBody() ?>
   </body>

</html>
<?php $this->endPage() ?>

我们删除了顶部的菜单栏。

第2步 - 要将此布局应用于 SiteController ，请将 $ layout 属性添加到 SiteController 类。

<?php
   namespace app\controllers;
   use Yii;
   use yii\filters\AccessControl;
   use yii\web\Controller;
   use yii\filters\VerbFilter;
   use app\models\LoginForm;
   use app\models\ContactForm;
   class SiteController extends Controller {
      public $layout = “newlayout”;
      /* other methods */
   }
?>

第3步 - 现在，如果您在SiteController的任何视图中转到Web浏览器，您将看到布局已更改。

更改关于布局

第4步 - 要注册各种元标签，您可以在内容视图中调用 yii \ web \ View :: registerMetaTag（） 。

第5步 - 修改 SiteController 的 '关于' 视图。

<? php
   /* @var $this yii\web\View */
   use yii\helpers\Html;
   $this->title = 'About';
   $this->params['breadcrumbs'][] = $this->title;
   $this->registerMetaTag(['name' => 'keywords', 'content' => 'yii, developing, views,
      meta, tags']);
   $this->registerMetaTag(['name' => 'description', 'content' => 'This is the description
      of this page!'], 'description');
?>
<div class="site-about">
   <h1><?= Html::encode($this->title) ?></h1>
   <p>
      This is the About page. You may modify the following file to customize its content:
   </p>
   <code><?= __FILE__ ?></code>
</div>

我们刚刚注册了两个元标签 - 关键字和说明 。

第6步 - 现在转到 http：// localhost：8080 / index.php？r = site / about， 您会在页面的头部找到meta标签，如以下屏幕截图所示。

元标记

视图触发几个事件 -

EVENT_BEGIN_BODY - 通过调用 yii \ web \ View :: beginBody（） 在布局中触发。
EVENT_END_BODY - 通过调用 yii \ web \ View :: endBody（） 在布局中触发。
EVENT_BEGIN_PAGE - 通过调用 yii \ web \ View :: beginPage（） 在布局中触发。
EVENT_END_PAGE - 通过调用 yii \ web \ View :: endPage（） 在布局中触发。
EVENT_BEFORE_RENDER - 在渲染文件开始时在控制器中触发。
EVENT_AFTER_RENDER - 在渲染文件后触发。

您可能会响应这些事件将内容注入视图。

步骤7 -要显示在当前的日期和时间 actionAbout 所述的 SiteController ，修改这种方式。

public function actionAbout() {
   \Yii::$app->view->on(View::EVENT_BEGIN_BODY, function () {
      echo date('m.d.Y H:i:s');
   });
   return $this->render('about');
}

第8步 - 在Web浏览器的地址栏中键入 http：// localhost：8080 / index.php？r = site / about ，您将看到以下内容。

触发事件示例

重点

为了使视图更易于管理，你应该 -

将复杂的视图分成几个较小的视图。
使用常见HTML部分（页眉，页脚，菜单等）的布局。
使用小部件。

意见应该 -

包含HTML和简单的PHP代码来格式化和渲染数据。
不处理请求。
不要修改模型属性。
不执行数据库查询。

下一章：Yii Assets

资产是可以在网页中引用的文件（css，js，视频，音频或图像等）。Yii管理资产包中的资产。资产包的目的是在代码库中包含一组相关的 JS 或 CSS 文件，并能够在一次PHP调用中注册它们。资产捆绑也可以依赖 ...

上一章：Yii 视图

下一章：Yii Assets