Интеграция bootstrap-макета

1. Подключение файлов
Наш bootstrap-шаблон поставляется в архиве. В корне системы создадим директорию bootstrap. В неё поместим следующие директории из архива: css, fonts, img и js. Т.е. будет такая структура системы:

	admin
	...
	bootstrap
		- css
		- fonts
		- img
		- js
	...
	modules
	...

2. Создание сайта и макетов.
Для интеграции нам понадобится чистый сайт в системе управления. Создадим его в разделе "Сайты", меню "Сайт" - "Добавить". Получим сайт с пустыми макетами и структурой сайта. Приступим к созданию макета. В разделе "Макеты", через "Макет" - "Добавить" создаем макет. Даем ему имя, например, "Основной макет сайта". Во вкладке "HTML" будем писать на html-код.

3. Код макета.
Создадим основу макета:

    <!DOCTYPE html>
    <html lang="en">
        <head>
        </head>

        <body>
        </body>
    </html>

Теперь необходимо подключить стандартные мета-теги, иконку сайта и стили макета. Они добавляются в блок:

<meta charset="<?php echo SITE_CODING?>">
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo SITE_CODING?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="description" content="<?php Core_Page::instance()->showDescription()?>" />
<meta name="keywords" content="<?php Core_Page::instance()->showKeywords()?>" />
<meta name="author" content="HostCMS">

Подключим иконку нашего сайта, которая идет в архиве с макетом:

<!-- Favicon -->
<link rel="shortcut icon" href="/bootstrap/img/favicon.ico">

Вывод title:

<title><?php Core_Page::instance()->showTitle()?></title>

Стили макета и шрифты:

<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">

После всех манипуляций наш макет примет вид:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="<?php echo SITE_CODING?>">
        <meta http-equiv="Content-Type" content="text/html; charset=<?php echo SITE_CODING?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="description" content="<?php Core_Page::instance()->showDescription()?>" />
        <meta name="keywords" content="<?php Core_Page::instance()->showKeywords()?>" />
        <meta name="author" content="HostCMS">

        <!-- Favicon -->
        <link rel="shortcut icon" href="/bootstrap/img/favicon.ico">

        <title><?php Core_Page::instance()->showTitle()?></title>

        <!-- Bootstrap core CSS -->
        <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">

        <!-- Custom font for this template -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" type="text/css" href="/bootstrap/css/animate.css" />
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/elements.css" />
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/custom.css" />
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
    </head>

    <body>
    </body>
</html>

Следующий шаг - создание тела макета. Код будем добавлять в body. Начнем сверху вниз. Наш макет начинается со строки навигации, которая в себе содержит: логотип, меню и строку поиска. Эти элементы ходятся в div c классом "navbar":

<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>

Забираем его из исходника себе:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">The Highland</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">Home</a></li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="about-us.html">About Us</a></li>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="blog-post.html">Blog Post</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="404.html">Error 404</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                        <li><a href="pricing.html">Pricing</a></li>
                        <li><a href="team.html">Our Team</a></li>
                        <li class="divider"></li>
                        <li><a href="profile.html">Profile</a></li>
                        <li><a href="edit-profile.html">Edit Profile</a></li>
                        <li><a href="inbox.html">Inbox</a></li>
                        <li><a href="inbox-dialog.html">Inbox - Dialog</a></li>
                        <li><a href="sign-in.html">Sign In</a></li>
                        <li><a href="sign-up.html">Sign up</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">UI Elements <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="ui-elements.html#buttons">Buttons</a></li>
                        <li><a href="ui-elements.html#panels">Panels</a></li>
                        <li><a href="ui-elements.html#info-boards">Info Boards</a></li>
                        <li><a href="ui-elements.html#navs">Navs</a></li>
                        <li><a href="ui-elements.html#alerts">Alerts</a></li>
                        <li><a href="ui-elements.html#thumbnails">Thumbnails</a></li>
                        <li><a href="ui-elements.html#social">Social Icons</a></li>
                        <li><a href="ui-elements.html#section-header">Section Header</a></li>
                        <li><a href="ui-elements.html#page-tip">Page Tip</a></li>
                        <li><a href="ui-elements.html#block-header">Block Header</a></li>
                    </ul>
                </li>
                <li class="hidden-sm"><a href="blog.html">Blog</a></li>
                <li class="hidden-sm"><a href="contact.html">Contact us</a></li>
                <!-- Profile links for extra small screens -->
                <li class="visible-xs"><a href="sign-in.html">Sign In</a></li>
                <li  class="visible-xs"><a href="#">Sign Out</a></li>
            </ul>

            <!-- Search form for extra small screens -->
            <form class="navbar-form navbar-left visible-xs" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-btn">
                        <button class="hl-btn hl-btn-blue" type="button">Go!</button>
                    </span>
                </div>
            </form>

            <ul class="nav navbar-nav navbar-right hidden-xs">
                <!-- Search Button -->
                <li id="search">
                    <a href="#" id="search-btn" onclick="return false;"><i class="fa fa-search" id="search-icon"></i> Поиск</a>
                    <div class="search-box" id="search-box">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Поиск">
                            <span class="input-group-btn">
                                <button class="hl-btn hl-btn-default" type="button">Поехали!</button>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

