Parameters and Components for Layout template

This article is a translation of atricle in russian.

Templates for page layout are stored under tpl/layouts/ folder. There is default layout default.tpl, which will be applied to all pages where layout did not specified. Layout can be changed with <UH-Page> component with proerty layout.

Example of layout template (does not include all of needed components):

<!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>

Parameters

Layout template receives following parameters:

charset (string): character set name (UTF-8);
language (string): current language code (for example: ru-RU or en-US);
show_modules_menu (booolean): whether to show languages menu <UH-ModulesMenu> (see below);
widget_id_modal (string): widget for site: value of attribute id="" for dialog block;
widget_id_modal_close (string): widget for site: value of attribute id="" for button to close dialog;
widget_id_modal_container (string): widget for site: value of attribute id="" for wrapper beyound dialog.

Components

<IfOption>...</IfOption>

Conditional block rendering depending of layout options. Options can be set from page template in <UH-Page> component with options property.

Properties:

enabled (string): option name. Block content will be rendered if specified option was set;
disabled (string): option name. Block content will be rendered if specified option was NOT set.

Both properties can be specified together. In this case the conditions are joined with AND logic.

Options allows you to setup conditional blocks in layout template (show or hide something at specific pages) without copying whole layout template.

{# in layout template #}
<IfOption enabled="show_welcome">
    <p>Hello.</p>
</IfOption>
<IfOption disabled="hide_goodbye">
    <p>Good bye.</p>
</IfOption>

{# in page A #}
{# no options, so only "Good bye" will be rendered #}
<UH-Page>...</UH-Page>

{# in page B #}
{# layout will render both "Hello" and "Good bye" #}
<UH-Page options="show_welcome">...</UH-Page>

{# in page C #}
{# both blocks will not be rendered in layout #}
<UH-Page options="hide_goodbye">...</UH-Page>

{# in page D #}
{# only "Hello" will be rendered in layout #}
<UH-Page options="show_welcome, hide_goodbye">...</UH-Page>

<UH-Alerts/>

Render short alert messages to end user.

See example in the begin.

<UH-Assets/>

This component registers platform libraries to link to page. Some meta tags can b rendered, so component should be placed in <head> element.

See example in the begin.

<UH-AuthInfo-Header/>

Authentication block for page header. Block renders either "Log in" button user's avarat with dropdown menu depending of authentication state.

<UH-AuthInfo-SideBar/>

Authentication block for side column. Block renders either "Log in" button user's avarat with dropdown menu depending of authentication state.

<UH-BodyBegin/>

Block for page body begin. Block always must to present just after opening tag <body>. Some HTML tags like <script> would be rendered.

See example in the begin.

<UH-BodyEnd/>

Block for page body end. Block always must to present just before closing tag </body>. Some HTML tags like <script> would be rendered.

See example in the begin.

<UH-Breadcrumbs/>

Renders so called "bread crumbs".

Properties:

homeLabel (string): label for Main Page link. Default is a label in the current language.

See example in the begin.

<UH-Content/>

Main content of the page, which was rendered in page template inside <UH-Page> component.

See example in the begin.

<UH-CustomFooterCode/>

Custom HTML code in the page's end. Component must to present in the page end before closing tag </body>. Some HTML tags like <script> would be rendered.

<UH-Forum-CategoriesNav/>

Forum categories widget. Designed to render in side column.

<UH-Header/>

Page header widget configurable in "Appearance" settings in Control Panel. Renders with its own template.

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

Modules menu.

Properties:

wrapTag (string): wrap list into an element with specified name;
wrapClass (string): value of attribute class="" for the wrapper element in wrapTag;
glue (string): text between list items.

Component's body will be rendered for each available module. There are following extra parameters available inside component:

active (boolean): whether current item is active (selected);
label (string): module title;
url (string): URL;

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

<UH-PageHead/>

Renders HTML tags like <meta>, <link> and <script>. Component must be placed inside <head> element.

See example in the begin.

<UH-Title/>

Element <title> with page title.

See example in the begin.

Nobody did vote for this article yet. Did this article help to you?