Учимся работать с MF. Вывод данных. Шапка

11-06-2021Время чтения ~ 10 мин.Шаблоны для MaxSite CMS 3535

Лучше всего подходить к настройке сайта последовательно. Сегодня поговорим о выводе записей и подборе шапки сайта.

Поскольку у нас MaxSite CMS, то контентная часть мало зависит от дизайна шаблона. Это позволяет переключать шаблоны для одного сайта, не меня его тексты. В этом и есть преимущество CMS перед статичными сайтами. Поэтому если у вас уже есть рабочий сайт, то сменив его шаблон на MF, вы ничего не потеряете.

Структурно контент сайта обычно состоит из:

• главной страницы (home)
• страница одиночной записи (page)
• навигационные страницы: рубрики, метки, архивы, авторы и т.д. (category, tag и т.д.)
• служебные страницы, например контакты

На начальном этапе нужно выбрать вывод одиночной записи и навигационных страниц, а для главной использовать «типовой» вариант вывода без юнитов. Делается это очень просто — достаточно снять опцию «Включить юниты для главной»:

Таким образом мы пока не занимаемся настройкой главной страницы, а её вывод будет повторять вывод рубрик, меток и т.д. Главную будем настраивать чуть позже.

Теперь переключаемся на вкладку «Шаблоны вывода», где можно настроить вариант вывода записей. Есть два вида опций «Шаблоны вывода» и «Шаблоны заголовков» (да, тавтология, однако...). Первая опция — это т.н. модульная сетка, которая задаёт взаимное расположение шапки, подвала, контента и сайдбара. «Шаблон вывода» нужен для того, чтобы иметь возможность размещать блоки сайта в окне браузера определённым образом.

Например, если нам не нужен сайдбар, то можно выбрать «no-sidebar». Если мы делаем лендинг, то можно использовать либо «landing», либо «landing0». То есть вывод на сайте будет зависеть от html-кода контентной части. Например мы хотим разместить блок так, чтобы он занимал всю ширину браузера — для этого используется «no-sidebar-full-width» и тогда поведение блоков в браузере будет зависеть уже от самого блока.

Шаблон «Обычный» — это правый сайдбар, а основной блок сайта центрируется в браузере. Именно его следует выбрать в качестве начального варианта.

«Шаблоны заголовков» делятся на full и page. Full используются везде, кроме одиночной записи.

Для одиночной записи «Шаблон заголовков» отвечает непосредственно за вывод заголовка записи. Это название, рубрики, метки и прочая информация. Эти варианты размещаются в info-top-файлах и именно они и выбираются в опции.

Откройте любую одиночную запись и подберите наиболее подходящий «Шаблон заголовков». Он будет использоваться по умолчанию для всех одиночных записей.

Если же какая-то запись требует другого шаблона, то используйте одноимённую опцию при её редактировании.

На самом деле шаблон заголовков — это один из самых часто меняемых файлов: меняются иконки, цвета и размеры текста. Но, чтобы это сделать, нужно либо редактировать сам файл, либо сделать её копию. Пока мы на начальном этапе настройки сайта, такие вещи лучше отложить на потом, как минимум до отладки цветового дизайна. Поэтому сейчас просто выбираем наиболее близкий к задумке вариант.

Full-страницы устроены немного сложнее. По умолчанию используется «full.php» — вывод заголовка, миниатюры и начала текста записи. Файл «full2.php» делает вывод немного по-другому: вначале миниатюра, потом заголовок, потом текст. Если у вас сайт с хорошими изображениями, то можно использовать «full2.php», иначе лучше взять «full.php».

Файлы «full-2col.php» и «full-3col.php» организуют колоночный вывод: в две или три колонки. Две колонки хорошо смотрятся на сайтах с сайдбаром, а три, когда сайдбара нет.

Откройте страницу любой рубрики (желательно, чтобы там было хотя бы десяток записей) и подберите для неё «Шаблон заголовков». Аналогично проделайте это и для остальных full-страниц.

Как настроить размеры миниатюр в этих шаблонах вывода?

Для этого используйте опцию «Размеры миниатюр»:

Здесь указываются 2 пары значений ширина/высота в шаблонах, в зависимости от предполагаемой ширины колонки. И ещё важно учитывать то, что это минимальная ширина миниатюры, которая будет занимать 100% ширину экрана на мобильном устройстве. Поэтому если сделать ширину меньше 640px (это экран телефона), то изображение будет искажено браузером (искусственно растянуто).