Так как у нас меню будет строится динамически, то нам необходимо статичный блок меню

<ul class="nav navbar-nav">
    <li class="active"><a href="index.html">Home</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="about-us.html">About Us</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="blog-post.html">Blog Post</a></li>
            <li><a href="contact.html">Contact Us</a></li>
            <li><a href="404.html">Error 404</a></li>
            <li><a href="faq.html">FAQ</a></li>
            <li><a href="pricing.html">Pricing</a></li>
            <li><a href="team.html">Our Team</a></li>
            <li class="divider"></li>
            <li><a href="profile.html">Profile</a></li>
            <li><a href="edit-profile.html">Edit Profile</a></li>
            <li><a href="inbox.html">Inbox</a></li>
            <li><a href="inbox-dialog.html">Inbox - Dialog</a></li>
            <li><a href="sign-in.html">Sign In</a></li>
            <li><a href="sign-up.html">Sign up</a></li>
        </ul>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">UI Elements <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="ui-elements.html#buttons">Buttons</a></li>
            <li><a href="ui-elements.html#panels">Panels</a></li>
            <li><a href="ui-elements.html#info-boards">Info Boards</a></li>
            <li><a href="ui-elements.html#navs">Navs</a></li>
            <li><a href="ui-elements.html#alerts">Alerts</a></li>
            <li><a href="ui-elements.html#thumbnails">Thumbnails</a></li>
            <li><a href="ui-elements.html#social">Social Icons</a></li>
            <li><a href="ui-elements.html#section-header">Section Header</a></li>
            <li><a href="ui-elements.html#page-tip">Page Tip</a></li>
            <li><a href="ui-elements.html#block-header">Block Header</a></li>
        </ul>
    </li>
    <li class="hidden-sm"><a href="blog.html">Blog</a></li>
    <li class="hidden-sm"><a href="contact.html">Contact us</a></li>
    <!-- Profile links for extra small screens -->
    <li class="visible-xs"><a href="sign-in.html">Sign In</a></li>
    <li  class="visible-xs"><a href="#">Sign Out</a></li>
</ul>

строить динамически на XSLT, в XSL-шаблоне. В разделе "XSL-шаблоны" нужно создать новый XSL-шаблон, либо вносить изменения в стандартный шаблон "ВерхнееМеню". Мы используем первый вариант. Чтобы шаблоны не смешивались со стандартными создадим директорию "Bootstrap" и уже в ней будем добавлять новые шаблоны. Создаем новый шаблон в меню "XSL-шаблон" - "Добавить". В коде шаблона добавляем заголовки:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:hostcms="https://www.hostcms.ru/"
    exclude-result-prefixes="hostcms">
    <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

</xsl:stylesheet>

Теперь приступаем непосредственно в описанию наших узлов. Так как элементы меню это узлы структуры сайта, то добавляем описание корневого узла, в котором будем отбирать только активные узлы структуры. Как видно в статичном блоке меню все элементы - это список

<ul class="nav navbar-nav">

Поэтому сразу поместим отобранные узлы в список:

<xsl:template match="/site">
        <ul class="nav navbar-nav">
            <!-- Выбираем узлы структуры первого уровня -->
            <xsl:apply-templates select="structure[show = 1]" />
        </ul>
</xsl:template>

Следующий шаг - описание непосредственно элементов меню li:

