Содержание
Макеты шаблона
Шаблон InstantCMS, как общая сущность (синонимы - тема, скин), состоит из общего макета (их может быть более одного) и файлов-шаблонов для вывода.
Общий макет — это основной шаблон всех страниц сайта, содержащий теги <html>, <head> и <body>. Внутри него выводятся шаблоны компонентов и виджетов. По-умолчанию движок использует два макета: main.tpl.php - для самого сайта и admin.tpl.php для админки.
- /templates/default/main.tpl.php
- /templates/default/admin.tpl.php
Разметка макета
Разметка макета - это написание основного каркаса для вашей темы. Разберём на примере. В самом простом случае макет может быть таким:
- main.tpl.php
<!DOCTYPE html> <HTML> <head> <title><?php $this->title(); ?></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php $this->addMainCSS("templates/{$this->name}/css/theme-layout.css"); ?> <?php $this->addMainCSS("templates/{$this->name}/css/theme-modal.css"); ?> <?php $this->addMainJS("templates/{$this->name}/js/jquery.js"); ?> <?php $this->addMainJS("templates/{$this->name}/js/jquery-modal.js"); ?> <?php $this->addMainJS("templates/{$this->name}/js/core.js"); ?> <?php $this->addMainJS("templates/{$this->name}/js/modal.js"); ?> <?php if (cmsUser::isLogged()){ ?> <?php $this->addMainJS("templates/{$this->name}/js/messages.js"); ?> <?php } ?> <?php $this->head(); ?> </head> <body id="<?php echo $device_type; ?>_device_type"> <div id="layout"> <?php if (!$this->site_config->is_site_on){ ?> <div id="site_off_notice"> <?php printf(ERR_SITE_OFFLINE_FULL, href_to('admin', 'settings', 'siteon')); ?> </div> <?php } ?> <header> <div class="widget_ajax_wrap" id="widget_pos_header"> <?php $this->widgets('header', false, 'wrapper_plain'); ?> </div> </header> <?php if($this->hasWidgetsOn('top')) { ?> <nav> <div class="widget_ajax_wrap" id="widget_pos_top"> <?php $this->widgets('top', false, 'wrapper_plain'); ?> </div> </nav> <?php } ?> <div id="body"> <?php $messages = cmsUser::getSessionMessages(); if ($messages){ ?> <div class="sess_messages"> <?php foreach($messages as $message){ echo $message; } ?> </div> <?php } ?> <section> <div class="widget_ajax_wrap" id="widget_pos_left-top"> <?php $this->widgets('left-top'); ?> </div> <?php if ($this->isBody()){ ?> <article> <?php if ($this->site_config->show_breadcrumbs && $core->uri && $this->isBreadcrumbs()){ ?> <div id="breadcrumbs"> <?php $this->breadcrumbs(array('strip_last'=>false)); ?> </div> <?php } ?> <div id="controller_wrap"> <?php $this->body(); ?> </div> </article> <?php } ?> <div class="widget_ajax_wrap" id="widget_pos_left-bottom"> <?php $this->widgets('left-bottom'); ?> </div> </section> <aside> <div class="widget_ajax_wrap" id="widget_pos_right-top"> <?php $this->widgets('right-top'); ?> </div> <div class="widget_ajax_wrap" id="widget_pos_right-center"> <?php $this->widgets('right-center'); ?> </div> <div class="widget_ajax_wrap" id="widget_pos_right-bottom"> <?php $this->widgets('right-bottom'); ?> </div> </aside> </div> <footer> <ul> <li id="info"> <span class="item"> <?php echo LANG_POWERED_BY_INSTANTCMS; ?> </span> <span class="item"> <?php echo LANG_ICONS_BY_FATCOW; ?> </span> </li> <li id="nav"> <div class="widget_ajax_wrap" id="widget_pos_footer"> <?php $this->widgets('footer', false, 'wrapper_plain'); ?> </div> </li> </ul> </footer> </div> </body> </HTML>
Кодировка файла должна быть UTF-8.
Здесь показана упрощённая разметка шаблона по-умолчанию для InstantCMS. Внутри данного файла через $this доступны все методы объекта класса cmsTemplate.
Как мы видим, в макете представлен каркас основных (и возможных) блоков всех страниц сайта. Рассмотрим подробнее.
Блок <head>
Здесь выводится основные параметры страниц: заголовок, подключаемые стили и скрипты, мета теги.
Метод $this→title(); выводит заголовок страницы, заданный контроллером.
Метод $this→head(); выводит все головные теги, назначенные для страницы при помощи соответствующих методов добавления CSS, JavaScript и других тегов. Их же можно использовать выше вызова данного метода, для подключения того, что вам необходимо. Важно использовать подключение именно через методы движка, тогда ваши подключаемые стили и/или скрипты будут участвовать в сжатии и объединении согласно опций CMS.
Переменная $device_type
Данная переменная может содержать три значения: desktop, mobile, tablet. Что будет условно означать устройство, с которого посетитель зашёл на сайт. desktop - пользователи настольных ПК, mobile - пользователи с мобильных устройств, tablet - пользователи с планшетов.
Переменная $this->site_config
Это массив общих настроек сайта. Обычно используется для проверки включен ли сайт, включена ли отладка - соответственно для показа нужных сообщений.
Вывод виджетов
Как мы знаем, виджеты - это некие информационные блоки, которые могут содержаться на разных страницах. О разработке своих виджетов подробно описано на этой странице.
В контексте макета страницы, для виджетов нам важны два метода:
$this→hasWidgetsOn('position');
$this→widgets('position');
Метод hasWidgetsOn необходим для выяснения наличия включенных виджетов на заданной позиции или позициях и для текущей страницы.
$has_top = $this->hasWidgetsOn('top_position'); // вернёт true, если хотя бы один виджет на данной позиции и для текущей страницы доступен для вывода
В метод можно передавать несколько позиций через запятую:
$has_top = $this->hasWidgetsOn('top_center', 'top_right'); // вернёт true, если хотя бы один виджет на одной из двух позиций доступен для вывода
Метод widgets печатает все виджеты на данной позиции. У метода три параметра:
$this->widgets('position', $is_titles, $wrapper);
Вторым и третьим параметрами вы можете влиять на показ заголовка виджета и название обёртки шаблона соответственно. Эти параметры перекроют аналогичные параметры, заданные в самом виджете. Например, если вы хотите, чтобы на данной позиции у виджетов не было никогда заголовков, а шаблон был wrapper_plain.tpl.php, нужно написать так:
$this->widgets('position', false, 'wrapper_plain');
Вывод информационных сообщений
Информационные сообщения это сообщения об успешных операциях, информационные сообщения и сообщения об ошибках, например при ошибках в форме. Чтобы их вывести, вставьте в нужном месте шаблона:
<?php // получаем все сообщения $messages = cmsUser::getSessionMessages(); // если сообщения есть if ($messages){ ?> <div class="sess_messages"> <?php // перебираем и показываем их foreach($messages as $message){ echo $message; } ?> </div> <?php } ?>
Вывод "глубиномера"
Губиномер, он же «хлебные крошки», он же breadcrumbs - элемент навигации, представляющий собой путь по разделам сайта от корня до текущей страницы, которую в данный момент просматривает посетитель.
<?php if ($this->site_config->show_breadcrumbs && $core->uri && $this->isBreadcrumbs()){ ?> <div id="breadcrumbs"> <?php $this->breadcrumbs(array('strip_last'=>false)); ?> </div> <?php } ?>
В данной конструкции мы проверяем, что показ глубиномера включен в настройках $this→site_config→show_breadcrumbs
, мы не на главной странице $core→uri
и содержимое глубиномера не пустое $this→isBreadcrumbs()
. Если условия соблюдены, то показываем саму панель.
$this->breadcrumbs(array('strip_last'=>false));
В параметр метода передаётся массив настроек, по-умолчанию опции такие:
array( 'home_url' => href_to_home(), // урл главной страницы 'template' => 'breadcrumbs', // шаблон, в котором формируется HTML разметка глубиномера 'strip_last' => true // Флаг, что необходимо скрывать последний элемент цепочки );
Шаблон формирования глубиномера по-умолчанию находится по пути /templates/default/assets/ui/breadcrumbs.tpl.php
.
Вывод тела страницы
Метод $this→body(); печатает «тело» страницы, т.е. то, что отработал текущий компонент. На момент вывода тело уже сформировано.
Метод $this→isBody() проверяет, что нам есть что выводить в тело страницы.
Языковые константы
Если шаблон имеет свой языковой файл, то в макете доступны все его константы. Языковой файл может находиться по пути /system/languages/ЯЗЫК/templates/ИМЯ_ШАБЛОНА.php
.
Изменение макета для вывода
Переключение макета происходит в контроллере компонента следующим образом:
cmsTemplate::getInstance()->setLayout('admin');
или так, что равнозначно и предпочтительней, если это действие выполняется в контексте контроллера:
$this->cms_template->setLayout('admin');
Метод setLayout($layout_name) переключает макет для текущего вызова.
Если компонент использует собственный макет (или несколько макетов) то при смене темы оформления новая тема должна содержать в себе одноименные макеты, иначе компонент не будет совместим с темой.
Узнать имя текущего макета можно так:
$current_layout = $this->cms_template->getLayout();
На файлы макетов также распространяется механизм наследования.