Параметры и Компоненты шаблона Макета страницы

Шаблоны макетов страницы находятся в папке tpl/layouts/ . Существует макет по умолчанию default.tpl, который применяется к тем страницам, у которых не указан явно иной макет. Выбор макета для страницы осуществляется с помощью компонента <UH-Page> в свойстве layout.

Пример шаблона макета страницы (включает не все нужные компоненты):

<!DOCTYPE html>
<html lang={language}>
<head>
    <meta charset={charset}/>
    <UH-Title/>
    <UH-Assets/>
    <UH-PageHead/>
</head>
<body>
    <UH-BodyBegin/>

    <header>
        <UH-Logo/>
        <UH-Header/>
        <UH-AuthInfo-Header/>
        <UH-Languages-Dropdown/>
    </header>
    <UH-SearchBar/>
    <section>
        <UH-Breadcrumbs/>
        <UH-Alerts/>
        <UH-Content/>
    </section>
    <footer>
        <UH-CopyrightText/>
    </footer>

    <UH-BodyEnd/>
    <UH-CustomFooterCode/>
</body>
</html>

Параметры

В шаблон макета страницы передаются следующие параметры:

charset (строка): имя кодировки (UTF-8);
language (строка): код текущего языка (например: ru-RU или en-US);
show_modules_menu (booolean): нужно ли показывать меню модулей <UH-ModulesMenu> (см. ниже);
widget_id_modal (строка): виджет форума для сайта: значение атрибута id="" для блока диалога;
widget_id_modal_close (строка): виджет форума для сайта: значение атрибута id="" для кнопки закрытия диалога;
widget_id_modal_container (строка): виджет форума для сайта: значение атрибута id="" для обертки фона позади диалога.

Компоненты

<IfOption>...</IfOption>

Условный вывод блока согласно опциям макета. Опции можно передавать из шаблона страницы в компоненте <UH-Page> в свойстве options.

Свойства:

enabled (string): имя опции. Тело блока будет выведено, если указанная опция была включена;
disabled (string): имя опции. Тело блока будет выведено, если указанная опция не была включена.

Можно указывать оба свойства. В этом случае условия объединяются логикой И.

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

{# в шаблоне макета страницы #}
<IfOption enabled="show_welcome">
    <p>Здравствуйте.</p>
</IfOption>
<IfOption disabled="hide_goodbye">
    <p>До свидания.</p>
</IfOption>

{# в шаблоне страницы А #}
{# опций нет, значит в макете выведется "До свидания" #}
<UH-Page>...</UH-Page>

{# в шаблоне страницы Б #}
{# в макете выведется "Здравствуйте" и "До свидания" #}
<UH-Page options="show_welcome">...</UH-Page>

{# в шаблоне страницы В #}
{# ни один из блоков в макете не будет выведен #}
<UH-Page options="hide_goodbye">...</UH-Page>

{# в шаблоне страницы Г #}
{# в макете выведется "Здравствуйте" #}
<UH-Page options="show_welcome, hide_goodbye">...</UH-Page>

<UH-Alerts/>

Вывод пользователю коротких сообщений о проделанных изменениях.

См. пример в начале статьи.

<UH-Assets/>

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

См. пример в начале статьи.

<UH-AuthInfo-Header/>

Блок аутентификации для вывода в шапке. Блок выводит либо кнопку входа, либо аватар юзера с выпадающим меню в зависимости от состояния аутентификации пользователя.

<UH-AuthInfo-SideBar/>

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

<UH-BodyBegin/>

Блок начала тела страницы. Блок всегда должен присутствовать сразу после открывающего элемента <body>. Возможен вывод HTML тегов, таких как <script>.

См. пример в начале статьи.

<UH-BodyEnd/>

Блок конца тела страницы. Блок всегда должен присутствовать в конце страницы перед закрывающим тегом </body>. Возможен вывод HTML тегов, таких как <script>.

См. пример в начале статьи.

<UH-Breadcrumbs/>

Блок т.н. хлебных крошек.

Свойства:

homeLabel (строка): надпись для ссылки на главную страницу. По умолчанию используется надпись на текущем языке.

См. пример в начале статьи.

<UH-Content/>

Блок основного контента страницы, который выводит шаблон страницы внутри компонента <UH-Page>.

См. пример в начале статьи.

<UH-CustomFooterCode/>

Дополнительный код в конце страницы. Компонент должен находиться в конце страницы перед закрывающим тегом </body>. Возможен вывод HTML тегов, таких как <script>.

<UH-Forum-CategoriesNav/>

Виджет категорий форума. Предназначен для вывода в боковой панели/колонке.

<UH-Header/>

Виджет блока шапки, настраиваемый в разделе "Внешний вид" в Панели Управления. Выводится по своему шаблону.

<UH-ModulesMenu>...</UH-ModulesMenu>

Меню модулей.

Свойства:

wrapTag (строка): обернуть список в элемент с указанным именем;
wrapClass (строка): значение атрибута class="" для оборачиваемого элемента wrapTag;
glue (строка): текст разделитель между элементами.

Тело компонента будет выведено для каждого элемента меню. Внутри тела доступны следующие параметры:

active (boolean): является ли данный элемент текущим (активным);
label (строка): название модуля;
url (строка): ссылка;

<UH-ModulesMenu>
    <a href={url} class={ "nav-link ${ active && "active" }"}>
       {label}
    </a>
</UH-ModulesMenu>

<UH-PageHead/>

Компонент выводит HTML теги вроде <meta>, <link> и <script>. Компонент должен находиться внутри элемента <head>.

См. пример в начале статьи.

<UH-Title/>

Элемент <title> с заголовком текущей страницы.

См. пример в начале статьи.

Пока никто не оценил эту статью. Эта статья помогла Вам?

Категории

Внешний сайт

4 вопроса

Общее

5 вопросов

Панель управления