Основа шаблона сайта находится по умолчанию в файле /themes/business/views/layouts/main.php. В этом файле определяются мета-теги, шапка и подвал, подключаются стили и скрипты, применяемые для всего сайта.

Если вы желаете изменить имя темы сайта, необходимо сделать это в конфигурационном файле /protected/config/project.php

return array(
  'name'=>'Engine macro',
  'language' => 'ru',
  'theme' => 'business',

Для параметра theme вы можете задать другое название, соответствующее названию вашей темы.

Будьте внимательны, изменяя название темы в конфигурационном файле, система будет ожидать наличия одноимённой папки в папке /themes.

Подключение css-файлов

Для подключения css-файла в общем случае применяется команда $this->registerCssFile('/themes/business/css/content.css');. Единственным параметром этой команды является указание пути к подключаемому css-файлу. При этом предполагается, что css-файл будет находится в папке assets соответствующего модуля. Например, файл стилей для новостей будет находиться по абсолютному пути /themes/business/views/news/assets/news.css.

Существует условность: файл /themes/ваша_тема/css/content.css автоматически подключается в редактор TinyMCE в системе управления сайтом. Посредством этого файла обеспечиваются единые стили отображения текста на фронтенде и бэкенде.

Подключение js-файлов

Для подключения js-файла применяется команда $this->registerScriptFile('/themes/business/js/js.js', CClientScript::POS_HEAD);. Помимо первого параметра, указывающего на путь к файлу, применяется второй параметр, указывающий в каком месте страницы будет подключаться ява-скрипт. Наиболее распространёнными вариантами значений этого параметра являются CClientScript::POS_HEAD - подключение ява-скрипта в шапке страницы и CClientScript::POS_END - подключение в подвале страницы.

Если необходимо осуществить исполнение ява-скрипт кода прямо в теле страницы без подключения js-файла, применяется команда $this->registerScript('alert(1);', CClientScript::POS_READY);. При этом последний параметр CClientScript::POS_READY означает, что указанный код будет исполнен сразу после загрузки DOM-дерева страницы, т.е. на событие document.ready().

Определение мест для вывода виджетов

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

В системе управления ygin имеется графический интерфейс для редактирования наборов и виджетов, позволяющий администратору сайта менять порядок и места вывода виджетов, включать и выключать их без помощи программистов.

Для определения места, где в дальнейшем будут выводиться виджеты, используется команда $this->widget('BlockWidget', array("place" => SiteModule::PLACE_BOTTOM));. Параметр place при этом определяет идентификатор места. В системе заранее подготовлены следующие идентификаторы мест, которых в большинстве случаев достаточно для понимания места: PLACE_TOP, PLACE_BOTTOM, PLACE_FOOTER, PLACE_CONTENT, PLACE_CONTENT_TOP, PLACE_RIGHT, PLACE_LEFT. При необходимости данный список идентификаторов мест для виджетов может быть расширен или изменён.

Для различных групп страниц сайта в системе управления ygin могут быть предопределены наборы виджетов. Каждый набор виджетов хранит информацию о том, какие виджеты на каких местах и в какой последовательности будут выводиться. Таким образом верстальщик подготавливает места для вывода виджетов в шаблоне страницы, а администратор сайта указывает, что для данной страницы сайта будет применяться тот илиной набор виджетов посредством системы управления ygin. Подробнее механизм настройки и определения набора виджетов рассматривается в разделе документации Настройка набора виджетов для администратора.

Вывод заголовка и контента страницы

В простейшем случае страница сайта является статичной, а её содержимое определяется в системе управления ygin через объект Меню. Вывод заголовка страницы осуществляется командой echo $this->caption;, а вывод контента echo $content;.

Вывод виджетов напрямую

Существуют случаи, когда требуется "зашить в код" место для вывода виджета и не давать администратору сайта управлять этим через систему управления ygin. В таких случаях вывод виджета осуществляется командой $this->widget('ИмяВиджета', array());.

Пример разметки файл шаблона

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="content-language" content="ru" > &lt?php // TODO - в будущем генетить автоматом ?>
<?php
  //Регистрируем файлы скриптов в <head>
  if (YII_DEBUG) {
    Yii::app()->assetManager->publish(YII_PATH.'/web/js/source', false, -1, true);
  }
  Yii::app()->clientScript->registerCoreScript('jquery');
  $this->registerJsFile('bootstrap.min.js', 'ygin.assets.bootstrap.js');
  $this->registerJsFile('modernizr-2.6.1-respond-1.1.0.min.js', 'ygin.assets.js');

  Yii::app()->clientScript->registerScriptFile('/themes/business/js/js.js', CClientScript::POS_HEAD);
  Yii::app()->clientScript->registerScript('menu.init', "$('.dropdown-toggle').dropdown();", CClientScript::POS_READY);

  $this->registerCssFile('bootstrap.min.css', 'ygin.assets.bootstrap.css');
  $this->registerCssFile('bootstrap-responsive.min.css', 'ygin.assets.bootstrap.css');
  $ass = Yii::getPathOfAlias('ygin.assets.bootstrap.img').DIRECTORY_SEPARATOR;
  Yii::app()->clientScript->addDependResource('bootstrap.min.css', array(
    $ass.'glyphicons-halflings.png' => '../img/',
    $ass.'glyphicons-halflings-white.png' => '../img/',
    $ass.'glyphicons-halflings-red.png' => '../img/',
    $ass.'glyphicons-halflings-green.png' => '../img/',
  ));
  Yii::app()->clientScript->registerCssFile('/themes/business/css/content.css');
  Yii::app()->clientScript->registerCssFile('/themes/business/css/page.css');
?>
  <link href='http://fonts.googleapis.com/css?family=Russo+One&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Roboto:300&subset=cyrillic' rel='stylesheet' type='text/css'>
  <title><?php echo CHtml::encode($this->getPageTitle()); ?></title>
  <link rel="shortcut icon" href="/favicon.png">
</head>

<body>
<?php $this->widget('BlockWidget', array("place" => SiteModule::PLACE_TOP)); ?>

<?php

if (Yii::app()->hasModule('search')) {
  $this->widget('SearchWidget');
}

$this->widget('MenuWidget', array(
  'rootItem' => Yii::app()->menu->all,
  'htmlOptions' => array('class' => 'nav nav-pills pull-right'), // корневой ul
  'submenuHtmlOptions' => array('class' => 'dropdown-menu'), // все ul кроме корневого
  'activeCssClass' => 'active', // активный li
  'activateParents' => 'true', // добавлять активность не только для конечного раздела, но и для всех родителей
  //'labelTemplate' => '{label}', // шаблон для подписи
  'labelDropDownTemplate' => '{label} <b class="caret"></b>', // шаблон для подписи разделов, которых есть потомки
  //'linkOptions' => array(), // атрибуты для ссылок
  'linkDropDownOptions' => array('data-target' => '#', 'class' => 'dropdown-toggle', 'data-toggle' => 'dropdown'), // атрибуты для ссылок для разделов, у которых есть потомки
  //'itemOptions' => array(), // атрибуты для li
  'itemDropDownOptions' => array('class' => 'dropdown'),  // атрибуты для li разделов, у которых есть потомки
  'maxChildLevel' => 1,
  'encodeLabel' => false,
));

?>
        <div id="content" class="span<?php echo $column2; ?>">
          <div class="page-header">
            <h1><?php echo $this->caption; ?></h1>
          </div>
          
          <?php if (isset($this->breadcrumbs)): // Цепочка навигации ?>
          <?php $this->widget('BreadcrumbsWidget', array(
            'homeLink' => array('Главная' => Yii::app()->homeUrl),
            'links' => $this->breadcrumbs,
          )); ?>
          <?php endif ?>
          
          <div class="cContent">
            <?php echo $content; ?>
          </div>
        </div>


</body>
</html>

Более подробно процесс типовой вёрстки сайтов рассмотрен в статье "Вёрстка БЭМ".

24 июня 2013

Автор: Огнёв Иван

Комментарии (0)

Добавить комментарий