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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```javascript
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**

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

```javascript
.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** \
Вставим после строки

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

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

```javascript
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.\
После этого давайте установим зависимости и запустим сборщик.\
Выполните команду\
\&#xNAN;**`npm install`**\
Эта команда установит bootstrap и прочие библиотеки, необходимые для работы.

После этого выполните команду\
\&#xNAN;**`npm run watch`**

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

```bash
        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 этот файл является основным файлом в котором подключаются все дочерние.

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

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

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

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

```css
background-color: #ffffff;
```

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

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

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