Документация InstantCMS

для администраторов и разработчиков

Инструменты пользователя

Инструменты сайта

Вы находитесь здесь: Справочный центр InstantCMS » Разработчикам » Шаблоны » Макеты шаблона
dev:templates:layouts

Содержание

Макеты шаблона

Шаблон 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();

На файлы макетов также распространяется механизм наследования.

К оглавлению раздела

dev/templates/layouts.txt · Последнее изменение: 21.02.2017 13:04 — fuze
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki