Интеграция шаблонов
Интеграция и построение шаблонов в MODx.
Оглавление
Построение шаблона
Интеграция сайта в MODx часто начинается с определения того, какие элементы сайта обычно повторяются от страницы к странице. Как правило, повторяющиеся элементы это — шапка, меню и подвал сайта.
Давайте составим простой HTML-макет и заполним его плейсхолдерами:
<!doctype html>
<html lang="ru">
<head>
<meta charset="[[++modx_charset]]">
<base href="[[!++site_url]]" />
<title>[[*pagetitle]]</title>
</head>
<body>
<!-- Header Start -->
<header>
<nav>
<ul>
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>
</header>
<!-- Header End -->
<main>
[[*content]]
</main>
<!-- Footer Start -->
<footer>
<nav>
<ul>
<li><a href="#">Политика конфиденциальности</a></li>
<li><a href="#">Пользовательское соглашение</a></li>
</ul>
</nav>
</footer>
<!-- Footer End -->
</body>
</html>Если на вашем сайте дизайн или структура страниц различается, необходимо будет создать новый шаблон для таких страниц. Допустим вы хотите чтобы на некоторых страницах сайтах отображался сайдбар. Для таких ресурсов можно создать другой шаблон и устанавливать его при создании ресурса:
<!doctype html>
<html lang="ru">
<head>
<meta charset="[[++modx_charset]]">
<base href="[[!++site_url]]" />
<title>[[*pagetitle]]</title>
</head>
<body>
<!-- Header Start -->
<header>
<nav>
<ul>
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>
</header>
<!-- Header End -->
<main>
[[*content]]
</main>
<!-- Aside Start -->
<aside>
<section>
<h4>Related posts</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</section>
</aside>
<!-- Aside End -->
<!-- Footer Start -->
<footer>
<nav>
<ul>
<li><a href="#">Политика конфиденциальности</a></li>
<li><a href="#">Пользовательское соглашение</a></li>
</ul>
</nav>
</footer>
<!-- Footer End -->
</body>
</html>Использование чанков
На многих сайтах есть элементы, которые повторяются на всех страницах. Как мы уже выяснили в самом начале данной статьи, это — шапка, меню и подвал сайта. Если нам потребуется внести изменения в этих элементах сайта, потребуется это делать во всех шаблонах, что не очень удобно. Для таких элементов отлично подходят Чанки. Если мы вынесем эти элементы в чанки, нам потребуется сделать изменения лишь в одном месте и эти изменения отобразятся на всех шаблонах.
Приведенный ниже пример иллюстрирует размещение шапки, меню и подвала сайта в чанках. В итоге наш шаблон примет следующий вид:
[[$headerHTML]]
<main>
[[*content]]
</main>
[[$aside]]
[[$footerHTML]]Чанк [[$headerHTML]] заменил разметку, которая ранее была в шапке, включая тег <!doctype html> и заголовок. Чанк [[$footerHTML]] теперь заменил разметку подвала сайта, включая закрывающиеся теги body и html. Ну и сайдбар мы поместили в чанк [[$asite]].
Чанки могут быть вложены в другие чанки. В приведенном ниже примере мы создали новый чанк с именем [[$metaData]] и заполнили его некоторыми общими метаданными.
<!-- SEO Microdata (Schema.org variant) - Google, Bing, Yahoo -->
<meta content="[[++site_name]]" itemprop="description">
<meta content="[[++site_name]]" itemprop="name">
<meta content="http://www.[[!++http_host]]" itemprop="url">
<meta content="http://www.[[!++http_host]]/meta_thumbnail.png" itemprop="image">
<meta content="info@[[!++http_host]]" itemprop="email">
<meta content="[[++site_name]]" name="companyright">Теперь мы можем встроить этот чанк в существующий чанк [[$headerHTML]]:
<!doctype html>
<html lang="ru">
<head>
<meta charset="[[++modx_charset]]">
<base href="[[!++site_url]]" />
<title>[[*pagetitle]]</title>
[[$metaData]]
</head>
<body>
<!-- Header Start -->
<header>
<nav>
<ul>
<li class="active"><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Блог</a></li>
</ul>
</nav>
</header>
<!-- Header End -->Будьте аккуратны при создании вложенных чанков. Очень легко запутаться если создавать слишком большую вложенность, особенно если ваш проект после вас достанется другому разработчику.
Использование Сниппетов
MODx включает в себя много базовой динамики, но Сниппеты являются хорошим способом расширить базовую динамику MODx. Внутри чанка [[$headerHTML]] у нас есть навигация, которая может быть создана и управляться динамически с использованием сниппета или пакета расширяющего возможности системы MODx, например Wayfinder или pdoMenu. Wayfinder и pdoMenu — это пакеты, которые могут автоматически составлять ваше меню на основе ресурсов, созданных на вашем сайте. Кроме того, они также могут обрабатывать «активный» класс меню, когда пользователь перемещается по сайту, а также осуществлять множество других функций.
<!doctype html>
<html lang="ru">
<head>
<meta charset="[[++modx_charset]]">
<base href="[[!++site_url]]" />
<title>[[*pagetitle]]</title>
[[$metaData]]
</head>
<body>
<!-- Header Start -->
<header>
<nav>
[[pdoMenu?
&parents=`0`
&level=`1`
]]
</nav>
</header>
<!-- Header End -->В приведенном выше примере используется сниппет pdoMenu из пакета pdoTools.
Cниппеты не ограничиваются существующими пакетами и могут быть созданы и затем включены в ваш шаблон для выполнения любой динамической функции, которую позволяет язык PHP. Создание и использование сниппетов мы рассмотрим в следующих статьях данной документации.
Время запросов: 0,1032 s
Количество запросов: 24
Источник: cache