> For the complete documentation index, see [llms.txt](https://docs.johncms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.johncms.com/10.0/shablony/sozdanie-sobstvennogo-shablona.md).

# Создание собственного шаблона

Давайте создадим свой первый простой шаблон.\
Начнем с задачи, которая изначально возникнет практически у всех, кто установит себе JohnCMS: мы будем менять Главную страницу сайта и логотип. Перед тем, как взяться за создание своего шаблона, давайте составим примерный план предполагаемых работ.

### **Что мы сделаем?**

* Создадим свою тему с названием "lesson"
* Поменяем Главную страницу сайта. Вместо имеющегося по умолчанию текста, на ней крупными буквами выведем "Добро пожаловать!"
* Заменим логотип сайта. Вместо JohnCMS будем использовать свою .PNG картинку.
* Изменим цвет боковой панели навигации: вместо белого использовать какой-нибудь темный оттенок, подходящий по дизайну. Соответственно поменяем цвет иконок.

{% hint style="danger" %}

#### Внимание!

У движка есть тема "**default**", которая является системной, поставляется вместе с дистрибутивом и находится в папке `/themes/default`. В этой теме находятся все необходимые для работы файлы по умолчанию: шаблоны, стили, картинки, скрипты и т.д. Также, каждый отдельный модуль может иметь свою папку с шаблонами `modules/<вендор>/<модуль>/templates`, а его собранные стили и скрипты при установке попадают в `public/modules/<алиас>`.

**Нельзя редактировать, или удалять файлы в этих папках, нельзя ничего туда добавлять**, иначе Вы потеряете совместимость с последующими обновлениями, или же в работе движка могут возникнуть ошибки, вплоть до полной потери работоспособности.
{% endhint %}

#### Пошаговая инструкция

1. В папке `/themes` создаем папку `lesson`
2. Заходим в админку и далее в системные настройки. Там в списке имеющихся тем мы увидим нашу **lesson**. Выбираем ее и нажимаем "Сохранить".\
   Теперь для нашего сайта применена тема "lesson" и все, что мы будем в ней делать, сразу же будет видно.
3. Чтобы поменять Главную страницу сайта, мы должны отредактировать ее шаблон, который находится в модуле `/modules/johncms/homepage`.\
   Публичные шаблоны модуля лежат в папке `/templates/public`, админские — в `/templates/admin`. Главная страница — это файл `/modules/johncms/homepage/templates/public/index.twig`.\
   Из предупреждения выше мы знаем, что менять шаблон в самом модуле нельзя, поэтому мы должны сначала скопировать файл шаблона в свою тему, и только потом его изменять. Не переместить, а именно скопировать, оригинал файла должен остаться на своем месте
4. Куда? `/themes/lesson` — это папка с нашей темой, которую мы создали выше. Шаблоны в теме лежат в подпапке `templates`, и внутри неё структура повторяет структуру модуля.\
   Чтоб не возникало конфликтов (файл `index.twig` может быть у многих модулей), в папке `templates` создаётся подпапка с именем модуля — его алиасом, тем самым, что стоит после `@` в имени шаблона, — и уже в неё копируется нужный файл.
5. Создаём папку `/themes/lesson/templates/homepage/public/` и копируем туда `index.twig`.\
   Теперь, пока у нас в админке включена наша тема "lesson", для Главной страницы используется именно тот файл, который мы только что скопировали в нашу тему. И все изменения в этом файле сразу будут видны на Главной странице нашего сайта. Если копия окажется неудачной, достаточно удалить файл — сайт вернётся к шаблону из темы **default**.

#### Как устроен шаблон страницы

Шаблоны пишутся на [Twig](https://twig.symfony.com/). Страница объявляет, в какой макет она вставляется, и наполняет его блоки:

```twig
{% extends '@theme/layouts/default.twig' %}

{% block content %}
    <h2>Добро пожаловать!</h2>
{% endblock %}
```

Пространства имён: `@theme` — шаблоны темы, `@admin` — вёрстка админ-панели, `@имя_модуля` — шаблоны модуля. Макет темы даёт блоки `content`, `breadcrumbs`, `sidebar_user`, `sidebar_menu`, `footer_content`, `styles` и `scripts`.

Всё, что шаблон печатает, экранируется автоматически, поэтому данные выводятся просто: `{{ переменная }}`.

{% hint style="info" %}
Живой пример темы, состоящей из одного файла, лежит в `/themes/example` — его страница рассказывает то же самое, но её можно сразу открыть в браузере, включив тему в настройках.
{% endhint %}