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

Начиная с JohnCMS 9.0.0 в системе используются современные средства для сборки файлов стилей и скриптов.
Вы можете конечно не использовать эти средства, но они существенно облегчают разработку после того как вы разберетесь с ними.
Давайте разберемся как же нам теперь работать с нововведениями...
Для работы сборщика нам понадобится Node.js. Вы можете скачать его с официального сайта https://nodejs.org/ru/
Скачайте и установите Node.js на ваш компьютере. После установки перезагрузите компьютер.
Установите JohnCMS на своем компьютере если ещё не установили.
Давайте разберемся где у нас подключаются стили и js и начнем делать свою тему на основе этого.
Откроем файл 
themes/default/templates/system/layout/default.phtml
Как вы наверное догадались это основной шаблон нашего сайта.
Вверху найдем строчку:
1
<link rel="stylesheet" href="<?= $this->asset('css/app.css', true) ?>">
Copied!
Эта строка у нас подключает css файл из папки themes/default/assets/css/app.css
Внизу строчку:
1
<script src="<?= $this->asset('js/app.js', true) ?>"></script>
Copied!
Эта строчка подключает javascript из папки themes/default/assets/js/app.js
Если мы откроем эти файлы, то увидим там много кода в одну строку. Это нормально. Эти файлы собираются сборщиком и сжимаются для ускорения загрузки браузером пользователей.
Как вы наверное уже догадались, эти файлы редактировать не нужно т.к. их собирает сборщик.
Давайте разберемся со сборщиком.
Настройка сборщика производится в файле /webpack.mix.js (в корне сайта).
Давайте откроем его и посмотрим что там есть.
Найдем там 2 строчки которые там нужны:
1
mix.js('themes/default/src/js/app.js', 'themes/default/assets/js')
2
    .sass('themes/default/src/scss/app.scss', 'themes/default/assets/css')
Copied!
Что-то знакомое тут, не правда ли?
Давайте разберемся, что у нас тут для чего.
1
mix.js('themes/default/src/js/app.js', 'themes/default/assets/js')
Copied!
Эта строчка говорит сборщику чтобы он взял файл по пути themes/default/src/js/app.js произвел все необходимые операции с ним и положил его в папку themes/default/assets/js. Т.к. во втором параметре мы явно не указали название файла, сборщик соберет файл и сохранит с таким же именем что и исходный файл т.е. app.js. В итоге получится так: themes/default/assets/js/app.js
Посмотрим на вторую строку
1
.sass('themes/default/src/scss/app.scss', 'themes/default/assets/css')
Copied!
В этой строке мы говорим сборщику чтобы он взял файл 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 
Вставим после строки
1
mix.sourceMaps(true, 'source-map');
Copied!
следующие 2 строки:
1
mix.js('themes/my_theme/src/js/app.js', 'themes/my_theme/assets/js')
2
    .sass('themes/my_theme/src/scss/app.scss', 'themes/my_theme/assets/css');
Copied!
Мы видим тут те же самые пути, которые рассматривали выше, за исключением папки с темой. Это наша новая папка с темой, которую мы создали.
На этом сборщик настроен и уже будет работать.
Давайте откроем командную строку, перейдем в папку с установленным johncms для этого наберите cd и путь к папке в которой установлен johncms.
После этого давайте установим зависимости и запустим сборщик.
Выполните команду
npm install
Эта команда установит bootstrap и прочие библиотеки, необходимые для работы.
После этого выполните команду
npm run watch
Эта команда соберет app.js и app.css и будет следить за изменением исходных файлов и пересобирать app.js и app.css когда вы изменяете исходные файлы.
В результате её выполнения вы должны увидеть следующее:
1
        Asset                          Size                         Chunks                   Chunk Names
2
themes/default/assets/css/app.css      258 KiB  /themes/default/assets/js/app  [emitted]        /themes/default/assets/js/app
3
themes/default/assets/css/app.css.map  295 KiB  /themes/default/assets/js/app  [emitted] [dev]  /themes/default/assets/js/app
4
themes/my_theme/assets/css/app.css     258 KiB  /themes/default/assets/js/app  [emitted]        /themes/default/assets/js/app
5
themes/my_theme/assets/css/app.css.map 295 KiB  /themes/default/assets/js/app  [emitted] [dev]  /themes/default/assets/js/app
6
 + 4 hidden assets
Copied!
Давайте теперь разбираться в структуре css и js.
Откроем файл: themes/my_theme/src/js/app.js
Этот файл является основным и в нем подключаются все дополнительные файлы. 
Все дополнительные файлы лежат в той же папке что и основной файл. Вы можете открывать их, редактировать или смотреть что в них находится.
Откроем файл: themes/my_theme/src/scss/app.scss
так же как и app.js этот файл является основным файлом в котором подключаются все дочерние.
Давайте посмотрим файл и найдем наш сайдбар чтобы поменять цвет.
Найдем строки
1
// Левое меню
2
@import "sidebar";
Copied!
Эта строка подключает файл sidebar.scss из той же папки что и app.scss
Давайте откроем файл sidebar.scss
В этом файле мы видим практически привычный CSS код. Но он поддерживает вложенность селекторов и прочие возможности. Вы можете подробнее прочитать про SCSS (SASS) на просторах интернета или спросить у нас на форуме.
И так, давайте поменяем всё таки цвет нашего меню. Цвет меню задан прямо во второй строке:
1
background-color: #ffffff;
Copied!
Меняем код цвета и сохраняем файл.
После сохранения, сборщик пересоберет app.css и вы увидите изменения на сайте.
Обратите внимание, что команда npm run watch выполняет сборку, но не выполняет сжатие CSS и JS файлов для ускорения работы.
Перед тем, как вы захотите выгрузить изменения на сайт, выполните команду npm run prod она соберет файлы и выполнить минификацию. После этого размер файлов будет меньше.
Примечание:
После создания темы, не забудьте зайти в настройки и выбрать новую тему :)

Шаблоны - Previous

Структура стандартного шаблона

Next - Шаблоны

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

Last modified 8mo ago

Export as PDF

Copy link