2. Создание макета и структура макетов, CSS и JS

Перейдите в раздел Структура сайта → Макеты сайта. Для добавления макета выберите пункт Добавить в меню Макет и заполните форму.

Общее оформление страницы сайта размещается в макетах сайта.

Макеты сайта включаются друг в друга по принципу матрешки и могут иметь неограниченный уровень вложенности.

Каждый макет содержит код макета HTML/PHP, CSS/LESS-стили, Javascript-файл и манифест для отображения переменных LESS в клиентском разделе.

Как правило в основной родительский макет выделяют не меняющиеся элементы шаблона сайта, а в дочерние — специфические для разных разделов сайта элементы.

CSS и Javascript файлы подключается к странице в порядке очереди по цепочке от родительского макета к потомкам.

CSS-файл размещается в директории templates/template{id}/style.css, а LESS-файл в директории templates/template{id}/style.less

Секции макета

Секции макета предназначены для логического разделения макета на блоки. Внутри секции публикуется виджет из раздела «Типовые динамические страницы», что позволяет из клиентского раздела управлять размещаемыми в секции виджетами, например, перемещать, включать-выключать, задавать опции.

Переход к списку виджетов, добавленных в секцию, осуществляется через пиктограмму в столбце .

Вывод секции в макете

Показ секции осуществляется по псевдониму с использованием кода $this->showSection('псевдоним');, например, код макета с показом секции в левом блоке:

<div class="content-container">
    <div class="row">
        <div class="col-12 col-sm-4 col-md-3">
            <div class="row">
                <?php
                    // Секция левого блока
                    $this->showSection('leftBlock');
                ?>
            </div>
        </div>
        <?php
            // Основной контент
            Core_Page::instance()->execute();
        ?>
    </div>
</div>

Добавление виджета в секцию

Перейдите в список виджетов секции, далее нажмите Добавить.

Виджеты выводятся внутри секции, каждому виджету можно настроить свое отображение, а также переместить вверх или вниз стрелочками или потянув за пиктограмму руки. В клиентском разделе добавление виджета осуществляется нажатием .

Опции виджета

Виджет размещается внутри блока, для которого возможно указать значения тегов class и style, доступно также визуальное редактирование при нажатии :

Ручное изменения опций осуществляется при нажатии на пиктограмму , при сохранении настроек виджет сразу перезагружается и вы сможете увидеть изменения.

Общий код макета сайта

Пример макета сайта, содержащего секции header и footer.

<!DOCTYPE html>
<html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Type" content="text/html; charset=<?php echo SITE_CODING?>">
    <meta charset="<?php echo SITE_CODING?>">
    <title><?php Core_Page::instance()->showTitle()?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php Core_Page::instance()->showDescription()?>">
    <meta name="keywords" content="<?php Core_Page::instance()->showKeywords()?>">
    <meta name="author" content="HostCMS">

    <link type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic&subset=latin,cyrillic-ext" rel="stylesheet">

    <!-- Stylesheets -->
    <?php
    Core_Page::instance()
        ->prependCss('/bootstrap/css/bootstrap.min.css')
        ->css('/bootstrap/css/font-awesome.min.css')
        ->css('/hostcmsfiles/jquery/photobox/photobox.css')
        ->css('/hostcmsfiles/jquery/slider/jquery-ui.css')
        ->css('/hostcmsfiles/slippry/dist/slippry.css')
        ->showCss();
    ?>

    <?php Core_Browser::check()?>

    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/news/rss/">

    <?php
    Core_Page::instance()
        // jQuery
        ->prependJs('/hostcmsfiles/jquery/jquery.min.js')
        ->js('/hostcmsfiles/jquery/slider/jquery-ui.js')
        // Validate
        ->js('/hostcmsfiles/jquery/jquery.validate.min.js')
        // LightBox
        ->js('/hostcmsfiles/jquery/lightbox/js/jquery.lightbox.js')
        //ElevateZoom
        ->js('/hostcmsfiles/jquery/jquery.elevatezoom-3.0.8.min.js')
        // HostCMS
        ->js('/templates/template1/hostcms.js')
        ->js('/templates/template1/hostcms_adaptive.js')
        ->js('/hostcmsfiles/main.js')
        ->js('/templates/template1/script.js')        
        // BBcode
        ->js('/hostcmsfiles/jquery/bbedit/jquery.bbedit.js')
        // Stars
        ->js('/hostcmsfiles/jquery/stars/jquery.ui.core.min.js')
        ->js('/hostcmsfiles/jquery/stars/jquery.ui.stars.js')

        // jQuery.Autocomplete
        ->js('/hostcmsfiles/jquery/jquery.autocomplete.min.js')
        //photobox
        ->js('/hostcmsfiles/jquery/photobox/jquery.photobox.js')
        ->js('/bootstrap/js/bootstrap.min.js')
        ->js('/hostcmsfiles/slippry/dist/slippry.min.js')
        ->showJs();
    ?>