Возможно, что шаблоны вывода могут не полностью соответствовать вашим требованиям. Например нужно убрать дату, или изменить размер заголовка. Это мы научимся менять позже. На данном этапе вы просто выбираете наиболее подходящий вариант и где-то себе в блокноте отмечаете, что в будущем в нём требуется изменить.

Если по какой-то причине на сайте не использовались изображения записи, то можно использовать заглушку-изображение — это файл шаблона assets/images/thumb-placehold.webp. Если этот файл удалить, то будет генерироваться однотонная плашка.

Следующим шагом настройки сайта будет выбор компонентов шапки.

Но перед этим подумайте о том, что именно вы хотите здесь разместить. Будет ли два меню, или вообще не будет. Будет ли логотип и описание сайта. Нужна ли ссылка на Корзину? Будут ли ссылки на соц.сети? Может вы хотите там разместить баннер? В MF много шапок, поэтому поэкспериментируйте с ними и подберите наиболее подходящую. Можно пока не трогать их настройки, чтобы понять их общее поведение.

Стоит отметить, что компоненты header1 и header-menu1 — парные. Они достаточно сложные и позволяют менять внешний вид в очень широких пределах. Более того, header1 можно расширить своим дизайном — создать файл, который будет содержать html-разметку под вашу задачу.

При выборе шапки учитывайте и то, будет ли она меняться на главной и остальных страницах сайта. Очень часто для главной делается большая шапка, а на остальных страницах используется какой-то упрощённый компактный вариант. Кроме того, шапка может быть «динамической», скажем выводить данные записи (заголовок, дату и т.п.) или «статической» — неизменной.

Простой пример статической шапки в блоках Berry CSS. То есть если вы хотите использовать какой-то свой произвольный вариант, то не обязательно делать это через компоненты MF. Вполне можно будет разместить html-блок. Для этого используется компоненты module1/2, где указываются модули юнитов.

Для примера покажу как это делается.

Вначале нужно создать копию существующего модуля. Идём на страницу «Создать модуль» и указываем в качестве основы «base/base1», а в качестве итогового «my/home1» (имя произвольно, но обязательно каталог/подкаталог).

После этого выбираем компонент module1 и указываем имя нашего модуля.

Теперь идём в «Файлы» и открываем файл модуля для редактирования. Вставляем в него html-код из Berry.

Единственное, что нужно сделать — это указать путь к шаблону в виде шорткода — я его отметил красным. Всё, сохраняемся, получаем шапку из этого модуля.

Это пример совместно в компонентом header-menu2

Теперь, если эта шапка нам нужна только на главной, то в опциях module1 укажем условие вывода is_type('home'). Если мы перейдём на любую другую страницу сайта, то этот блок не будет отображаться.

Стоит отметить, что подобным образом можно использовать не только блоки Berry, но и модули MF headers. Вначале нужно их создать на странице «Создать модуль», а потом подключить в компоненте module1/2.

Я рекомендую для начала просто потренироваться с настройкой шапки, не меняя их тексты и данные. Просто посмотреть какие есть варианты. Потом подумать, какая шапка больше подходит для главной, а какая для остальных страниц. Обязательно решите какая информация должна быть в шапке.

Дальше вы можете настраивать шапку, наполняя её своими данными. Не меняйте цвета, поскольку дизайн пока не важен. Главное — это наполнение и не стоит отвлекаться на другие вещи.

Какие элементы должны быть в шапке?

Как минимум логотип, название и краткое описание. Логотип простой, но который однозначно будет идентифицировать ваш сайт. Лого лучше сделать без мелких деталей, поскольку они будут плохо читаться на малых экранах, да и сам по себе логотип обычно около 100-200px максимум — сильно на разгуляешься. Если логотип содержит текст, то убедитесь, что он хорошо читается — это хотя бы 15px по высоте. И нужно проверять как логотип будет смотреться в уменьшенном виде — это типовое поведение адаптивной сетки — когда изображение масштабируется браузером.

Если у вас нет готового логотипа, то в Сети полно стоков, где можно подобрать что-то интересное. Если это будет векторный формат SVG, то это вообще прекрасно. Ну а так обычного PNG будет достаточно.

Если у вас бизнес-сайт, то цвет логотипа должен повторять фирменные цвета (визитки, буклеты). Но так в целом требования обычные.

В некоторых случаях, особенно на этапе наполнения сайта, когда ещё не сформирована его аудитория, можно использовать иконочный шрифт FontAwesome — выбрать иконку для логотипа. Она будет однотонной, но это не проблема. Уже потом можно будет заменить на изображение.

