Базовые сведения о шаблонах

Файлы

Файлы шаблонов располагаются в папке tpl/ внутри одной из трёх подпапок согласно назначению. Большинство файлов и папок здесь нельзя удалить или переименовать, поскольку в этом нет необходимости. Создать, удалить или переименовать можно лишь шаблоны макетов страницы в папке tpl/layouts/, кроме макета по умолчанию default.tpl .

Разновидности шаблонов

Как было упомянуто выше, шаблоны бывают нескольких разновидностей согласно их назначению:

• layouts — макеты страницы
• pages — контент различных типов страниц
• widgets — различные виджеты

Синтаксис

Код шаблонов схож с HTML, но более близок к XHTML. Ниже перечислены ключевые моменты шаблонов в сравнении с HTML:

1. Имена HTML тегов и атрибутов должны быть в нижнем регистре. <div> правильно, но <Div> или <DIV> неправильно. Верхний регистр тегов используется для Компонентов, о которых будет сказано далее.
2. Все блочные теги должны быть явно закрыты строго в порядке открытия: <div><p>...</p></div> правильно, но <div><p>...</div> или <div>...(конец файла) неправильно.
3. Одиночные теги должны иметь "/" перед ">", как в XML. <img src="..." /> и <br/> правильно, но <img src=""> и <br> неправильно.
4. Значения атрибутов могут быть как заключены в кавычки или апострофы, так и указаны без оных, но последнее не рекомендуется. Также в качестве значений атрибутов могут использоваться выражения в фигурных скобках (об этом будет сказано далее).
5. Булевы атрибуты (например, disabled или checked) могут быть указаны без значения, как это разрешает HTML: <input disabled/>.
6. Пробельные символы в тексте в начале и в конце строки удаляются. Пустые строки текста удаляются. Подробнее будет сказано далее.
7. Текст вне тегов не может содержать символы < > { } , поскольку они имеют специальное назначение. Для вставки символов < и > используйте соответствующие мнемоники &lt; и &gt;. <p>x < y</p> неправильно. <p>x &lt; y</p> правильно. Для вставки символов { и } можно использовать как мнемоники &#3C; и &#3E; так и выражения со строкой (см далее). Обратите внимание, что вместо вставки JS или CSS кода прямо в страницу лучше использовать внешние файлы.

Обратите внимание: атрибуты, принимающие булев тип (boolean), могут быть указаны следующими способами:

{# здесь атрибут disabled принимает true #}
<input type="text" disabled/>
<input type="text" disabled={true}/>

{# здесь атрибут checked принимает значение false,
   что может иметь смысл для свойств Компонентов #}
<input type="checkbox" checked={false}/>

{# здесь атрибут checked принимает значение из внешнего параметра foobar #}
<input type="checkbox" checked={foobar}/>

Комментарии

Комментарии в шаблонах могут содержаться только в тексте, и имеют следующий вид:

{# комментарий #}

{# закомментированный кусок кода
<div>
  ...
</div>
#}

Вложенные комментарии недопустимы.

Удаление пробелов в тексте

Пробельные символы в тексте в начале и в конце строки удаляются вместе с символами переносов строк. Это позволяет переносить код шаблона для улучшения читабельности, не беспокоясь о засорении вывода лишними пробелами:

<div>
  <h1>Заголовок</h1>
  <p>
    Lorem ipsum dolor sit
    amet consectepture adipisicing elit.
  </p>
</div>

этот код выведет на страницу:

<div><h1>Заголовок</h1><p>Lorem ipsum dolor sitamet consectepture adipisicing elit.</p></div>

Обратите внимание, что перенесённый текст склеился без пробелов. Чтобы избежать подобного поведения, можно сделать, например, так:

<p>
  Lorem ipsum dolor
  {} sit amet consectepture.
</p>
<p>
  {} {}
</p>

этот код выведет:

<p>Lorem ipsum dolor sit amet consectepture.</p><p> </p>

Вставка выражений

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

<h1>{ title }</h1>

<a href={ url } title={ title }>...</a>

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

Компоненты

Компоненты — это специальные теги, которые при выводе страницы выполняют какие-то действия или выводят на страницу некий код. В коде шаблона компоненты — это такие же теги, как и обычные HTML теги. Компоненты, как и HTML теги, могут принимать атрибуты (свойства) и могут быть блоковыми или одиночными.

Обратите внимание, что имена компонентов чувствительны к регистру. Это значит, что компонент CSS не будет работать при обращении по имени <css/> или <Css/>, и будет работать только как <CSS/>.

Например:

{# подключаем файл css/styles.css к выводу страницы #}
<CSS href="styles.css"/>

{# произвольное меню языковых версий #}
<UH-Languages-Menu>
    <a
        href={url}
        class={ "nav-link ${ active && "active" }"}
    >
        {label}
    </a>
</UH-Languages-Menu>

Подробнее о различных компонентах будет рассказано отдельно.