Yii-layouts

提供:Dev Guides
移動先:案内検索

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ページを生成します。 $ content 変数は、コンテンツビューのレンダリング結果です。 次のメソッドは、レンダリングプロセスに関するイベントをトリガーし、他の場所に登録されたスクリプトとタグを適切に挿入できるようにします-

  • * head()*-_head_セクション内で呼び出す必要があります。 プレースホルダーを生成します。プレースホルダーは、ヘッドの位置をターゲットにした登録済みHTMLに置き換えられます。
  • * beginBody()-_body_セクションの先頭で呼び出す必要があります。 *EVENT_BEGIN_BODY イベントをトリガーします。 本文の開始位置をターゲットとする登録済みHTMLに置き換えられるプレースホルダーを生成します。
  • * endBody()-_body_セクションの最後で呼び出す必要があります。 *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 の 'About' ビューを変更します。

<?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>
  • キーワードと説明*という2つのメタタグを登録しました。

ステップ6 *-次のスクリーンショットに示すように、 http://localhost:8080/index.php?r = site/about、*に移動すると、ページのヘッドセクションにメタタグがあります。

メタタグ

ビューはいくつかのイベントをトリガーします-

  • 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 *- *SiteControlleractionAbout に現在の日付と時刻を表示するには、この方法で変更します。

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コードが含まれています。
  • 要求を処理しません。
  • モデルのプロパティを変更しないでください。
  • データベースクエリを実行しません。