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

Начиная с 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`** она соберет файлы и выполнить минификацию. После этого размер файлов будет меньше.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.johncms.com/9.9/shablony/izmenenie-stilei-shablona.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.