<xsl:template match="structure">
    <li>
        <xsl:if test="count(structure[show = 1]) &gt; 0">
            <xsl:attribute name="class">dropdown</xsl:attribute>
            <ul class="dropdown-menu">
                <xsl:apply-templates select="structure[show=1]" mode="sub"/>
            </ul>
        </xsl:if>

        <!-- Определяем адрес ссылки -->
        <xsl:variable name="link">
            <xsl:choose>
                <!-- Если внешняя ссылка -->
                <xsl:when test="url != ''">
                    <xsl:value-of disable-output-escaping="yes" select="url"/>
                </xsl:when>
                <!-- Иначе если внутренняя ссылка -->
                <xsl:otherwise>
                    <xsl:value-of disable-output-escaping="yes" select="link"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <xsl:choose>
            <xsl:when test="count(structure[show = 1]) &gt; 0">
                <a href="{$link}" title="{name}" class="dropdown-toggle" data-toggle="dropdown"><xsl:value-of disable-output-escaping="yes" select="name"/><b class="caret"></b></a>
            </xsl:when>
            <xsl:otherwise>
                <a href="{$link}" title="{name}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
            </xsl:otherwise>
        </xsl:choose>
    </li>
</xsl:template>

Расммотрим подробно. Все элементы помещены в li, чтобы сформировать структуру нужного нам вида. Так как у нас могут быть подменю, то делаем отбор подузлов:

<xsl:if test="count(structure[show = 1]) &gt; 0">
    <xsl:attribute name="class">dropdown</xsl:attribute>
    <ul class="dropdown-menu">
        <xsl:apply-templates select="structure[show=1]" mode="sub"/>
    </ul>
</xsl:if>

Они будут в своем списке

<ul class="dropdown-menu">

Условие

<xsl:choose>
    <xsl:when test="count(structure[show = 1]) &gt; 0">
        <a href="{$link}" title="{name}" class="dropdown-toggle" data-toggle="dropdown"><xsl:value-of disable-output-escaping="yes" select="name"/><b class="caret"></b></a>
    </xsl:when>
    <xsl:otherwise>
        <a href="{$link}" title="{name}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
    </xsl:otherwise>
</xsl:choose>

описывает поведение самой ссылки на элемент меню. Если у узла есть потомки, то добавляем ему стрелочку для раскрыти списка, иначе показываем просто ссылку. Добавляем аналогичный шаблон для подузлов:

<xsl:template match="structure" mode="sub">
    <li>
        <!-- Определяем адрес ссылки -->
        <xsl:variable name="link">
            <xsl:choose>
                <!-- Если внешняя ссылка -->
                <xsl:when test="url != ''">
                    <xsl:value-of disable-output-escaping="yes" select="url"/>
                </xsl:when>
                <!-- Иначе если внутренняя ссылка -->
                <xsl:otherwise>
                    <xsl:value-of disable-output-escaping="yes" select="link"/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <!-- Ссылка на пункт меню -->
        <a href="{$link}" title="{name}"><xsl:value-of disable-output-escaping="yes" select="name"/></a>
    </li>
</xsl:template>

МакетВерхнееМеню

Возвращаемся к макету. Наше меню нужно теперь вызывать. Для этого использует контроллер показа структуры Structure_Controller_Show: https://www.hostcms.ru/api6/classes/Structure_Controller_Show.html

<?php
// Top menu
$Structure_Controller_Show = new Structure_Controller_Show(
    Core_Entity::factory('Site', CURRENT_SITE));

$Structure_Controller_Show->xsl(
    Core_Entity::factory('Xsl')->getByName('МакетВерхнееМеню')
)
    ->menu(1)
    ->show();
?>

где menu - идентифкатор меню из которого будут браться элементы. На разных сайтах идентифкатор меню будет отличаться! Таким образом наш тег body теперь выглядит так:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">The Highland</a>
            </div>

            <div class="collapse navbar-collapse">
                <?php
                // Top menu
                $Structure_Controller_Show = new Structure_Controller_Show(
                    Core_Entity::factory('Site', CURRENT_SITE));

                $Structure_Controller_Show->xsl(
                    Core_Entity::factory('Xsl')->getByName('МакетВерхнееМеню')
                )
                    ->menu(1)
                    ->show();
                ?>

                <!-- Search form for extra small screens -->
                <form class="navbar-form navbar-left visible-xs" role="search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                            <button class="hl-btn hl-btn-blue" type="button">Go!</button>
                        </span>
                    </div>
                </form>

                <ul class="nav navbar-nav navbar-right hidden-xs">
                    <!-- Search Button -->
                    <li id="search">
                        <a href="#" id="search-btn" onclick="return false;"><i class="fa fa-search" id="search-icon"></i> Поиск</a>
                        <div class="search-box" id="search-box">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Поиск">
                                <span class="input-group-btn">
                                    <button class="hl-btn hl-btn-default" type="button">Поехали!</button>
                                </span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

