Лэйаут страницы в Zend Framework 3

6.2. Лэйаут страницы в Zend Framework 3

Страницы вашего сайта, как правило, имеют некоторую общую структуру. Например, типичная страница содержит объявление <!DOCTYPE> для идентификации HTML-документа, а также элементы <head> и <body>:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Welcome</title>
        <!-- Вставьте мета-теги, таблицы стилей и скрипты -->  
    </head>
    <body> 
        <!-- Вставьте содержимое страницы -->  
    </body>
</html>

Элемент <head> содержит текст заголовка страницы, метаданные и информацию об использованных таблицах стилей и скриптах. Элемент <body> содержит содержимое страницы, то есть, логотип, панель навигации, текст страницы и футер с информацией об авторских правах.

В Zend Framework 3 вы определяете подобную структуру с помощью "главного" шаблона представления, называемого лэйаутом. Лэйаут "украшает" другие шаблоны представления.

Шаблон лэйаута, как правило, имеет плейсхолдер,куда ZF3 помещает контент для конкретной указанной страницы (см. рисунок 6.2).

Рисунок 6.2. Плейсхолдер в шаблоне лэйаута

В Skeleton Application стандартный файл шаблона лэйаута называется layout.phtml. Он расположен внутри каталога view/layout в каталоге модуля Application (см. рисунок 6.3).

Figure 6.3. Каталог лэйаута

Давайте рассмотрим файл шаблона 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')
    ?>

    <!-- Стили -->
    <?= $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/bootstrap-theme.min.css'))
        ->prependStylesheet($this->basePath('css/bootstrap.min.css'))
    ?>

    <!-- Скрипты -->
    <?= $this->headScript()
        ->prependFile($this->basePath('js/bootstrap.min.js'))
        ->prependFile($this->basePath('js/jquery-2.2.4.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="<?php echo $this->url('home') ?>">
              <img src="<?= $this->basePath('img/zf-logo.png') ?>" 
                   alt="Zend Framework <?= \Application\Module::VERSION ?>"/>
                   &nbsp;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>&copy; 2005 - <?= date('Y') ?> by Zend Technologies Ltd. 
            All rights reserved.
          </p>
        </footer>
      </div>
      <?= $this->inlineScript() ?>
  </body>
</html>

Как видите, файл layout.phtml (как и обычный шаблон представления) состоит из HTML-тегов и фрагментов PHP-кода. При визуализации шаблона ZF3 вычисляет PHP-строки и генерирует получившуюся HTML-страницу, доступную пользователям сайта.

Строка 1 генерирует объявление <!DOCTYPE> ¹⁰ HTML-страницы с помощью помощника видов Doctype.

¹⁰⁾ Объявление <!DOCTYPE> идет первым в HTML-документе, перед тегом <html>. Объявление предоставляет браузеру инструкции о том, на какой версии HTML написана страница (на нашем сайте мы используем объявление HTML5-совместимого типа документа).

Строка 3 определяет элемент <html>, представляющий собой корень HTML-документа. За тегом <html> следует тег <head> (строка 4), который, как правило, содержит заголовок документа и может содержать дополнительную информацию вроде скриптов, CSS-стилей и метаданных.

В строке 5 тег <meta> сообщает браузеру, что документ закодирован с помощью кодировки символов UTF-8 ¹¹.

¹¹⁾ UTF-8 позволяет закодировать любой символ любого алфавита в мире, поэтому его рекомендуется использовать для кодировки веб-страниц.

В строке 6 мы видим помощник вида HeadTitle, который позволяет определить заголовок для страницы ("ZF Skeleton Application"). Он будет показан в заголовке окна браузера. Метод setSeparator() используется для определения символа-разделителя для "составных" заголовков страниц¹²; метод setAutoEscape() повышает безопасность, "обрабатывая" (escape) небезопасные символы из заголовка страницы.

¹²⁾ "Составной" заголовок страницы состоит из двух частей: первая часть ("ZF Skeleton Application") определяется лэйаутом, а вторая - определяемая конкретной страницей - является префиксом для первой. Например, у страницы вашего сайта About будет заголовок "About - ZF Skeleton Application", а для страницы Documentation - "Documentation - ZF Skeleton Application".

В строке 9 помощник вида HeadMeta позволяет определить тег <meta name="viewport">, содержащий метаданные для веб-браузера, которые предназначены для управления лэйаутом на различных устройствах, включая мобильные браузеры. Свойство width контролирует размер области просмотра, а свойство initial-scale - уровень масштабирования загруженной страницы. Это делает лэйаут веб-страницы "отзывчивым" к размеру области просмотра устройства.

В строке 15 помощник вида HeadLink позволяет определить теги <link>. С помощью этих тегов <link>, как правило, определяется "favicon" (FAVorite ICON — «значок для избранного») для страницы (находится в файле APP_DATA\public\img\favicon.ico) и таблицы стилей CSS.

В строках 17-19 методом prependStylesheet() помощника вида HeadLink подключаются таблицы стилей, общие для всех страниц сайта. Любая страница нашего веб-сайта будет загружать три файла таблиц стилей CSS: bootstrap.min.css (минифицированная версия фреймворка Twitter Bootstrap), bootstrap-theme.min.css (минифицированная таблица стилей темы) и style.css (файл, позволяющий нам определить свои собственные CSS-правила, переопределяющие правила CSS-правила Bootstrap).

Строки 23-25 включают JavaScript-файлы, которые будут загружаться всеми вашими веб-страницами. Скрипты, выполняемые браузером клиента, позволяют добавить интерактивные функции вашим страницам. Мы используем скрипты bootstrap.min.js(минифицированная версия Twitter Bootstrap) и jquery-2.2.4.min.js (минифицированная версия библиотеки jQuery). Все скрипты находятся в каталоге APP_DIR/public/js.

В строке 28 находится определение тега <body>, тела документа, где находится все его содержимое: панель навигации, текст, гиперссылки, изображения, таблицы, списки и т.д.

В строках 29-52 находится определение панели навигации Bootstrap. Скелетное приложение использует складную панель навигации с темной темой. Панель навигации содержит одну единственную ссылку Home.

Если вы посмотрите на строки 53-61, вы заметите элемент <div> с классом container - контейнером для системы сеток. Таким образом, вы можете использовать систему сеток Bootstrap для организации содержимого ваших веб-страниц.

Строка 54 очень важна: в ней находится PHP-код, представляющий собой плейсхолдер для содержимого страницы, о которой мы говорили в начале этого раздела. Когда визуализатор ZF3 работает с шаблоном представления, содержимое текущей страницы отражается также и здесь.

Строка 62 - это плейсхолдер для скриптов JavaScript, загружаемых определенной страницей. Помощник вида InlineScript будет заменять здесь все скрипты, которые вы зарегистрировали (о регистрации скриптов JavaScript вы узнаете позже в этой главе).

И наконец, строки 63-64 содержат закрывающие теги для тела и HTML-документа.