Обсуждение документации по JohnCMS

Добавлено: 13.02.2020 / 17:54
Перенесу вопрос из привата сюда

Мне не пончтно как ты сайдбары включил, и где вызывается бутстраповские стили и прочие

У нас есть файл themes/my_theme/src/scss/app.scss
Это своеобразная точка входа для стилей.
По сайдбару получается так:
Стили сайдбара расположены в файле themes/my_theme/src/scss/_sidebar.scss
А в основном файле у нас есть импорт этого файла (это почти тоже самое что include или require в php).
@import "sidebar";
Когда мы пишем такую строку, сборщик ищет файл _sidebar.scss в той же папке что и основной файл в котором прописан импорт и включает его в текущий файл app.scss.
Нижнее подчеркивание в начале имени файла означает что это не самостоятельный файл, а импортируется где-то. Расширение файла .scss мы можем не указывать т.к. сборщик сам его добавит при поиске файла.

Добавлено: 13.02.2020 / 18:01
Бутстраповские стили подключаются там же в app.scss
Строка: @import '~bootstrap/scss/bootstrap';
Тут у нас получается так (если очень упрощенно):
символ тильды ~ по сути сокращенная замена пути к папке node_modules
Все дополнительные библиотеки находятся в папке node_modules и устанавливаются менеджером пакетов npm.
Т.к. бутстрап у нас является внешней библиотекой которая установлена с помощью npm, он и находится в папке node_modules.
Иными словами ~bootstrap/scss/bootstrap = (равно) node_modules/bootstrap/scss/bootstrap.scss

Добавлено: 13.02.2020 / 18:11
Про стили бутстрапа можно почитать тут: https://getbootstrap.com/docs/ ... ming/
Немного дополню.
У нас в шаблоне уже всё настроено так, чтобы можно было переопределить стили бутстрапа.
Стили переопределяются с помощью переменных, они располагаются в файле:
themes/my_theme/src/scss/_variables.scss

В этом файла находятся не все переменные, которые можно переопределить, а лишь часть которая нужна была нам для нашего шаблона.
Все переменные можно посмотреть в файле node_modules/bootstrap/scss/_variables.scss
Чтобы переопределить какую-то переменную, копируйте её с этого файла в файл _variables.scss со своей темой.

Для начала если не всё пока понятно, можно не заморачиваться с переменными, а просто писать обычный css код и перебивать значения нужных вам стилей.

Что то трудновато, подскажите как фон body поменять? Свойства берется из какогото reboot.scss.
В папке my_theme/src/scss/ создал файл _reboot.scss и дал значение body{backgraund: #000; }, прописал @import "reboot"; в app.scss
Обновил страничку но нечего не меняется....

# ayzek (13.02.2020 / 20:47)
Что то трудновато, подскажите как фон body поменять? Свойства берется из какогото reboot.scss.
В папке my_theme/src/scss/ создал файл _reboot.scss и дал значение body{backgraund: #000; }, прописал @

Открой файл _variables.scss и в нем измени $body-bg: #f4f3ef;
А твой ребут не подтянулся потому что backgraund неправильно написано. background надо.
Твой способ тоже будет работать.
Только импорт сделай самым последним (после всех остальных импортов).

# Simba (13.02.2020 / 21:01)
Открой файл _variables.scss и в нем измени $body-bg: #f4f3ef;
А твой ребут не подтянулся потому что backgraund неправильно написано. background надо.
Твой способ тоже будет работать.
Только импорт

background я тут не правильно написал а там всё правильно.

# ayzek (13.02.2020 / 21:06)
background я тут не правильно написал а там всё правильно.

Тогда background-color попробуй. В стилях он задан через это свойство

# Simba (13.02.2020 / 21:01)
Только импорт сделай самым последним (после всех остальных импортов).

У самого последнего приоритет самый высокий?

# ayzek (13.02.2020 / 21:08)
У самого последнего приоритет самый высокий?

Обычно да, но там не только от этого зависит. Если прям очень сильно надо перебить, нужно !important дописывать и селекторы дополнительно указать если хочешь перебить другой important. Но у нас important вроде почти не используется нигде, так что до этого не должно дойти)

Бутстраповские стили подключаются там же в app.scss
Строка: @import '~bootstrap/scss/bootstrap';

А когда node.js ну установлен откуда будет тянуть?

Добавлено: 14.02.2020 / 12:35

# ayzek (14.02.2020 / 12:29)
А когда node.js ну установлен откуда будет тянуть?

Будет тянуть из папки themes/my_theme/assets/css/app.css themes/my_theme/assets/js/app.js
После сборки все scss и js файлы попадают в папку assets.
Т.е. то что в папке src тебе по сути требуется только для упрощения разработки. Когда сборщик отрабатывает, он собирает все исходные файлы в один, сжимает их подгоняет некоторые свойства под разные версии браузеров если это необходимо и сохраняет.

Добавлено: 14.02.2020 / 12:36
Браузер папку src не использует, это только для разработки. Когда ты открываешь сайт, у тебя открываются уже собранные файлы css и js.

Simba, понятно.
Ещё один вопрос.
Скажем есть у меня html шаблон и хочу его адаптировать под Джон мне обязательно то что у него на <head> прописать на движке?
пример ниже.
p.s
Прости что достаю с глупыми вопросами. Со временем оказывается я очень отдалился от всего этого.