Чтобы увидеть элементы в меню, в структуре сайта нужно создать несколько активных узлов структуры. Получим такой вид:

Следующий этап - слайдер с панорамой. Его мы оставим таким же, как и в исходном макете:

<!-- Showcase -->
<div id="carousel-showcase" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-showcase" data-slide-to="0"></li>
        <li data-target="#carousel-showcase" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div id="wrap" style="background-position: 0 0;">
        <div class="carousel-inner">

            <!-- First slide -->
            <div class="item active">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <h1 class="animated slideInDown">The Highland Template</h1>
                            <div class="list">
                                <ul>
                                    <li class="animated slideInLeft first"><span class="li-bg"><i class="fa fa fa-code"></i> <span>Built with Bootstrap 3.</span></span></li>
                                    <li class="animated slideInLeft second"><span class="li-bg"><i class="fa fa-cogs"></i> <span>Easy to Customize.</span></span></li>
                                    <li class="animated slideInLeft third"><span class="li-bg"><i class="fa fa-tablet"></i> <span>Fully Responsive.</span></span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 hidden-sm hidden-xs">
                            <div class="showcase">
                                <div class="iMac animated fadeInDown"></div>
                                <div class="iPad animated fadeInLeft"></div>
                                <div class="iPhone animated fadeInRight"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End First Slide -->

            <!-- Second slide -->
            <div class="item">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <h1 class="animated slideInDown">New Panorama Showcase</h1>
                            <div class="list">
                                <ul>
                                    <li class="animated slideInLeft first"><span class="li-bg"><i class="fa fa fa-arrow-right"></i> <span>Smooth sliding.</span></span></li>
                                    <li class="animated slideInLeft second"><span class="li-bg"><i class="fa fa-cogs"></i> <span>Easy to set up.</span></span></li>
                                    <li class="animated slideInLeft third"><span class="li-bg"><i class="fa fa-laptop"></i> <span>4 background images.</span></span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 hidden-sm hidden-xs">
                            <!-- Available background images. -->
                            <div class="backgrounds-slide">
                                <div class="cycle-slideshow" data-cycle-fx="scrollHorz">
                                    <img src="/bootstrap/img/bg1_mini.jpg" alt="...">
                                    <img src="/bootstrap/img/bg2_mini.jpg" alt="...">
                                    <img src="/bootstrap/img/bg3_mini.jpg" alt="...">
                                    <img src="/bootstrap/img/bg4_mini.jpg" alt="...">
                                    <img src="/bootstrap/img/bg5_mini.jpg" alt="...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Second Slide -->

        </div>
    </div><!-- End Wrap -->

    <!-- Controls -->
    <a class="carousel-arrow carousel-arrow-prev" href="#carousel-showcase" data-slide="prev">
      &lt;
    </a>
    <a class="carousel-arrow carousel-arrow-next" href="#carousel-showcase" data-slide="next">
      &gt;
    </a>
</div>

Далее у нас идет небольшое меню состоящее из пяти блоков. Мы будем здесь выводить названия элементов из информационной системы. Для этого была создана информационная система "Услуги" и в нее добавлены элементы. Аналогично верхнему меню статичный блок переделан в XSL-шаблон "УслугиНаГлавной" вида:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:hostcms="https://www.hostcms.ru/"
    exclude-result-prefixes="hostcms">
    <xsl:output xmlns="http://www.w3.org/TR/xhtml1/strict" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" encoding="utf-8" indent="yes" method="html" omit-xml-declaration="no" version="1.0" media-type="text/xml"/>

    <!-- УслугиНаГлавной -->

    <xsl:template match="/">
        <ul>
            <xsl:apply-templates select="/informationsystem/informationsystem_item[active = 1]" />
        </ul>
    </xsl:template>

    <xsl:template match="informationsystem_item">
        <li>
            <i class="fa fa-{property_value[tag_name='img']/value} fa-3x"></i>
            <p><xsl:value-of disable-output-escaping="yes" select="name"/><br/>
            <a href="{url}">Подробнее...</a></p>
        </li>
    </xsl:template>
</xsl:stylesheet>

Изображения элементов будут загружены в дополнительное свойство типа "Файл", с именем img. Вывод в макете через Informationsystem_Controller_Show:

