Учимся работать с MF. Подвал. Дизайн
15-06-2021Время чтения ~ 7 мин.Шаблоны для MaxSite CMS 3532
Подвал — ещё один элемент практически любого сайта. Обычно подвал состоит из двух блоков — верхний повторяет информацию из шапки и добавляет ссылки на важные страницы, а также соц.сети. А нижний блок содержит техническую информацию и копирайты. В принципе не важно сколько будет блоков в подвале - это зависит от тематики сайта.
В MF для подвала есть один компонент — FooterCopyStat, который предназначен для вывода «технической» информации. Он имеет несколько опций. «Текст для вывода» используется для размещения html-кода, включая замены на текущий год, название сайта и ссылки на вход/логин. Другая опция «Контейнер (css-классы)» нужна для того, чтобы поменять оформление этого блока. По умолчанию это темный фон и светлые тексты. То есть компонент FooterCopyStat позволяет настраивать свой вывод в больших пределах.
Раньше в шаблоне были и другие компоненты подвала, но теперь они перекочевали в обычные модули. Таким образом, чтобы подключить модуль подвала, нужно использовать тот же подход, как мы делали с шапкой и компонентом module1/2.
Проще всего воспользоваться страницей сайта ваш-сайт/mfstore, где доступен предварительный просмотр модулей.
Выбираем подходящий модуль и нажимаем кнопку «Скопировать этот модуль в modules».
Получим код вставки, но поскольку мы пользуемся компонентом module2, то будет достаточно только названия модуля. Вставляем его в компонент и подвал появится на сайте.
Обратите внимание, что часть модулей подвала содержит динамический контент. Это вывод последних записей, меток или рубрик. В таких модулях используется php-код соответствующих плагинов. Другие модули — статичные — в них используется обычный HTML. C ними работать немного проще.
Редактирование модуля подвала точно такое же, как и любого другого модуля — через страницу «Файлы».
Во многих модулях используется разметка Simple. Она достаточно проста для понимания, но главное, что с ней несколько проще работать, чем писать полные html-тэги и классы.
Дальше вы меняете тексты и ссылки в файле на свои.
Этот подход, когда вы вначале выбираете наиболее подходящий модуль, копируете его в modules, а потом редактируете содержимое — это типовой вариант работы с MF. Вы можете точно также разместить любой другой модуль MF.
Для примера разместим в подвале вначале footer/4col-1, а под ним компонент FooterCopyStat. Получится примерно так:
Блоки имеют одинаковый фон — это класс bg-primary800, поэтому они «слились». Давайте немного затеним нижний. Для этого идём в его опцию «Контейнер (css-классы)» и меняем класс на bg-primary850.
При этом, заметьте, мы ещё не работаем с дизайном сайта как таковым. Цвет primary — это из Material Design, который предоставляет Berry CSS. По сути мы пока даже не знаем что это такое. Пусть так и останется, но теперь перейдем в настройки шаблона и изменим опцию «Дизайн шаблона» на cyan (можно другой, на ваш вкус). Обновим сайт и убедимся, что все цвета автоматом поменялись:
Существуют разные подходы к построению дизайна. В MF используется концепция Material Design от Google. Смысл её достаточно простой. Вместо того, чтобы создавать точечные фиксированные цвета, используются несколько палитр. Основная обычно называется primary, дополнительная secondary. Также бывает акцентная — у нас это tertiary.
Перейдите на страницу ваш-сайт/mfdesign, где можно посмотреть все доступные цвета вашего шаблона.
Для указания цвета используются классы Berry CSS — вот ссылка на документацию.
В чём преимущество Material Design?
В Berry также доступны фиксированные палитры, например red, cyan и т.д. Например мы хотим сделать текст красным, поэтому будем использовать класс t-red600. Это фиксированный цвет, который сохранится при смене любого другого дизайна шаблона. Таким образом, чтобы поменять цвет на другой, нужно будет обращаться к html-коду и там указывать другой css-класс.
Обычно цветовой дизайн выполняется в монохромной палитре: когда используется один цветовой тон, а его разнообразие получается за счёт изменения яркости. Каждый css-класс указывает на значение этой яркости: от 50 (светлее) до 950 (темнее). Например t-red300 и t-red800. Такой подход позволяет использовать цвета сайта в едином стиле, что делает его дизайн красивым и опрятным.
Второй цвет вводится для контрастности. Также есть разные подходы — можно использовать математические модели, которые используют смещение оттенка на определённый градус по цветовому кругу, либо подобрать дизайн на глазок. Таким образом можно например в шапке использовать bg-blue700 для основного фона и bg-indigo100 для дополнительного.
Но такой вариант не самый удобный, поскольку это всё равно фиксированные цвета и, если мы захотим сменить общий дизайн на какой-то другой оттенок, то придётся редактировать и все остальные классы. Представьте себе, что у вас 20 модулей на главной и все их придётся менять. Вот здесь на помощь и приходит Material Design с его палитрами primary и secondary.
В каждом цветовом дизайне эти цвета имеют другой оттенок, но css-классы при этом не меняются. Например t-primary500 в дизайне blue (это дефолтный дизайн в MF) будет иметь синие оттенки, а в дизайне red — уже красные. То есть вы просто переключаете дизайн в админ-панели, что автоматом изменит оттенки primary и secondary.
Попробуйте изменить дизайн шаблона и посмотрите на странице mfdesign, как меняются палитры primary и secondary.
Поэтому, когда вы начнёте менять дизайн шаблона, то нужно ориентироваться именно в этих палитрах. Схема очень простая — вначале вы выбираете подходящий готовый дизайн, а уже потом меняете всё остальное. Например вас сайт должен быть в зелёных оттенках — выбираете дизайн green, а уже под него изображения, цвета и т.д. Или наоборот — у вас есть готовые изображения — вы под него подбираете дизайн сайта.
Как создаются цветовые палитры?
В Berry CSS палитры формируются автоматически на основе двух параметров: цветовой оттенок (hue) и насыщенности (saturation), а яркость уже строится автоматом. Это цветовая модель HSL. Поэтому все доступные палитры, будь то red, blue или primary — все они задаются именно в таком варианте.
Можно ли изменить или добавить свои цвета?
Да, можно. Но это задача для вебмастера, поскольку потребует использования Sass, который уже компилируется в CSS. В конфигурационном файле задаются нужные значения и названия цветов, после компиляции они появляются в css-файле.
Если же нужно сделать новый дизайн, например какой-то цвет не подходит, то делается копия ближайшего дизайна (они в каталоге sass/themes) под своим именем и дальше по той же схеме — конфигурация, компиляция и выбираем новый дизайн в настройках админ-панели.
Как изменить типографику?
Чаще встречается другая задача — дизайн устраивает, но нужно поменять какие-то отдельные элементы типографики: ссылки, заголовки, основной шрифт и т.п. В MF для этого не нужно менять css-файл, а всё это делается прямо в админ-панели.
Есть опция «CSS стили», которая подключается к каждой странице сайта в секции HEAD — здесь размещаются собственные css-стили. В Berry для управления многими элементами используются css-переменные, которые мы размещаем в этой опции.
Например:
:root {
--body-font-family: "Exo 2";
--body-size-base: 17px;
--layout-max-width: 1400px
}
Здесь для основного шрифта сайта используется шрифт Exo 2 (нужно его ещё отметить для использования в Шаблон-Шрифты), размер 17px, а также максимальный размер контейнера сайта 1400px.
CSS-переменных в Berry довольно много, поэтому с их помощью вы можете настраивать дизайн сайта в широких пределах. Посмотрите документацию, чтобы в этом убедиться. На этой странице приведены примеры для Sass, но имена переменных совпадают с CSS, только вместо префикса «$» нужно использовать «--». Например для изменения размера H1 используется $h1-font-size, значит у нас будет так:
:root {
--h1-font-size: 2.2rem;
}
Все css-переменные размещаются в :rootЯ показываю очень простые примеры для демонстрации возможностей MF (в Default, кстати, это тоже будет работать). Да, это уже уровень настоящего CSS, но здесь не требуются специальные знания и вполне достаточно документации Berry.
Итак. Когда вы начинаете работать с MF, то вначале настраиваете основной вывод, потом шапку, подвал, и только после этого попробуйте подобрать подходящий цветовой дизайн. Дальше вы уже настраиваете через css-переменные отдельные элементы типографики. Уже этих вещей будет достаточно, чтобы ваш сайт не стал похож на остальные. :-)
Когда вы освоитесь с этими задачами, можно будет двигаться дальше.