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]) > 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]) > 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]) > 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]) > 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">
<
</a>
<a class="carousel-arrow carousel-arrow-next" href="#carousel-showcase" data-slide="next">
>
</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>© 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 -->
На этом интеграция главной страницы завершена.
Полный код макета
Файл стилей
Было бы здорово показать новичкам, как скрывать определенные секции макета на всех страницах сайта кроме главной. А то я уже всю голову себе сломал)
А почему "скромно умолчали" о интеграции кнопочки "Поиск"?