Изменение стилей шаблона

Начиная с JohnCMS 9.0.0 в системе используются современные средства для сборки файлов стилей и скриптов. Вы можете конечно не использовать эти средства, но они существенно облегчают разработку после того как вы разберетесь с ними.

Давайте разберемся как же нам теперь работать с нововведениями... Для работы сборщика нам понадобится Node.js. Вы можете скачать его с официального сайта https://nodejs.org/ru/ Скачайте и установите Node.js на ваш компьютере. После установки перезагрузите компьютер. Установите JohnCMS на своем компьютере если ещё не установили.

Давайте разберемся где у нас подключаются стили и js и начнем делать свою тему на основе этого.

Откроем файл themes/default/templates/system/layout/default.phtml Как вы наверное догадались это основной шаблон нашего сайта.

Вверху найдем строчку:

<link rel="stylesheet" href="<?= $this->asset('css/app.css', true) ?>">

Эта строка у нас подключает css файл из папки themes/default/assets/css/app.css

Внизу строчку:

<script src="<?= $this->asset('js/app.js', true) ?>"></script>

Эта строчка подключает javascript из папки themes/default/assets/js/app.js

Если мы откроем эти файлы, то увидим там много кода в одну строку. Это нормально. Эти файлы собираются сборщиком и сжимаются для ускорения загрузки браузером пользователей. Как вы наверное уже догадались, эти файлы редактировать не нужно т.к. их собирает сборщик.

Давайте разберемся со сборщиком. Настройка сборщика производится в файле /webpack.mix.js (в корне сайта). Давайте откроем его и посмотрим что там есть. Найдем там 2 строчки которые там нужны:

mix.js('themes/default/src/js/app.js', 'themes/default/assets/js')
    .sass('themes/default/src/scss/app.scss', 'themes/default/assets/css')

Что-то знакомое тут, не правда ли? Давайте разберемся, что у нас тут для чего.

mix.js('themes/default/src/js/app.js', 'themes/default/assets/js')

Эта строчка говорит сборщику чтобы он взял файл по пути themes/default/src/js/app.js произвел все необходимые операции с ним и положил его в папку themes/default/assets/js. Т.к. во втором параметре мы явно не указали название файла, сборщик соберет файл и сохранит с таким же именем что и исходный файл т.е. app.js. В итоге получится так: themes/default/assets/js/app.js

Посмотрим на вторую строку

.sass('themes/default/src/scss/app.scss', 'themes/default/assets/css')

В этой строке мы говорим сборщику чтобы он взял файл themes/default/src/scss/app.scss, преобразовал его в пригодный для браузера вид, сжал и положил его в папку themes/default/assets/css. Т.к. название файла явно не указали, сборщик назовет файл так же как и исходный, но расширение укажет css. т.е. app.css. В итоге получится так: themes/default/assets/css/app.css

Теперь мы разобрались как у нас попадают файлы app.js и app.css в нужные папки.

Давайте теперь создадим свою тему и настроим сборщик так, чтобы он собирал ещё и стили и скрипты в нашей теме. Создаем в папке themes подпапку с нашей темой my_theme Из папки с темой default давайте скопируем 2 папки. src и assets На этом наша тема готова к сборке. Теперь давайте расскажем о ней сборщику и соберем наши стили и скрипты.

Открываем файл /webpack.mix.js Вставим после строки

mix.sourceMaps(true, 'source-map');

следующие 2 строки:

mix.js('themes/my_theme/src/js/app.js', 'themes/my_theme/assets/js')
    .sass('themes/my_theme/src/scss/app.scss', 'themes/my_theme/assets/css');

Мы видим тут те же самые пути, которые рассматривали выше, за исключением папки с темой. Это наша новая папка с темой, которую мы создали.

На этом сборщик настроен и уже будет работать.

Давайте откроем командную строку, перейдем в папку с установленным johncms для этого наберите cd и путь к папке в которой установлен johncms. После этого давайте установим зависимости и запустим сборщик. Выполните команду npm install Эта команда установит bootstrap и прочие библиотеки, необходимые для работы.

После этого выполните команду npm run watch

Эта команда соберет app.js и app.css и будет следить за изменением исходных файлов и пересобирать app.js и app.css когда вы изменяете исходные файлы. В результате её выполнения вы должны увидеть следующее:

        Asset                          Size                         Chunks                   Chunk Names
themes/default/assets/css/app.css      258 KiB  /themes/default/assets/js/app  [emitted]        /themes/default/assets/js/app
themes/default/assets/css/app.css.map  295 KiB  /themes/default/assets/js/app  [emitted] [dev]  /themes/default/assets/js/app
themes/my_theme/assets/css/app.css     258 KiB  /themes/default/assets/js/app  [emitted]        /themes/default/assets/js/app
themes/my_theme/assets/css/app.css.map 295 KiB  /themes/default/assets/js/app  [emitted] [dev]  /themes/default/assets/js/app
 + 4 hidden assets

Давайте теперь разбираться в структуре css и js. Откроем файл: themes/my_theme/src/js/app.js Этот файл является основным и в нем подключаются все дополнительные файлы. Все дополнительные файлы лежат в той же папке что и основной файл. Вы можете открывать их, редактировать или смотреть что в них находится.

Откроем файл: themes/my_theme/src/scss/app.scss так же как и app.js этот файл является основным файлом в котором подключаются все дочерние.

Давайте посмотрим файл и найдем наш сайдбар чтобы поменять цвет. Найдем строки

// Левое меню
@import "sidebar";

Эта строка подключает файл sidebar.scss из той же папки что и app.scss Давайте откроем файл sidebar.scss В этом файле мы видим практически привычный CSS код. Но он поддерживает вложенность селекторов и прочие возможности. Вы можете подробнее прочитать про SCSS (SASS) на просторах интернета или спросить у нас на форуме.

И так, давайте поменяем всё таки цвет нашего меню. Цвет меню задан прямо во второй строке:

background-color: #ffffff;

Меняем код цвета и сохраняем файл. После сохранения, сборщик пересоберет app.css и вы увидите изменения на сайте.

Обратите внимание, что команда npm run watch выполняет сборку, но не выполняет сжатие CSS и JS файлов для ускорения работы. Перед тем, как вы захотите выгрузить изменения на сайт, выполните команду npm run prod она соберет файлы и выполнить минификацию. После этого размер файлов будет меньше.

Примечание: После создания темы, не забудьте зайти в настройки и выбрать новую тему :)