# HTML


В качестве шаблонизатора для html можно использовать [jade](http://jade-lang.com) или [handlebars](http://handlebarsjs.com). Шаблонизатор выбирается в [tars-config.js](options.md#templater).

Можно использовать любые средства данных шаблонизаторов. Если вы привыкли к ламповому html, то смело выбирайте handlebars и просто пишите html как раньше.

Если не требуется компиляция определенной страницы, то можно просто добавить '_' в начало названия страницы, и она не будет скомпилирована.

Если необходимо подключить файлы из директории static (картинки, js), то необходимо пользоваться плейсхолдером [%=staticPrefix=%](options.md#staticprefix). Тогда подключение картинки в контенте будет выглядеть следующим образом (в примере используется handlebars):

```html
<img src="%=staticPrefix=%img/content/example.jpg"/>
```

Для подключения картинки в css необходимо использовать иной плейсхолдер – [">%=staticPrefixForCss=%](options.md#staticprefixforcss).

Очень важной фичей является использование различных данных в одном шаблоне. Например, у нас есть модуль head, в котором находится все, что стоит поместить в тег head (различные meta, тайтлы и т.д.) Предположим, что на каждой  странице должен быть свой title. Создавать копии одного и того же модуля, которые отличаются только одной строчкой — не есть целесообразно. Было бы логично отделить данные от представления.

Поэтому в папке с модулем есть папка `data`, в которой находится js-файл с данными данного модуля.

Пример данных можно найти в модуле _template:

```js
moduleName: {
    dataType: {
        property: value
    }
}
```

Подключение модулей с различными данными выглядит по-разному в jade и handlebars.


##Работа с модулями и данными в handlebars

Подключение модуля на странице:

```handlebars
{{> moduleFolderName/moduleName}}
```

Подключение модуля с передачей данных в шаблон:

```handlebars
{{> moduleFolderName/moduleName moduleName.dataType}}
```

Пример подключения модуля head с дефолтными данными:

```handlebars
{{> head/head head.defaults}}
```


Внутри самого модуля данные выводятся средствами handlebars:

```handlebars
<title>{{title}}</title>
```

Если вы не передали данные в модуль, то модуль получает доступ в глобальный контекст. Иными словами, если мы подключим модуль head без передачи данных, то в самом шаблоне мы можем получить доступ к полу title следующим образом:

```javascript
// head/data/data.js
head: {
    defaults: {
        title: 'Default title'
    }
}
```

index.html
```handlebars
{{> head/head}}
```

head.html
```handlebars
<title>{{head.defaults.title}}</title>
```

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

Handlebars известен, как очень простой шаблонизатор, logicless. Но использовать handlebars в статической верстке в таком виде не очень удобно. Поэтому были добавлены различные хелперы, расширяющие возможности handlebars.<br/>
Описание хелперов можно прочесть [здесь](handlebars-helpers.md).


## Работа с модулями и данными в jade

При использовании jade, каждый модуль — миксин, который подключается в файл со страницей. Миксины в jade могут принимать данные, этим и воспользуемся.

Подключение модуля на странице:

```jade
include ../modules/moduleFolderName/moduleName  // В начале шаблона страницы (пример — index.jade)

+moduleName()  // Подключение модуля
```

Подключение модуля с передачей данных в шаблон:

```jade
include ../modules/moduleFolderName/moduleName  // В начале шаблона страницы (пример — index.jade)

+moduleName(moduleName.dataType)  // Подключение модуля
```

Пример подключения модуля head с дефолтными данными:

```jade
include ../modules/head/head
+head(head.defaults)
```

Внутри самого модуля данные выводятся средствами jade (например, модуль head):

```jade
mixin head(data)
    <title>#{data.title}</title>
```

Можно использовать любые средства, доступные в jade.