Основа шаблона сайта находится по умолчанию в файле /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" > <?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>
Более подробно процесс типовой вёрстки сайтов рассмотрен в статье "Вёрстка БЭМ".
Комментарии (0)