Приступаем к самому интересному – натяжке шаблонов на MODx. Для того, чтобы начать, сначала нужно понять, как работает парсер MODx. Раньше, когда сайты только начинали делать динамичными, коды HTML, JS, CSS и PHP были вперемешку, что затрудняло понимание работы системы и код был крайне нечитаемым (на самом деле с тех времен не много что поменялось, посмотрите на код шаблонов Wordpress или Joomla!). Например, было вот так:
<?php
$output = '';
while ($row = mysql_fetch_assoc($res)) {
$output .= “<td>”.$res[id].”</td><td>”.$row[name].”</td>";
}
echo $output;
Логика же MODx разбивает контроллер и отображение, то есть если в коде у нас PHP, то кода HTML там быть не должно.
Работа MODx парсера очень проста – он ищет в шаблонах и чанках своеобразные теги и заменяет их на конкретные значения. Если представить пример на PHP, то получится примерно такой код:
<?php
$tpl = file_get_contents('header.tpl');
$output = '';
while ($row = mysql_fetch_assoc($res)) {
$placeholders = array('[[+id]]', '[[+name]]');
$values = array($res['id'], $row['name']);
$output .= str_replace($placeholders, $values, $tpl);
}
echo $output;
Я думаю, здесь понятно, что [[+id]] заменится на значение $res['id'], a [[+name]] на $row['name']. Также и работает парсер MODx. Думаю, что стоит раскрыть некоторые понятия, которые в дальнейшем будут фигурировать везде в статьях.
Ресурс – это абстракция MODx. В основном страницы сайта, но также они могут быть TXT-документами, XML-документами. Содержимое ресурса может содержать теги MODx.
Элементы – это технические сущности MODX, части абстракции: сниппеты, шаблоны, чанки, плагины и категории.
Шаблон – это HTML-код, который может содержать теги MODx. Шаблон привязывается к ресурсу, ресурс выводится именно так, как сделана разметка в шаблоне. Так что когда будете создавать ресурсы и просматривать их, а в ответ будете видеть, например, главную страницу, то стоит проверить верный ли шаблон стоит у ресурса.
Чанк – кусок HTML-кода, содержащий теги MODx.
Сниппет – кусок PHP-кода. Не содержит теги MODx.
Плагин – кусок PHP-кода, которые выполняются по наступлению какого-либо системного события. Не содержит теги MODx.
ТВ-параметр – дословно, переменная шаблона. Это дополнительное поле ресурса.
Категория – простая папка.
Тег MODx – это любой тег, заключенный в скобки [[ и ]]
В шаблонах и чанках парсер MODx ищет следующие теги:
- [[*tag]] — тег поля ресурса, например заголовка ([[*pagetitle]]) или содержимого страницы ([[*content]]). Это всегда значение текущей страницы.
- [[+tag]] — плейсхолдер, заполняется результатом работы кокого-либо сниппета или плагина.
- [[%tag]] — тег словаря.
- [[~id]] — ссылка на страницу.
- [[~[[*id]]]] — вложенный тег.
- [[++tag]] — настройки системы.
- [[!*tag]] — некэшированный тег, обрабатывается в последнюю очередь, значение берется из источника каждый раз при загрузке страницы.
- [[-*tag]] — закомментированный тег, не обрабатывается.
- [[#tag]] — теги FastField, которых нет в MODX по умолчанию, для них нужно установить pdoTools или FastField.
Важно помнить, что парсер MODx — вещица рекурсивная, она будет работать до тех пор пока на выходе не исчезнут все теги MODx. Поэтому не следует делать вызовов более 3-ей степени вложенности. В противном случае, сайт будет заметно тормозить.
Стандартный шаблон MODx, до недавнего времени, выглядел вот так:
<html>
<head>
<title>[[++site_name]] - [[*pagetitle]]</title>
<base href="[[++site_url]]" />
</head>
<body>
[[*content]]
</body>
</html>
Интегрируем базовые шаблоны из нашего архива
Сейчас, когда у нас все подготовлено, мы с вами наконец-то приступим к натяжке HTML-верстки на MODx Revolution. Я люблю, когда в панели администратора порядок, поэтому для начала нам необходимо создать категории, в которых в дальнейшем будут храниться элементы. Делается это не только ради удобства, но и ради быстродействия панели администратора (админка не даст вам ничего сделать пока не загрузит все развернутые ветки дерева ресурсов или элементов).
Чтобы создать категорию, необходимо кликнуть на иконку папки на панели элементов, а во всплывающем окне заполнить название и нажать кнопку “Сохранить”.
Первая категория, которую мы создадим – “Элементы страниц”. Думаю, вы поймете почему я ее так назвал.
Теперь необходимо загрузить файлы шаблона на сервер (или скопировать их в директорию с сайтом, если вы делаете сайт локально). Для этого копируем все, что находится в папке /assets/ шаблона в папку /assets/ MODx.
Итак, у нас есть созданная категория и файлы размещены в MODx – теперь интегрируем шаблон главной страницы. Открываем наш шаблон, заходим в папку “HTML”. В ней два вида шаблонов, отличаются они только шапкой. Вы можете выбрать какой угодно, но мы будем интегрировать шаблон, лежащий в папке “header-2”. Главная страница – это файл “index.php”, открываем его в редакторе (я советую использовать Brackets или Sublime Text 3). Если посмотреть на данный шаблон, пооткрывать другие странички, то мы увидим, что на всех них повторяются одни и те же элементы:
- Шапка сайта (чанк header)
- Футер (чанк footer)
- Скрипты (их не видно, но они для всех шаблонов будут одни – чанк scripts)
- Содержимое между тегами (чанк meta)
Следовательно, нам необходимо создать четыре чанка. Как это сделать, я покажу на примере чанка meta. Кликаем на иконку, похожую на логотип Windows. У нас откроется новая страница, на которой мы заполняем “Имя” (в нашем случае “meta”), выбираем категорию “элементы страниц”, а в код чанка вносим код, который расположен между тегами и нажимаем “Сохранить”.
Вот какой код чанка у меня получился:
<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content="MediaCenter, Template, eCommerce"> <meta name="robots" content="all"> <title>MediaCenter - Responsive eCommerce Template</title> <!-- Bootstrap Core CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <!-- Customizable CSS --> <link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/colors/green.css"> <link rel="stylesheet" href="assets/css/owl.carousel.css"> <link rel="stylesheet" href="assets/css/owl.transitions.css"> <link rel="stylesheet" href="assets/css/animate.min.css"> <!-- Fonts --> <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <!-- Icons/Glyphs --> <link rel="stylesheet" href="assets/css/font-awesome.min.css"> <!-- Favicon --> <link rel="shortcut icon" href="assets/images/favicon.ico"> <!-- HTML5 elements and media queries Support for IE8 : HTML5 shim and Respond.js --> <!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <script src="assets/js/respond.min.js"></script> <![endif]-->
Теперь создадим чанк “header”. В него мы поместим весь код от тега до . Код громоздкий, публиковать его не буду.
Создаем чанк “footer”. В него помещаем все от тега до тега . Код громоздкий, публиковать его не буду.
И создаем чанк “scripts”. В него помещаем все скрипты:
<script src="assets/js/jquery-1.10.2.min.js"></script> <script src="assets/js/jquery-migrate-1.2.1.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script src="//maps.google.com/maps/api/js?key=AIzaSyDDZJO4F0d17RnFoi1F2qtw4wn6Wcaqxao&sensor=false&language=en"></script> <script src="assets/js/gmap3.min.js"></script> <script src="assets/js/bootstrap-hover-dropdown.min.js"></script> <script src="assets/js/owl.carousel.min.js"></script> <script src="assets/js/css_browser_selector.min.js"></script> <script src="assets/js/echo.min.js"></script> <script src="assets/js/jquery.easing-1.3.min.js"></script> <script src="assets/js/bootstrap-slider.min.js"></script> <script src="assets/js/jquery.raty.min.js"></script> <script src="assets/js/jquery.prettyPhoto.min.js"></script> <script src="assets/js/jquery.customSelect.min.js"></script> <script src="assets/js/wow.min.js"></script> <script src="assets/js/buttons.js"></script> <script src="assets/js/scripts.js"></script>
Таким образом, мы разбили шаблон на части. Теперь на места того кода, который мы убрали в чанки, вставляем теги MODX, которые будут сообщать системе, что на эти места нужно вставить код из чанков. Теги будут следующие:
- [[$meta]]
- [[$header]]
- [[$footer]]
- [[$scripts]]
Код шаблона, в силу его громоздкости, в статье я приводить не буду. Вы сможете посмотреть его на тестовом сайте или на видео.
Код чанков и шаблона, которые получились у меня, вы можете посмотреть на тестовом сайте или на видео. Сравните их со своими и интегрируйте следующие шаблоны. Начнем мы разработку с блога, поэтому можете интгрировать для начала только следующие:
- Blog.html (шаблон “Статьи”)
- Blog-post.html (шаблон “Пост”)
Вот, собственно, и все, что я хотел описать в данном уроке. Надеюсь, у вас все получилось!
Артем
28 февраля 2017, 21:09
#
↓
0
Петропавловский Артем
28 февраля 2017, 21:49
#
↑
↓
0
Анастасия
14 июня 2017, 08:27
#
↓
0
exz098
06 ноября 2017, 07:22
#
↓
0
Егор
19 декабря 2017, 12:28
#
↓
0
Андрей
11 января 2018, 14:00
#
↓
0
Роман
22 февраля 2018, 01:51
#
↑
↓
0
Александр Цимбалюк
08 апреля 2018, 12:39
#
↓
0
Виктор
15 апреля 2018, 00:12
#
↓
0
чсмчсм
14 июня 2018, 15:21
#
↑
↓
0
Антон
15 июня 2018, 16:59(Комментарий был изменён)
#
↓
0
Андрей
02 июля 2018, 09:31
#
↓
0
Дарья
16 августа 2019, 02:45
#
↓
0
Александр
15 ноября 2020, 13:13
#
↓
0