Название сайта лучше всего делать текстом, а не картинкой. Так будет проще его менять и будет лучше адаптивность. На SEO это тоже влияет.

Краткое описание нужно для того, чтобы посетитель сразу понял на какой он попал сайт. То есть нужно описать основную тематику. Обычно шапка одна и та же на всех страницах сайта, поэтому точка входа может быть любой. Нужно чтобы посетителю не пришлось переходить на главную, чтобы понять где он вообще находится. Некоторые сайта не имеют описания на вторых страницах и посетитель скорее закроет вкладку в браузере, чем будет делать лишние движения, пытаясь сориентироваться.

Для бизнес-сайтов в шапке принято размещать контактные данные — телефоны, мессенджеры, ссылка на карту проезда. Если вы что-то продаёте, то ссылки на страницу оплаты, доставки и гарантии.

Также в шапке часто размещают строку поиска и ссылку на вход. Для блоговых сайтов в шапке может размещаться какой-то баннер или собственная реклама, хотя здесь лучше оставить больше пустого места, чем перенасытить шапку излишком информации. Более того, если на главной используется лендинг, то в шапку лучше оставить только самую важную информацию, которая не будет отвлекать посетителя от основной цели (УТП).

Как настраиваются шапки в MF?

В целом шапки достаточно сложные, поскольку в них логика позволяет размещать разные блоки и менять их настройки. Осноные вещи — это обычные текстовые опции. В них указываются тексты, иконки, адреса и т.д.

Часть опций предназначена только для смены дизайна — в них указываются css-классы и style элементов. Компоненты шапки в MF обновляются довольно часто, поскольку вместо того, чтобы делать аналогичную шапку, я предпочитаю добавить для существующей новую опцию. Поэтому, когда вы будете обновлять шаблон, то возможно в компоненте появятся новые возможности.

Некоторые компоненты универсальные — это что-то вроде flex-сетки, которую можно наполнить своими данными, например Header11. В них используются секционные опции в виде обычного текста. Это из-за того, что количество вариаций блоков/настроек окажется очень большим, поэтому если сделать каждую опцию отдельным полем, то это превысит все разумные пределы.

Часть опций напрямую содержит HTMl-код. Как правило он не очень сложный, да и меняется редко. Но так сделано для того, чтобы компонент можно было бы настраивать прямо из админ-панели.

Почти все шапки содержат вывод главного меню (иногда и второго). Меню есть двух типов: с темным и светлым фоном. Какие-то шапки потребуют одного вида, какие-то другого. Поэтому, после выбора компонента шапки, подберите для него подходящий дизайн меню (опция «Стиль главного меню»).

Не смотрите, что выбор меню невелик: все они поддерживают Material Design и могут автоматом адаптироваться к текущему дизайну шаблона.

Теперь вы понимаете, почему MF стоит больше, чем любой другой шаблон. Для примера загляните на страницу моих шаблонов. Каждый из них содержит только одну шапку, какой-то один вариант вывода и один цветовой дизайн. Обычно шаблоны так и продаются. Пусть он стоит в три раза меньше MF, но при этом имеет существенные ограничения. Если в MF сейчас 14 компонентов шапок, то это фактически эквивалент 14 отдельным шаблонам. Простая арифметика показывает, что MF многократно выгодней обычного шаблона. И это мы ещё не учитываем другие возможности MF.

Ещё много зависит о того, как вы относитесь к своему сайту. Если это «просто поиграть», без какой-то определенной цели или желание сделать всё самому, то любой шаблон, даже за 10$ будет дорогим. Но когда вы относитесь к сайту серьёзно, то вам сразу нужна хорошая основа, которая позволит не только быстро получить необходимый результат, но и даёт уверенность в дальнейшем развитии сайта — MF это позволяет. Я давно делаю сайты и по опыту скажу, что любой сайт (после его сдачи) потребует доработки через некоторое время, поскольку всегда возникают новые задачи. С MF многие вещи делаются прямо из админ-панели — это значит, что стоимость обслуживания сайта низкая — вам не придётся дергать своего вебмастера по любому «чиху».

Ну и до кучи — MF продаётся с годовым обновлением и моей техподдержкой. При всех возможностях MF — это фактически подарок: все консультации бесплатные, а платные — это достаточно сложные работы, например перенос данных с ВП на MaxSite CMS, создание новых type-файлов, js-скриптов и т.д. Вы всегда можете получить квалифицированную помощь — это всё входит в комплект шаблона MF.

Но главная возможность MF — это его гибкость в настройке. Пока мы рассмотрели начальный вывод и шапку. В следующий раз поговорим о других возможностях шаблона.