Учебники

Zend Framework — Макет

Сентябрь 22, 2018

Макет представляет общие части нескольких представлений, например, верхний и нижний колонтитулы страницы. По умолчанию макеты должны храниться в папке вида / макета .

Конфигурация Layout определяется в разделе view_manager в module.config.php.

Стандартная конфигурация скелетного приложения выглядит следующим образом: 

'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 . Эта переменная важна, так как она будет заменена скриптом представления (шаблоном) фактической запрашиваемой страницы.

Создание нового макета

Давайте создадим новый макет для нашего учебного модуля.

Для начала давайте создадим файл tutorial.css в каталоге «public / css». 

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

Создайте новый файл макета newlayout.phtml в / myapp / module / Tutorial / view / layout / и скопируйте содержимое из существующего макета. Затем добавьте таблицу стилей tutorial.css с помощью вспомогательного класса HeadLink в разделе заголовка макета. 

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

Добавьте новую ссылку about в разделе навигации с помощью помощника URL . 

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

Добавьте функцию aboutAction в TutorialController . 

 public function aboutAction() { 
}

Добавьте about.phtml в myapp / module / Tutorial / view / tutorial / tutorial / со следующим содержимым. 

<h2>About page</h2>

Теперь вы готовы наконец запустить приложение — http: // localhost: 8080 / tutorial / about.

45
Share: