Начиная с JohnCMS 9.0.0 в системе используются современные средства для сборки файлов стилей и скриптов. Вы можете конечно не использовать эти средства, но они существенно облегчают разработку после того как вы разберетесь с ними.
Давайте разберемся как же нам теперь работать с нововведениями... Для работы сборщика нам понадобится Node.js. Вы можете скачать его с официального сайта https://nodejs.org/ru/ Скачайте и установите Node.js на ваш компьютере. После установки перезагрузите компьютер. Установите JohnCMS на своем компьютере если ещё не установили.
Давайте разберемся где у нас подключаются стили и js и начнем делать свою тему на основе этого.
Откроем файл themes/default/templates/system/layout/default.phtml Как вы наверное догадались это основной шаблон нашего сайта.
Вверху найдем строчку:
Эта строка у нас подключает css файл из папки themes/default/assets/css/app.css
Внизу строчку:
Эта строчка подключает javascript из папки themes/default/assets/js/app.js
Если мы откроем эти файлы, то увидим там много кода в одну строку. Это нормально. Эти файлы собираются сборщиком и сжимаются для ускорения загрузки браузером пользователей. Как вы наверное уже догадались, эти файлы редактировать не нужно т.к. их собирает сборщик.
Давайте разберемся со сборщиком. Настройка сборщика производится в файле /webpack.mix.js (в корне сайта). Давайте откроем его и посмотрим что там есть. Найдем там 2 строчки которые там нужны:
Что-то знакомое тут, не правда ли? Давайте разберемся, что у нас тут для чего.
Эта строчка говорит сборщику чтобы он взял файл по пути themes/default/src/js/app.js произвел все необходимые операции с ним и положил его в папку themes/default/assets/js. Т.к. во втором параметре мы явно не указали название файла, сборщик соберет файл и сохранит с таким же именем что и исходный файл т.е. app.js. В итоге получится так: themes/default/assets/js/app.js
Посмотрим на вторую строку
В этой строке мы говорим сборщику чтобы он взял файл 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 Вставим после строки
следующие 2 строки:
Мы видим тут те же самые пути, которые рассматривали выше, за исключением папки с темой. Это наша новая папка с темой, которую мы создали.
На этом сборщик настроен и уже будет работать.
Давайте откроем командную строку, перейдем в папку с установленным johncms для этого наберите cd и путь к папке в которой установлен johncms.
После этого давайте установим зависимости и запустим сборщик.
Выполните команду
npm install
Эта команда установит bootstrap и прочие библиотеки, необходимые для работы.
После этого выполните команду
npm run watch
Эта команда соберет app.js и app.css и будет следить за изменением исходных файлов и пересобирать app.js и app.css когда вы изменяете исходные файлы. В результате её выполнения вы должны увидеть следующее:
Давайте теперь разбираться в структуре css и js. Откроем файл: themes/my_theme/src/js/app.js Этот файл является основным и в нем подключаются все дополнительные файлы. Все дополнительные файлы лежат в той же папке что и основной файл. Вы можете открывать их, редактировать или смотреть что в них находится.
Откроем файл: themes/my_theme/src/scss/app.scss так же как и app.js этот файл является основным файлом в котором подключаются все дочерние.
Давайте посмотрим файл и найдем наш сайдбар чтобы поменять цвет. Найдем строки
Эта строка подключает файл sidebar.scss из той же папки что и app.scss Давайте откроем файл sidebar.scss В этом файле мы видим практически привычный CSS код. Но он поддерживает вложенность селекторов и прочие возможности. Вы можете подробнее прочитать про SCSS (SASS) на просторах интернета или спросить у нас на форуме.
И так, давайте поменяем всё таки цвет нашего меню. Цвет меню задан прямо во второй строке:
Меняем код цвета и сохраняем файл. После сохранения, сборщик пересоберет app.css и вы увидите изменения на сайте.
Обратите внимание, что команда npm run watch выполняет сборку, но не выполняет сжатие CSS и JS файлов для ускорения работы.
Перед тем, как вы захотите выгрузить изменения на сайт, выполните команду npm run prod она соберет файлы и выполнить минификацию. После этого размер файлов будет меньше.
Примечание: После создания темы, не забудьте зайти в настройки и выбрать новую тему :)