UserHorn Русский форум поддержки
Userhorn (Česky forum)UserHorn English support forumUserHorn Русский форум поддержки
Меню
Или оставьте нам приватное сообщение

Общие Компоненты шаблонов

Следующие компоненты доступны в любом шаблоне.

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

<Asset/>

Подключает в странице библиотеку, предопределённую системой.

Свойства:

<Asset name="bootstrap4"/>

Обратите внимание, что между библиотеками могут быть зависимости, в результате чего подключение Bootstrap v4 из примера выше подключит также jQuery и popper.js.

<CSS/>

Подключение CSS файлы.

Свойства:

  • href (строка): имя файла внутри папки css/ , либо урл внешнего файла, начиная с https:// или // ;
  • bundle (строка): необязательное имя группы для задания зависимостей;
  • depends (строка): список имён других групп, от которых зависит эта группа. Имена разделаются пробелами и/или запятыми.
<CSS href="style.css" depends="fonts"/>
<CSS href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" bundle="fonts"/>

В данном примере файл темы style.css зависит от группы файлов fonts, в которых объявлен внешний css файл по указанному адресу. К странице будет подключён сначала внешний файл, а после зависимый от него style.css.

<JS/>

Подключение JS файлы темы.

Свойства:

  • href (строка): имя файла внутри папки js/ , либо урл внешнего файла, начиная с https:// или // ;
  • bundle (строка): необязательное имя группы для задания зависимостей;
  • depends (строка): список имён других групп, от которых зависит эта группа. Имена разделаются пробелами и/или запятыми.
<JS href="script.js"/>

Объявление зависимостей между JS файлами аналогично зависимостям между CSS файлами.

<If>...</If>

Условное отображение блока.

Свойства:

  • true (boolean): тело блока отображается, если значение свойства соответствует истине;
  • false (boolean): тело блока отображается, если значение свойства соответствует лжи.
<If true={show_image}>
    <img src={image_url} alt={image_alt}/>
</If>

