Учимся работать с MF. Подвал. Дизайн
15-06-2021Время чтения ~ 6 мин.Шаблон MF для MaxSite CMS 3753
Подвал — ещё один элемент практически любого сайта. Обычно подвал состоит из двух блоков — верхний повторяет информацию из шапки и добавляет ссылки на важные страницы, а также соц.сети. А нижний блок содержит техническую информацию и копирайты. В принципе не важно сколько будет блоков в подвале - это зависит от тематики сайта.
В 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.
Для указания цвета используются классы 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-переменные отдельные элементы типографики. Уже этих вещей будет достаточно, чтобы ваш сайт не стал похож на остальные. :-)
Когда вы освоитесь с этими задачами, можно будет двигаться дальше.