Zend Framework-レイアウト

レイアウトは、複数のビューの共通部分を表します。たとえば、ページのヘッダーとフッター。デフォルトでは、レイアウトは view/layout フォルダーに保存する必要があります。

レイアウト構成は、module.config.phpの view_manager セクションで定義されます。

スケルトンアプリケーションのデフォルト設定は次のとおりです-

'view_manager' => array(
   'display_not_found_reason' => true,
   'display_exceptions' => true,
   'doctype' => 'HTML5',
   'not_found_template' => 'error/404',
   'exception_template' => 'error/index',
   'template_map' => array(
      'layout/layout' => __DIR__ . '/../view/layout/layout.phtml',
      'application/index/index' => __DIR__ . '/../view/application/index/index.phtml',
      'error/404' => __DIR__ . '/../view/error/404.phtml',
      'error/index' => __DIR__ . '/../view/error/index.phtml',
   ),
   'template_path_stack' => array(
   __DIR__ . '/../view',
),

ここでは、 template_map を使用してレイアウトを指定します。レイアウトが見つからない場合は、エラーが返されます。スケルトンアプリケーションのメインレイアウトを見てみましょう。

Layout.phtml

<?= $this->doctype() ?>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <?= $this->headTitle('ZF Skeleton Application')->setSeparator(' - ')>
         setAutoEscape(false) ?>
      <?= $this->headMeta()
         ->appendName('viewport', 'width = device-width, initial-scale = 1.0')
         ->appendHttpEquiv('X-UA-Compatible', 'IE = edge')
      ?>

      <!-- Le styles -->
      <?= $this->headLink(['rel' => 'shortcut icon', 'type' =>
         'image/vnd.microsoft.icon',
         'href' => $this->basePath() . '/img/favicon.ico'])
         ->prependStylesheet($this->basePath('css/style.css'))
         ->prependStylesheet($this->basePath('css/bootstraptheme.min.css'))
         ->prependStylesheet($this->basePath('css/bootstrap.min.css'))
      ?>

      <!-- Scripts -->
      <?= $this->headScript()
         ->prependFile($this->basePath('js/bootstrap.min.js'))
         ->prependFile($this->basePath('js/jquery-3.1.0.min.js'))
      ?>
   </head>

   <body>
      <nav class = "navbar navbar-inverse navbar-fixed-top" role = "navigation">
         <div class = "container">
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" data-
                  toggle = "collapse" data-target = ".navbar-collapse">
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>

               <a class = "navbar-brand" href = "<?= $this->url('home') ?>">
                  <img src = "<?= $this->basePath('img/zf-logo-mark.svg') ?>
                     " height = "28" alt = "Zend Framework <?= \Application\Module::
                     VERSION ?>"/> Skeleton Application
               </a>
            </div>

            <div class = "collapse navbar-collapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "<?=
                     $this->url('home') ?>">Home</a></li>
               </ul>
            </div>
         </div>
      </nav>

      <div class = "container">
         <?= $this->content ?>
         <hr>
         <footer>
            <p>© 2005 - <?= date('Y') ?> by Zend Technologies Ltd.
               All rights reserved.</p>
         </footer>
      </div>
      <?= $this->inlineScript() ?>
   </body>
</html>

レイアウトを分析するとき、ほとんどの場合、前の章で説明したビューヘルパーを使用します。よく見ると、レイアウトは特別な変数 $ this→ content を使用しています。この変数は、実際に要求されたページのビュースクリプト（テンプレート）に置き換えられるため、重要です。

新しいレイアウトを作成する

チュートリアルモジュールの新しいレイアウトを作成しましょう。

まず、「public/css」ディレクトリの下に* tutorial.cssファイル*を作成しましょう。

 body {
   background-color: lightblue;
}
h1 {
   color: white;
   text-align: center;
}

/myapp/module/Tutorial/view/layout/に新しいレイアウトファイル newlayout.phtml を作成し、既存のレイアウトからコンテンツをコピーします。次に、レイアウトヘッドセクション内の HeadLink ヘルパークラスを使用して、 tutorial.css スタイルシートを追加します。

<?php echo $this->headLink()->appendStylesheet('/css/tutorial.css');?>

*URL* ヘルパーを使用して、ナビゲーションセクションに新しい *about* リンクを追加します。

<li><a href = "<?= $this->url('tutorial', ['action' => 'about']) ?>">About</a></li>

このレイアウトページは、チュートリアルモジュールアプリケーションに共通です。チュートリアルモジュール構成ファイルの view_manager セクションを更新します。

'view_manager' => array(
   'template_map' => array(
      'layout/layout' => __DIR__ . '/../view/layout/newlayout.phtml'),
   'template_path_stack' => array('tutorial' => __DIR__ . '/../view',),
)

*TutorialController* に *aboutAction* 関数を追加します。

 public function aboutAction() {
}

myapp/module/Tutorial/view/tutorial/tutorial/に次の内容の about.phtml を追加します。

<h2>About page</h2>

これで、最終的にアプリケーションを実行する準備ができました-* http：//localhost：8080/tutorial/about。*

ページについて

Zend-framework-layout

Zend Framework-レイアウト

Layout.phtml

新しいレイアウトを作成する