<If false={show_image || show_text}>
    {# демо баннер по умолчанию #}
</If>

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

<IfLanguage>...</IfLanguage>

Условное отображение блока в зависимости от текущего языка. (см. также <I18N/> ниже)

Свойства:

  • is (строка): коды языков, разделённые пробелами и/или запятыми. Код может быть либо из двух буков (например: ru, en и т.п.), либо из пяти символов (например: ru-RU, en-US и т.п.). Тело блока будет выведетно, если текущий язык соответствует любому из перечисленых;
  • not (boolean): инверсия проверки языка. Тело блока будет выведено, если текущий язык НЕ соответствует ни одному из указанных.
<IfLanguage is="ru, ua">
    <p>Здравствуйте</p>
</IfLanguage>
<IfLanguage not is="ru, ua">
    <p>Hello</p>
</IfLanguage>
<IfModule>...</IfModule>

Условное отображение блока согласно включённым модулям.

Свойства:

  • module (строка): имя проверяемого модуля. Тело блока будет выведено, если модуль включён. Значением должно быть одно из имём модулей:
    • chat: чат;
    • forum: форум;
    • wiki: база знаний.
  • disabled (boolean): инверсия проверки: тело блока будет выведено, если модуль отключён.
<IfModule module="forum" disabled>
    <p>Форум отключён.</p>
</IfModule>
<I18N/>

Выбор текста в зависимости от текущего языка.

Свойства:

  • код-языка (строка): текст для вывода, если текущий язык совпадает с указанным в качестве имени свойства;
  • default (строка): текст для вывода, если текущий язык не совпал ни с одним из указаных.

Код языков в именах свойств может быть как двухбуквеным (например: ru, en и т.п.), так и из 5 символов (например: ru-RU, en-US и т.п.). Более длинный код имеет приоритет над более коротким.

<I18N
    ru-RU="Здравствуйте"
    en-US="Hello"
    en="Good morning"
    default="..."
/>

Для языка ru-RU будет выведено "Здравствуйте". Для языка en-US будет выведено "Hello". Для прочих вариантов английского en будет выведено "Good morning". Для всех остальных языков будет выведено "...".

<UH-AdminLink/>

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

Свойства:

  • linkClass (строка): значение для атрибута class="" для создаваемой ссылки <a>;
  • wrapTag (строка): обернуть ссылку в элемент с указанным именем;
  • wrapClass (строка): значение атрибута class="" для оборачиваемого элемента wrapTag.
<UH-AdminLink
    wrapTag="div"
    wrapClass="sblock"
    linkClass="blue-button"
/>
<UH-Banner/>

Вывод баннера согласно настройкам в Панели Управления. Если баннер не установлен, то ничего не будет выведено, включая элемент-обёртку.

Свойства:

  • place (строка): имя позиции баннера:
    • top: верхний боковой.
    • bottom: нижний боковой.
  • wrapTag (строка): обернуть ссылку в элемент с указанным именем. По умолчанию уже указан элемент div. Если обёрка не нужна, можно указать выражение false (см пример);
  • wrapClass (строка): значение атрибута class="" для оборачиваемого элемента wrapTag.
{# верхний баннер будет обёрнут в <div class="poster-back">...</div> #}
<UH-Banner place="top" wrapClass="poster-back"/>

{# нижний баннер не будет обёрнут ни во что #}
<UH-Banner place="bottom" wrapTag={false}/>
<UH-CopyrightText/>

Текст с данными об авторских правах на платформу userhorn.com. Текст обязан быть выведен на всех страницах. Текст рекомендуется выводить в подвале страницы.

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

<UH-CopyrightText/>
<UH-Languages-Dropdown/>

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

Свойства:

  • showIfUseless (boolean): показывать выбор даже когда доступен только один вариант выбора (т.е. фактически выбора нет). По умоланию false;
  • wrapTag (строка): обернуть всё в элемент с указанным именем;
  • wrapClass (строка): значение атрибута class="" для оборачиваемого элемента wrapTag;
  • dropdownTogglerId (строка): значение атрибута id="" для кнопки, раскрывающей выпадающее меню. По умолчанию используется languages-dropdown-button;
  • togglerButtonType (строка): Дополнительный класс в атрибут class="" для кнопки, раскрывающей выпадающее меню. По умолчанию btn-secondary;
  • dropdownClass (строка): дополнительный класс в атрибут class="" для выпадающего меню.
<UH-Languages-Dropdown
    wrapTag="div"
    wrapClass="header-sub-item language-menu"
    togglerButtonType="btn--header-transparent"
    dropdownClass="dropdown-menu-right"
/>
<UH-Languages-Menu>...</UH-Languages-Menu>

Произвольное меню выбора языковой версии.

Свойства:

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

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

  • active (boolean): является ли данная языковая версия текущей;
  • code (строка): имя языковой версии из адресной строки, которое было указано при создании языковой версии;
  • label (строка): название языковой версии;
  • language (строка): код языка из 5 символов (например, ru-RU, en-US и т.п.);
  • url (строка): ссылка;
  • uuid (строка): уникальный идентификатор языковой версии.
<UH-Languages-Menu
    wrapTag="nav"
    wrapClass="subprojects-menu"
    glue=" "
>
    <a
        href={url}
        class={ "nav-link ${ active && "active" }" }
        data-uuid={uuid}
    >
        <code>{code}</code> {label} (<code>{language}</code>)
    </a>
</UH-Languages-Menu>
<UH-Logo/>

Логотип, выбранный в настройках внешнего вида в Панели Управления.

<UH-Logo/>
<UH-PoweredBy/>

Небольшой баннер "Powered by userhorn.com" со ссылкой на платформу userhorn.com.

Свойства:

  • imageClass (строка): значение атрибута class="" для изображения;
  • linkClass (строка): значение атрибута class="" для ссылки.
<UH-PoweredBy imageClass="img-fluid" linkClass="d-block"/>
<UH-SearchBar/>

Блок со строкой поиска.

<UH-SearchBar/>
Пока никто не оценил эту статью. Эта статья помогла Вам?
Категории
Внешний сайт
4 вопроса
Общее
5 вопросов
Панель управления
Работает на UserHorn.com