Основа шаблона сайта находится по умолчанию в файле /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)