</head>
<body class="pageBody">
<!-- Header starts -->
    <header>
        <div class="row">
            <?php
                // Секция шапки
                $this->showSection('header');
            ?>
        </div>
    </header>

    <?php
        Core_Page::instance()->execute();
    ?>

    <div class="footer-container">
        <div class="container">
            <div class="row">
                <?php
                    // Секция подвала
                    $this->showSection('footer');
                ?>
            </div>
        </div>
    </div>
</body>
</html>

Заголовок страницы

Метод Core_Page::instance()->showTitle() выводит заголовок страницы.

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

Описание страницы

Метод Core_Page::instance()->showDescription() выводит описание страницы.

<meta name="description" content="<?php Core_Page::instance()->showDescription()?>"></meta>

Ключевые слова страницы

Метод Core_Page::instance()->showKeywords() выводит ключевые слова, заданные для страницы.

<meta name="keywords" content="<?php Core_Page::instance()->showKeywords()?>"></meta>

Кодировка страницы

<meta content="text/html; charset=<?php echo SITE_CODING?>" http-equiv="Content-Type"></meta>

Кодировка задается в атрибутах сайта, по умолчанию UTF-8.

Подключение CSS

Метод Core_Page::instance()->showCss() — выводит подключение CSS-стилей в макет. Метод содержит 2 необязательный параметра:
$bExternal указывает способ подключения CSS-стиля и по умолчанию имеет значение true (ссылка на CSS-файл), для вывода кода CSS-стилей в макет указывается false;
$rel определение типа ресурса и связь с ним, по умолчанию имеет значение 'stylesheet', может применять значения 'prefetch' или 'preload'.

<?php Core_Page::instance()->showCss()?>

Объединение и минимизация CSS-файлов

В макете сайта все дополнительные CSS-файлы добавляются с использованием метода Core_Page::instance()->css() и показываются с использованием метода showCss(), например:

<?php
Core_Page::instance()
	->css('/hostcmsfiles/jquery/lightbox/css/jquery.lightbox.css')
	->css('/hostcmsfiles/jquery/slider/jquery-ui.css')
	->showCss();
?>

Часто бывает необходимым добавить CSS-файл первым в списке, чтобы он не переопределял стили макета, такой css можно подключать методом Core_Page::instance()->prependCss(), например:

<?php
Core_Page::instance()
	->prependCss('/hostcmsfiles/bootstrap/bootstrap.min.css')
	->css('/hostcmsfiles/jquery/slider/jquery-ui.css')
	->showCss();
?>

Допускается использование несколько блоков показа CSS, каждый с showCss().

Подключение Javascript

В макете сайта все Javascript-файлы добавляются с использованием метода Core_Page::instance()->js($js, $async = FALSE) и показываются с использованием метода showJs(), например:

<?php
Core_Page::instance()
        // jQuery
        ->prependJs('/hostcmsfiles/jquery/jquery.min.js')
        ->js('/hostcmsfiles/jquery/slider/jquery-ui.js')
        // Validate
        ->js('/hostcmsfiles/jquery/jquery.validate.min.js')
        // LightBox
        ->js('/hostcmsfiles/jquery/lightbox/js/jquery.lightbox.js')
        //ElevateZoom
        ->js('/hostcmsfiles/jquery/jquery.elevatezoom-3.0.8.min.js')
?>

Уже минимизированные файлы должны иметь в имени .min, например, jquery.min.js.

При использовании объединения и минимизации Javascript-файлов асинхронная загрузка указывается для Core_Page::instance()->showJs(TRUE), например:

<?php
Core_Page::instance()
	// jQuery
	->prependJs('/hostcmsfiles/jquery/jquery.min.js')
	// Validate
	->js('/hostcmsfiles/jquery/jquery.validate.min.js')
	// С использованием асинхронной загрузки всего объединенного файла
	->showJs(TRUE);
?>

Допускается использование несколько блоков показа Javascript, каждый с showJs(), особо актуально для раздельного показа блоков с асинхронной загрузкой.

Показ дочернего элемента в макете сайта

В макете сайта в требуемое место вносится код вызова дочернего элемента. Это может быть дочерний макет или вызов элемента, указанного для текущего узла структуры сайта (статичная страница, динамическая или типовая динамическая страница).

