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

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

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

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

{% hint style="danger" %}

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

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

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

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

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

{% hint style="info" %}
Инструкция будет дополнена.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.johncms.com/master/shablony/sozdanie-sobstvennogo-shablona.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.