Zend Framework - Bố cục

Bố cục đại diện cho các phần chung của nhiều dạng xem, ví dụ: đầu trang và chân trang của trang. Theo mặc định, bố cục sẽ được lưu trữ trongview/layout thư mục.

Cấu hình Bố cục được xác định trong view_manager trong module.config.php.

Cấu hình mặc định của ứng dụng khung như sau:

'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', 
),

Đây, template_mapđược sử dụng để chỉ định bố cục. Nếu không tìm thấy bố cục thì nó sẽ trả về lỗi. Hãy để chúng tôi xem bố cục chính của ứng dụng khung xương.

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>

Khi bạn phân tích bố cục, nó chủ yếu sử dụng trình trợ giúp chế độ xem, mà chúng ta đã thảo luận trong chương trước. Khi chúng ta xem xét kỹ hơn, bố cục sử dụng một biến đặc biệt,$this->content. Biến này rất quan trọng vì nó sẽ được thay thế bằng tập lệnh xem (mẫu) của trang được yêu cầu thực tế.

Tạo bố cục mới

Hãy để chúng tôi tạo một bố cục mới cho mô-đun Hướng dẫn của chúng tôi.

Để bắt đầu, hãy để chúng tôi tạo tutorial.css file trong thư mục “public / css”.

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

Tạo một tệp bố cục mới newlayout.phtmltại / myapp / module / Tutorial / view / layout / và sao chép nội dung từ bố cục hiện có. Sau đó, thêmtutorial.css bảng định kiểu bằng cách sử dụng HeadLink lớp trợ giúp bên trong phần đầu bố cục.

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

Thêm mới about liên kết trong phần điều hướng bằng cách sử dụng URL người giúp đỡ.

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

Trang bố cục này là chung cho ứng dụng mô-đun hướng dẫn. Cập nhậtview_manager của tệp cấu hình mô-đun hướng dẫn.

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

Thêm aboutAction chức năng trong TutorialController.