---
metadata:
  - name: generator
    content: Diplodoc Platform v5.50.3
alternate:
  - https://divkit.tech/docs/en/concepts/templates.md
  - https://divkit.tech/docs/ru/concepts/templates.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt

# Шаблоны

## Описание {#description}

Шаблоны нужны, чтобы избавиться от дублирования кода и не описывать каждую карточку с нуля. При использовании шаблона можно указывать и переопределять все поля родительского элемента.

Если вы часто создаете карточки с одинаковым или похожим содержанием, то стоит сохранить их в виде шаблонов.

Шаблоны помогут вам:

- тратить меньше времени на создание карточек;

- сократить размер приходящего JSON;
- уменьшить количество возможных ошибок и опечаток при создании карточек.



{% cut "Без шаблона" %}


```json translate=no
{
  "states": {
    "state1": {
      "data": {
        "type": "container",
        "direction": "vertical",
        "paddings": {
          "left": 4,
          "top": 4,
          "right": 4,
          "bottom": 4
        },
        "items": [
          {
            "type": "image",
            "width": {
              "type": "fixed",
              "value": "40",
              "unit": "dp"
            },
            "height": {
              "type": "fixed",
              "value": "40",
              "unit": "dp"
            },
            "image_url": "https://image.storage.net/icon.png"
          },
          {
            "type": "text",
            "font_size": 16,
            "text": "Hello, World!"
          }
        ]
      }
    }
  }
}
```


{% endcut %}

{% cut "С шаблоном" %}


```json translate=no
{
  "templates": {
    "image-with-text": {
      "type": "container",
      "direction": "vertical",
      "paddings": {
        "left": 4,
        "top": 4,
        "right": 4,
        "bottom": 4
      },
      "items": [
        {
          "type": "image",
          "width": {
            "type": "fixed",
            "value": "40",
            "unit": "dp"
          },
          "height": {
            "type": "fixed",
            "value": "40",
            "unit": "dp"
          },
          "$image_url": "icon_url"
        },
        {
          "type": "text",
          "font_size": 16,
          "$text": "title_text"
        }
      ]
    }
  },
  "states": {
    "state1": {
      "data": {
        "type": "image-with-text",
        "icon_url": "https://image.storage.net/icon.png",
        "title_text": "Hello, World!"
      }
    }
  }
}
```


{% endcut %}



## Примеры {#example}

Шаблоны можно использовать в сложных элементах (например, в контейнере с дочерними элементами). Тогда, чтобы изменить поля дочерних элементов, их нужно переименовать в параметрах: `$имя_поля_в_элементе: новое_имя_поля`

Отредактируем тип элемента `gallery_item` с полем `item_image_url`.

**Пример переименования**

```json translate=no
{
  "templates": {
    "gallery_item": "container",
    <...>
    "items": [
      {
        "type": "image",
        "$image_url": "item_image_url"
      }
    ]
  }
}
```

**Пример использования**

```json translate=no
{
  "type": "gallery",
  <...>
  "items": [
    {
      "type": "gallery_item",
      "item_image_url": "https://<...>"
    }
  ]
}
```


## Особенности использования {#restiriction}

Шаблоны можно наследовать друг от друга. Они подчиняются всем тем же правилам, что и при создании обычного шаблона.

### Разрешение параметров в цепочке шаблонов

При разрешении параметров в цепочке шаблонов поведение платформ различается: на **Android и iOS** значение свойства распространяется вниз по всей цепочке вложенных шаблонов, на **Web** каждый шаблон получает только то значение, которое передал его прямой вызывающий.

{% cut "Пример" %}

```json translate=no
{
  "templates": {
    "root": {
      "type": "container",
      "items": [
        {
          "type": "parent",
          "textRef": "parent text"
        }
      ]
    },
    "parent": {
      "type": "container",
      "items": [
        {
          "type": "child",
          "textRef": "Child text"
        }
      ]
    },
    "child": {
      "type": "text",
      "$text": "textRef"
    }
  },
  "card": {
    "log_id": "test",
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "root",
          "textRef": "Root text"
        }
      }
    ]
  }
}
```

{% endcut %}

В этом примере `child` получает `textRef` из трёх уровней: `"Root text"` (из карточки), `"parent text"` (из шаблона `root`), `"Child text"` (из шаблона `parent`).

- **iOS и Android:** отобразится `"Root text"` — значение из карточки распространяется вниз по всей цепочке.
- **Web:** отобразится `"Child text"` — шаблон использует значение от своего прямого вызывающего (`parent`).

{% note warning %}

Избегайте передачи одного и того же параметра на нескольких уровнях цепочки шаблонов — поведение зависит от платформы и может быть непредсказуемым.

{% endnote %}

Ограничения в шаблонах:

- Нельзя использовать системные имена в названии шаблонов и переменных. Например, нельзя завести шаблон `container` или поле `text`.
- Можно шаблонизировать только базовые визуальные элементы.
- У шаблона обязательно должно быть поле `type`.

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->