Шаблоны modx. Виды и способы установки.

Прежде чем говорить об особенностях шаблонов в модэксе, стоит упомянуть один принцип идеологии этого движка. Дело в том, что создатели модэкса были недовольны дизайнерскими возможностями других cms - они казались слишком стандартизированными. Отойти от "обычного" на тот момент дизайна было либо слишком сложно, либо неудобно с точки зрения кода: приходилось придумывать кучу "костылей". Поэтому они захотели создать систему свободную для внедрения любого дизайна. Этот принцип привлек внимание разработчиков тогда и служит хорошим бонусом сейчас.

Виды шаблонов

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

Откуда их можно получить

Готовые из репозиториев модэкса. Они содержат готовые решения для различных типов сайтов: от блога до интернет-магазина;
Интегрировать код на html/css/js. Можно взять как готовые, так и создать собственный. Есть важное уточнение: код может быть написан с использованием шаблонизаторов (fenome, smarty).

Изображение 1. Варианты шаблонов, которые можно скачать из стандартного репозитория.

И вот тут нас постигает первое разочарование: готовых тем, которые можно поставить напрямую из админки, очень мало по сравнению с тем же вордпрессом.

Способ подключения

Прописав код непосредственно в админке сайта;
Вызвав его из отдельного файла.

И тут снова возникает путаница: какой вариант лучше? Чем они вообще отличаются? Что делать тому, кто не понимает что выбрать?

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

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

Где взять

Самый простой способ - скачать бесплатно (или купить) готовый вариант с какого-либо сайта. Для примера можно взять тот же templatemonster. Или найти сайт, на котором продаются именно шаблоны на модэкс.

Другой вариант - репозитории модэкса. Вы можете скачать и установить его за несколько кликов. Минус этого способа - небольшое количество готовых вариантов. Большинство создателей предпочитает править код под требования конкретного сайта и потому стандартные варианты не получили такого же распространения как в вордпрессе. Очень часто это становится камнем преткновения для тех, кто хочет перейти на эту cms. Даже не смотря на то, что возможностей в плане использования готового кода очень много.

Ну и последний вариант - самостоятельно сверстать необходимый дизайн в нужном формате.

Как подключить

Давайте разбираться: при прописывании кода непосредственно в админке, вам необходимо в разделе элементы выбрать раздел шаблоны и перенести код в новый созданный шаблон. В таком случае все работы с кодом происходят непосредственно в браузере силами самой cms.

В случае подключения шаблона из файла вам необходимо также создать шаблон (придумать ему имя) в админке и указать адрес файла с шаблоном.

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

Особенности подключения

Итак, мы не сильно ограничены в выборе языка. Да и в среде написания. Modx даёт нам возможность создать любое количество шаблонов и ресурсов. В теории мы можем каждой странице нашего сайта сделать собственный дизайн. Звучит великолепно, но советую сильно с этим не злоупотреблять: большое количество вариантов может запутать и усложнить последующие работы. Да и у обычного пользователя может возникать дискомфорт от просмотра сайта на котором все страницы отличаются внешне друг от друга. А это плохо скажется на его поведенческих факторах.

Ресурсы.

Каждый из них может иметь свое расширение: .html, .xml, .css, .js и т.д.

Типы содержимого модэкс

В шаблоне мы вызываем файлы стилей и скриптов с помощ следующей конструкции.

вызов стилей

Однако модэкс предполагает использование также вызов css и js через ресурсы.

вызов стилей и скриптов через ресурсы

По моему субъективному мнению, пользоваться этим не самый лучший вариант: это может дать большую нагрузку на базу данных и замедлить работу сайта. Дело в том, что все данные о содержимом ресурсов, шаблонов, станков и т.д. хранятся в БД.

Таблица БД с шаблоном

Перенося все данные в ресурсы и шаблоны, мы тем самым увеличиваем количество обращений к ней и соответственно больше её нагружаем. Для небольших проектов это не проблема даже на недорогом shaded-хостинге и вы вряд ли обратите на это внимание. А вот для больших сайтов с высокой посещаемостью это может вызвать эффект "бутылочного горлышка". Согласитесь, не очень хочется мучить посетителей 500ми ошибками сервера из-за такого нюанса. Сам я приучил себя как можно больше данных шаблона держать в файлах. Но опять же: смотрите по своему проекту и выбирайте то, что Вам удобно. В случае необходимости, у вас будет что оптимизировать и сократить нагрузку на хостинг.

Оптимизация шаблона с точки зрения поисковых систем

Если смотреть на текущие требования поисковиков, то в приоритете сейчас уже не только общая скорость загрузки страницы. Больше внимания стали уделять другим факторам. Для примера возьмем время до начала взаимодействия с сайтом и общее смещение макета. Эти метрики можно посмотреть через инструмент google page speed insight. Применяя это на нашу тему, нам необходимо:

1) пользоваться минификаторами кода (например HTMLminify)

2) сжимать файлы css и js. Аналогично можно воспользоваться MinifyX.

3) вынести критически важные стили в шаблон через тег style. Аналогично поступить с javascript.

4)оптимизировать изображения под физические размеры и использовать форматы webp, jp2. Максимально использовать тег picture. Задавать размеры изображения с помощью wight и height

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

Так что выбрать?

Начинающим я рекомендую работать с шаблонами на html и использовать теги modx-a. При этом не использовать fenome. Это даст следующие преимущества:

Свободу творить с минимумом знаний. Да, вы можете создать сайт зная только очень небольшой минимум о коде. Для этого вы можете взять готовые варианты дизайна и установить на движок. Теги модэкса при этом упростят вам редактирование как текстов, так и кода. Умеете хоть немного верстать - добро пожаловать.
Вариативность. Логически вытекает из первого пункта. Когда я собирал материал, наткнулся на огромное количество вариантов того как оформлять шаблон. Если у той же джумлы (для примера) структура четко простроена и должна быть определенной как по типам файлов и их местоположению, так и по и структуре, то здесь вы можете делать так как считаете нужным. Кто-то размещает все файлы шаблона прямо в корневой каталог сайта, кто-то создает отдельную папку и прописывает адреса для нее, кто-то делает все с помощью ресурсов, чанков, сниппетов и tv-полей. И все эти варианты работают.
Устойчивость при создании. Даже если в каком-то из тегов будет ошибка, страница все равно будет открываться (кроме этого блока). Обусловлено это тем, что генерация шаблона происходить циклично несколько раз.
Моральное спокойствие. Все же намного проще начинать работу в новой cms хотя бы с небольшим знанием того, что точно будет работать. Это поддерживает желание доделать сайт до конца даже когда не получается с первого раза.

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

Выводы

MODX славится тем, что позволяет создавать сайты с любым оформлением. С одной стороны, это очень гибко и круто. С другой же — из-за этого его боятся новички, работающие строго по инструкции. Стоит понять основы и логику действий и можно будет создавать сайты с по-настоящему удивительным дизайном.