<!-- Services -->
<div class="row">
    <div class="col-md-12">
        <div class="services">
            <?php
            if (Core::moduleIsActive('informationsystem'))
            {
                $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
                    Core_Entity::factory('Informationsystem', 6) //ИС с кодом 6.
                );

                $Informationsystem_Controller_Show
                    ->xsl(
                        Core_Entity::factory('Xsl')->getByName('УслугиНаГлавной')
                    )
                    ->groupsMode('none')
                    ->itemsForbiddenTags(array('text', 'description'))
                    ->group(FALSE)
                    ->itemsProperties(TRUE)
                    ->limit(5)
                    ->show();
            }
            ?>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

Следующим элементом идет приветствие. Его мы добавим в статичный документ в разделе "Страницы и документы" и вызовем в макете:

<!-- Welcome message -->
<div class="col-md-8">
    <?php
        Core_Entity::factory('Document', 2)->Document_Versions->getCurrent()->execute(); //Документ с кодом 2.
    ?>
</div>

Далее у нас имеет блок "Обновления" с табами. В нем мы будем выводить новости, комментарии к новостям и события. Сам блок выводится так:

<!-- Last updated -->
<div class="col-md-4">
    <div class="block-header">
      <h2>
        <span class="title">Обновления</span><span class="decoration"></span><span class="decoration"></span><span class="decoration"></span>
      </h2>
    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a href="#blog" data-toggle="tab">Новости</a></li>
        <li><a href="#comments" data-toggle="tab">Комментарии</a></li>
        <li><a href="#events" data-toggle="tab">События</a></li>
    </ul>

    <div class="tab-content">

    </div>
</div>

Но нас интересует информация, которая будет выводится в tab-content. Для этого используем показ:

<!-- Табы -->
<?php
// Таб новости
if (Core::moduleIsActive('informationsystem'))
{
    $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
        Core_Entity::factory('Informationsystem', 1) //ИС с кодом 1.
    );

    $Informationsystem_Controller_Show
        ->xsl(
            Core_Entity::factory('Xsl')->getByName('НовостиНаГлавной')
        )
        ->groupsMode('none')
        ->itemsForbiddenTags(array('text'))
        ->group(FALSE)
        ->limit(3)
        ->show();
}

// Показ последних комментариев к новостям
if (Core::moduleIsActive('informationsystem'))
{
    $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
        Core_Entity::factory('Informationsystem', 1)
    );
    $Informationsystem_Controller_Show
        ->xsl(
            Core_Entity::factory('Xsl')->getByName('ПоследниеОтзывы')
        )
        ->cache(FALSE) // Запрещаем кэширование
        ->groupsMode('none')
        ->group(FALSE)
        ->limit(0);

    $oComments = Core_Entity::factory('Comment');
    $oComments
       ->queryBuilder()
       ->join('comment_informationsystem_items', 'comments.id', '=', 'comment_informationsystem_items.comment_id')
       ->join('informationsystem_items', 'informationsystem_items.id', '=', 'comment_informationsystem_items.informationsystem_item_id')
       ->where('informationsystem_id', '=', 1)
       ->where('comments.text', '!=', '')
       ->where('comments.active', '=', 1)
       ->orderBy('comments.datetime', 'DESC')
       ->limit(3);
    $aComments = $oComments->findAll();

    foreach ($aComments as $oComment)
    {
        $oInformationsystem_Item = Core_Entity::factory('Informationsystem_Item', $oComment->Comment_Informationsystem_Item->informationsystem_item_id);
        $sUrl = $oInformationsystem_Item->Informationsystem->Structure->getPath() . $oInformationsystem_Item->getPath();

        $oComment->clearEntities()->showXmlProperties(TRUE);

        $Informationsystem_Controller_Show->addEntity(
            $oComment->addEntity(
                Core::factory('Core_Xml_Entity')
                    ->name('short')
                    ->value(Core_Str::cut(strip_tags($oComment->text), 90))
            )->addEntity(
                Core::factory('Core_Xml_Entity')
                    ->name('url')
                    ->value($sUrl)
            )
        );
    }

    $Informationsystem_Controller_Show->show();
}

// Показ событий
if (Core::moduleIsActive('informationsystem'))
{
    $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
        Core_Entity::factory('Informationsystem', 15) //ИС с кодом 15
    );

    $Informationsystem_Controller_Show
        ->xsl(
            Core_Entity::factory('Xsl')->getByName('СобытияНаГлавной')
        )
        ->groupsMode('none')
        ->itemsForbiddenTags(array('text'))
        ->group(FALSE)
        ->itemsProperties(TRUE)
        ->limit(3)
        ->show();
}
?>

