<?php
/**
 * @var Johncms\Counters $counters
 * @var Johncms\NewsWidget $news
 * @var int $rights
 */

$this->layout('system::layout/default', ['title' => d__('system', 'Welcome')])
?>


<div class="jumbotron shadow bg-white mt-3">
    <h1 class="display-4 fw-bold">EXAMPLE</h1>
    <p class="lead">
        Вы смотрите тему оформления "example"
    </p>
</div>


<h1 class="fw-bold mt-5">Как писать свои темы?</h1>

<p>
    Данное руководство предназначено для верстальщиков / дизайнеров, которые хотят создать свою собственную тему оформления.<br>
    Для программистов создателей модулей, будет отдельная документация по разработке.
</p>

<div class="alert alert-danger shadow" role="alert">
    <h2>Внимание!</h2>
    <p>
        У движка есть тема "<strong>default</strong>", которая является системной, поставляется вместе с дистрибутивом и находится в папке <code>/themes/default</code>.
        В этой теме находятся все необходимые для работы файлы по умолчанию: шаблоны, стили, картинки, скрипты и т.д.
        Также, каждый отдельный модуль может иметь свою папку с шаблонами <code>/module_name/templates</code>, или другими файлами общего доступа <code>/assets/modules/module_name</code>.
    </p>
    <p>
        <strong>Нельзя редактировать, или удалять файлы в этих папках, нельзя ничего туда добавлять</strong>,
        иначе Вы потеряете совместимость с последующими обновлениями, или же в работе движка могут возникнуть ошибки, вплоть до полной потери работоспособности.
    </p>
</div>

<h2 class="fw-bold mt-5">Общие понятия</h2>
<ul>
    <li>
        <strong>Темой</strong> будет считаться любая папка, созданная Вами в <code>/themes</code>.<br>
        Для исключения проблем совместимости с различными операционными системами, в имени папки рекомендуется использовать только латинские буквы.
    </li>
    <li>
        В каталоге с темой есть обязательные папки <code>/assets</code> в которой размещаются стили, картинки и JS, и <code>/templates</code>, где соответственно размещаются шаблоны.
        Пустые папки, если в них ничего не копируется, создавать не нужно.
    </li>
    <li>
        Вы копируете в свою тему только те файлы, которые собираетесь менять.
    </li>
    <li>
        При выборе темы, система сама определяет, есть ли в ней запрошенный файл (шаблон, стиль, или др.).<br>
        Если есть, будет использован он, если нет, то будет использован файл из темы <strong>default</strong>.
    </li>
</ul>

<h2 class="fw-bold mt-4">Создаем свою тему</h2>
<div class="ms-4">
    <p>
        Учиться лучше всего на практике, поэтому давайте создадим свою первую несложную тему оформления.
        Начнем с задачи, которая изначально возникнет практически у всех, кто установит себе JohnCMS: мы будем менять Главную страницу сайта и логотип.
        Ниже будут даны пошаговые инструкции.
    </p>

    <h3>Исходная задача</h3>
    <p>
        Перед тем, как взяться за создание своей темы, Вы должны четко знать, что хотите сделать и составить примерный план предполагаемых работ.
        Давайте же для нашего урока мы тоже создадим короткий список с техзаданием (ТЗ):
    </p>
    <ul>
        <li>Создать свою тему с названием "lesson"</li>
        <li>Поменять Главную страницу сайта. Вместо имеющегося по умолчанию текста, на ней крупными буквами должно выводиться "Добро пожаловать!"</li>
        <li>Заменить логотип сайта. Вместо JohnCMS использовать свою .PNG картинку.</li>
        <li>
            Изменить цвет боковой панели навигации: вместо белого использовать какой-нибудь темный оттенок, подходящий по дизайну.
            Соответственно поменять цвет иконок.
        </li>
    </ul>

    <h3>Условия</h3>
    <p>
        Для удобства работы, рекомендуется иметь неа своем компьютере локальный сервер (например Open Server), где должен быть установлен и настроен JohnCMS.
        В крайнем случае некторые действия можно проводить непосредственно на хостинге, однако так делать крайне не рекомендуется.
    </p>

    <h3>Пошаговая инструкция</h3>
    <ol>
        <li>
            <span class="badge badge-orange">Делаем</span>
            В папке <code>/themes</code> создаем папку <code>lesson</code>
        </li>
        <li>
            Заходим в админку движка и далее в системные настройки. Там в списке имеющихся тем мы увидим нашу <strong>lesson</strong>. Выбираем ее и жмем "Сохранить".<br>
            Теперь для нашего сайта применена тема "lesson" и все, что мы будем в ней делать, сразу же будет видно.
        </li>
        <li>
            <span class="badge badge-success">На заметку</span> <span class="badge text-bg-secondary">Откуда?</span>
            Чтоб поменять Главную страницу сайта, мы должны отредактировать ее шаблон, который находится в модуле <code>/modules/homepage</code>.<br>
            В папке с модулем есть папка <code>/templates</code> а в ней лежит файл <code>index.phtml</code> - это и есть Главная страница, этот файл нам и нужен.<br>
            Из предупреждения выше мы знаем, что <u>менять шаблон в самом модуле нельзя</u>, поэтому мы <u>должны в начале скопировать файл шаблона в свою тему</u>, а уж потом его менять.
            Не переместить, а именно скопировать, оригинал файла должен остаться на своем месте
        </li>
        <li>
            <span class="badge badge-success">На заметку</span> <span class="badge text-bg-secondary">Куда?</span>
            <code>/themes/lesson</code> - это папка с нашей темой, которую мы создали выше.
            Мы должны скопировать сюда файл <code>index.phtml</code> из модуля homepage.
            Для шаблонов в папке с нашей темой должна быть подпапка <code>templates</code>.<br>
            Чтоб не возникало конфликтов (например файл index.phtml может быть у многих модулей), в папке <code>templates</code> создается подпапка с названием
            пространства имен для шаблонов модуля (обычно совпадает с именем папки модуля) и уже в нее копируется нужный нам файл.
        </li>
        <li>
            <span class="badge badge-orange">Делаем</span>
            В папке с нашей темой <code>/themes/lesson</code> создаем подпапку <code>templates</code> а в ней подпапку с именем модуля ( в нашем случае это <code>homepage</code>) откуда мы копируем шаблон.
            В итоге должно получиться <code>/themes/lesson/templates/homepage/</code> сюда и копируем наш <code>index.phtml</code>
            <br>
            Теперь, пока у нас в админке включена наша тема "lesson", для Главной страницы используется именно тот файл, который мы только что скопировали в нашу тему.
            И все, что мы в этом файле поменяем, немедленно отразится на Главной странице нашего сайта.
        </li>
    </ol>
    <p class="lead">Пока все. Дальнейшие инструкции будем писать все вместе.</p>
</div>
