MODX шаблоны – это простые HTML/CSS шаблоны, использующие теги MODx для динамичной функциональности. Для полного понимания давайте рассмотрим небольшой фрагмент шаблона.

<html lang="[[++cultureKey]]">
<head>
[[$Head]]
</head>

Все теги MODx Revolution заключается в квадратные [] скобки.

++cultureKey и $Head – это теги MODx, первый отвечает за вызов глобальной переменной, а второй за вызов чанка, все остальное это HTML код. Давайте посмотрим что написано в нашем шаблоне BootstrapTemplate (Элементы -> Шаблоны -> Bootstrap -> BootstrapTemplate). Как его установить мы рассматривали в предыдущей статье статье Установка дополнений.

 

 Здесь мы видим редактируемые поля:

  • Имя.
  • Категория.
  • Описание.
  • Иконка.
  • Код шаблона.

Под каждым полем есть описание, прочитав его Вы поймете для чего оно необходимо. Обязательным для заполнения является – Имя, помеченное *. Нас больше остальных интересует поле "Код шаблона (html)". Именно в него вписывается код, который будет обрабатываться и выводиться на странице frontend (пользовательская сторона). Давайте подробнее разберем этот шаблон:

 

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

  • Head – содержит код заголовка страницы, в котором подключаются css и js файлы, содержатся заголовок и описание страницы.
  • Navbar – содержит код навигации сайта (верхнее меню).
  • Breadcrumb – содержит код, описывающий вывод вложенности страницы (Главная / Новости / Новость 1).
  • Sidebar – содержит код бокового меню.
  • Footer – содержит код низа страницы.

сниппеты:

  • RenderBreadcrumbs – проверяет наличие вложенности страницы.
  • RenderSidebar – проверяет необходимость вывода бокового меню во вложенных страницах.
  • If – альтернатива оператора If, использующийся во всех языках программирования

и параметры ресурса:

  • longtitle – выводит расширенный заголовок страницы (Ресурса).
  • content – выводит содержимое страницы (Ресурса).

Если Вам не нужно боковое меню во вложенных страницах, то нужно заменить код третьего оператора If, использующий сниппет RenderSidebar, на [[*content]]:

  на  

 

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

С HTML кодом этого меню можно ознакомится на официальной странице Twitter Bootstrap, здесь же рассмотрим дополнение, установленный нами ранее, Wayfinder.

Здесь Wayfinder(подробнее о сниппете) использует свои параметры:

  • startId – указывается страница, с которой будет начинается отбор ресурсов (страниц) в меню. В нашем случае стоит 0, т.е. начинаем с корня/начала.
  • level – уровень вложенности. Если, к примеру, у нас есть Новости, а в ней Новость 1 и Новость 2, то Новость будет главным пунктом меню, а Новость 1 и 2 – вложенными пунктами. Таким образом мы получим выпадающее меня со списком.
  • *Tpl – шаблоны для вывода пунктов меню.

На своем сайте я не использую вложенность пунктов (выпадающее меню), т.ч. в параметре level я ставлю 1.

Все значения параметров MODx, включая дополнений, заключаются в боковые кавычки `` (буква Ё на клавиатуре в английской раскладке).

Копирование шаблона

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

Мы сделали значительный прогресс и теперь у нас есть начальные знания в построении шаблона MODx Revolution. В следующих уроках мы рассмотрим подробнее понятие Чанка, Сниппета, Дополнительные поля и параметры ресурса.

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.