<?php
Core_Page::instance()->execute();
?>

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

Код макета и шаблона страниц состоит из HTML-кода, PHP-кода и вызова API функций системы.

Система управления размещает макеты в файловой системе сервера в директории /templates/template{id_макета}/.

Пример кода дочернего макета для главной страницы

<div class="col-12 col-sm-8 col-md-9">
    <div class="row">
        <?php
            // Секция центрального блока
            $this->showSection('mainBlock');
        ?>
    </div>
</div>

Пример кода дочернего макета с выводом строки навигации

<div class="col-12 col-sm-8 col-md-9 col-lg-9">
	<div class="breadcrumbs"><?php
	// Вывод строки навигации
	$Structure_Controller_Breadcrumbs = new Structure_Controller_Breadcrumbs(
			Core_Entity::factory('Site', CURRENT_SITE)
		);
	$Structure_Controller_Breadcrumbs
		->xsl(
			Core_Entity::factory('Xsl')->getByName('ХлебныеКрошки')
		)
		->show();
	?></div>

	<?php
		Core_Page::instance()->execute();
	?>
</div>

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

Интеграция собственного шаблона

Скажите, а есть мануал для людей, которые впервые столкнулись с данным движком и хотят его изучить и использовать? Может надо купить его? Может надо заплатить кому-то? По этому мануалу у меня ничего не получается((( Я не знаю, впечатление такое, что все сделано таким образом чтобы у новичка ну ничего не выходило. Это очень скверно((

27.06.2023 21:12:44

medusa

Без темы

Для интеграции шаблона вам необходимо иметь хотя бы знания по основам HTML/CSS, затем придется немного понять PHP и XSL-шаблоны. Если вы новичок, то необходимо изучить данные вопросы, обучение этим основам мы не производим. Вы также можете обратиться к нашим партнерам, которые профессионально выполнять интеграцию требуемого макета.

28.06.2023 09:53:53

hostcms

Зачем у секции несколько виджетов?

По коду посмотрел - если виджетов в секции несколько, то они выводятся последовательно, друг за другом (максимум - оборачиваются в div-ы, и то, если указаны class или style).
Странно, пока не вижу как это (именно множество виджетов на 1-у секцию) будет использоваться в реальных проектах. Может быть покажите примеры?
По-моему логичнее было бы, чтобы каждая секция была бы таким маленьким template-ом, в котором бы было свободное размещение виджетов. Например:
[code]

Core_Page::instance()->template->showSection('phones');

...some text...

Core_Page::instance()->template->showSection('bottom_menu');

Core_Page::instance()->template->showSection('map');

[/code]
А вот если template секции пустой, то тогда и использовать вывод "по-умолчанию"

Также непонятен $this в
[quote]
Пример кода дочернего макета для главной страницы
[code]

[/code]
[/quote]
Наверное правильнее:
[code]
Core_Page::instance()->template->showSection('mainBlock');
[/code] ?

18.11.2016 11:12:05

ARTATOM

Без темы

Разобрался (надо было вспомнить как происходит вызов шаблона):
$this это указатель на текущий шаблон (объект типа "template").
Т.е. краткая запись вызова секции - $this->showSection('phones'), а более громоздкая - Core_Page::instance()->template->showSection('phones');

18.11.2016 12:29:26

ARTATOM

Без темы

Секция - это некий фрагмент страницы, где могут выводиться разные блоки (виджеты) Например, левое поле, там могут выводиться разделы магазина, метки, новости. Клиент захотел, чтобы там выводились еще и статьи - добавляет виджет инфосистемы, потом перетаскивает в нужную позицию и готово.

18.11.2016 11:19:12

hostcms

Коррекция заголовка

Подскажите, пожалуйста, где и как можно повлиять на формирование заголовка?

15.04.2014 23:06:00

exar

Без темы

Для динамических страниц заголовок формируется в настройках (типовой) дин. страницы.

16.04.2014 09:58:22

hostcms

2. Создание макета и структура макетов, CSS и JS

Секции макета

Вывод секции в макете

Добавление виджета в секцию

Опции виджета

Общий код макета сайта

Заголовок страницы

Описание страницы

Ключевые слова страницы

Кодировка страницы

Подключение CSS

Объединение и минимизация CSS-файлов

Подключение Javascript

Показ дочернего элемента в макете сайта

Пример кода дочернего макета для главной страницы

Пример кода дочернего макета с выводом строки навигации

Комментарии

Интеграция собственного шаблона

Без темы

Зачем у секции несколько виджетов?

Без темы

Без темы

Коррекция заголовка

Без темы