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

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

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

• Создадим свою тему с названием "lesson"

• Поменяем Главную страницу сайта. Вместо имеющегося по умолчанию текста, на ней крупными буквами выведем "Добро пожаловать!"

• Заменим логотип сайта. Вместо JohnCMS будем использовать свою .PNG картинку.

• Изменим цвет боковой панели навигации: вместо белого использовать какой-нибудь темный оттенок, подходящий по дизайну. Соответственно поменяем цвет иконок.

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

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", для Главной страницы используется именно тот файл, который мы только что скопировали в нашу тему. И все изменения в этом файле сразу будут видны на Главной странице нашего сайта.