Информационные системы "Новости" и "События" были созданы заранее. XSL-шаблоны "НовостиНаГлавной", "ПоследниеОтзывы" и "СобытияНаГлавной" были созданы и преобразованы по тому же принципу, что и шаблоны предыдущих меню:
НовостиНаГлавной
ПоследниеОтзывы
СобытияНаГлавной

Препоследним элементов главной страницы у нас будет блок "Работы":

<!-- Recent Works -->
<div class="row">
    <div class="col-md-12 block-header">
        <h2>
            <span class="title">Работы</span><span class="decoration"></span><span class="decoration"></span><span class="decoration"></span>
        </h2>
    </div>
</div>
<div class="row">
<?php
if (Core::moduleIsActive('informationsystem'))
{
    $Informationsystem_Controller_Show = new Informationsystem_Controller_Show(
        Core_Entity::factory('Informationsystem', 4) //ИС с кодом 4
    );

    $Informationsystem_Controller_Show
        ->xsl(
            Core_Entity::factory('Xsl')->getByName('РаботыНаГлавной')
        )
        ->groupsMode('none')
        ->itemsForbiddenTags(array('text'))
        ->group(FALSE)
        ->limit(4)
        ->show();
}
?>
</div>

Миниатюры изображений были загружены основные изображения элементов, при их создании в информационной системе "Работы". РаботыНаГлавной

Остался один блок - подвал нашего макета, который содержит контакты, кнопки социальных сетей и форму подписки. Его мы решили оставить без изменений, так как нет необходимости его менять динамически. Выглядит это так:

<!-- Foooter -->
<footer>
    <div class="container">
        <div class="row">
            <!-- Contact Us -->
            <div class="col-md-4 col-sm-4">
                <div class="headline"><h3>Контакты</h3></div>

                <div class="content">
                    <p>
                    San Francisco, CA 94101<br />
                    1987 Lincoln Street<br />
                    Телефон: +0 000 000 00 00<br />
                    Факс: +0 000 000 00 00<br />
                    Email: <a href="#">admin@mysite.com</a>
                    </p>
                </div>
            </div>

            <!-- Social icons -->
            <div class="col-md-4 col-sm-4">
                <div class="headline"><h3>Соцсети</h3></div>

                <div class="content social">
                    <p>Не теряйте нас:</p>
                    <ul>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                        <li><a href="#"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="#"><i class="fa fa-github"></i></a></li>
                        <li><a href="#"><i class="fa-solid fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-vk"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
            </div>

            <!-- Subscribe -->
            <div class="col-md-4 col-sm-4">
                <div class="headline"><h3>Подписка</h3></div>

                <div class="content">
                    <p>Введите свой e-mail для подписки на бесплатную рассылку<br />Мы общаем не беспокоить вас часто!</p>
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Введите e-mail">
                        </div>
                        <button type="submit" class="hl-btn hl-btn-default">OK</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Legal -->
<div class="legal">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>&copy; The Highland <?php echo date('Y');?>. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
            </div>
        </div>
    </div>
</div>

Перед закрытием тега body нужно добавить подключение скриптов:

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/custom.js"></script>
<script src="/bootstrap/js/scrolltopcontrol.js"></script><!-- Scroll to top javascript -->
<script src="/bootstrap/js/jquery.cycle2.js"></script><!-- jqury slider for available background slideshow. Remove if not necessary -->
<script src="/bootstrap/js/bgpos.js"></script><!-- js for panorama slideshow. Remove if not necessary -->

На этом интеграция главной страницы завершена.
Полный код макета
Файл стилей

Не нашли ответ на свой вопрос в документации? Направьте обращение в службу поддержки или онлайн чат.

Показ секций только на главной странице

Было бы здорово показать новичкам, как скрывать определенные секции макета на всех страницах сайта кроме главной. А то я уже всю голову себе сломал)

05.02.2019 13:24:08

smkosnovalip

Интеграция bootstrap-макета

А почему "скромно умолчали" о интеграции кнопочки "Поиск"?

01.09.2015 15:00:03

Михаил

Вопрос

Если не ошибаюсь, нигде не упомянуто о вот этих файлах:

Что там?

15.08.2015 16:19:49

mavlenkov

Парсер съел...

Вот они:

/bootstrap/css/animate.css
/bootstrap/css/elements.css
/bootstrap/css/custom.css

15.08.2015 16:20:49

mavlenkov

Без темы

07.05.2020 20:01:15

borisych

Интеграция bootstrap-макета

Комментарии

Показ секций только на главной странице

Интеграция bootstrap-макета

Вопрос

Парсер съел...

Без темы