Принципы шаблонизации. Интегрируем шаблоны.

Принципы шаблонизации. Интегрируем шаблоны.

Приступаем к самому интересному – натяжке шаблонов на 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)
  • Содержимое между тегами <head></head> (чанк meta)

Следовательно, нам необходимо создать четыре чанка. Как это сделать, я покажу на примере чанка meta. Кликаем на иконку, похожую на логотип Windows. У нас откроется новая страница, на которой мы заполняем “Имя” (в нашем случае “meta”), выбираем категорию “элементы страниц”, а в код чанка вносим код, который расположен между тегами <head></head> и нажимаем “Сохранить”.

Вот какой код чанка у меня получился:


<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”. В него мы поместим весь код от тега <header> до </header>. Код громоздкий, публиковать его не буду.

Создаем чанк “footer”. В него помещаем все от тега <footer> до тега </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&amp;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 (шаблон “Пост”)

Вот, собственно, и все, что я хотел описать в данном уроке. Надеюсь, у вас все получилось!

Оцените статью:

Проголосовало: 37

Комментарии (9)

  1. Артем 28 февраля 2017, 21:09 # 0
    Здравствуйте! Делал все по вашей инструкции. Все получалось, вот возникла проблема. Когда я нажимаю статью, там шаблон не меняется на шаблон статьи, он на вид как шаблон «главная страница» Я все проверил, не могу понять в чем проблема, везде указал правильные шаблоны и все создал, но все равно чтобы не нажал, всегда шаблон показывает на сайте они и тот же, что в статье, что в блоге, что на главной… Помогите пожалуйста, в чем может быть проблема?
    1. Артем 28 февраля 2017, 21:23 # 0
      Попробую обьяснить понятно))Когда я нажимаю на просмотр «Тестовая статья» у меня открывается шаблон как на " главная страница" и тоже самое когда я открываю просмотр «Новости сайта»Я проверил, в «Тестовая статья» и «Новости» сайта указан Шаблон «Статья» и «Блог» далее я проверил все ли правильно написал и заполнил в самих шаблонах, результат что все правильно. Не могу понять причину…
      1. Петропавловский Артем 28 февраля 2017, 21:49 # 0
        Файл .htaccess у вас переименован?
        1. Артем 28 февраля 2017, 23:00 # 0
          У меня тут проблема с этим. У меня два этих файла, один я переименовал а второй такой же только с точкой в середине а первый в начале с точкой.
          1. Артем 28 февраля 2017, 23:04 # +1
            Я один удалил, а второй оставил который больше по объему, переименовал его и все заработало!!! Спасибо вам огромное! Видео уроки просто супер! Все понятно и хорошо объясняете! =)))
            1. Петропавловский Артем 01 марта 2017, 13:00 # 0
              Всегда — пожалуйста!
        2. Анастасия 14 июня 2017, 08:27 # 0
          Здравствуйте!Подскажите пожалуйста, как сделать чанк meta, таким образом чтобы можно было для каждой страницы сайта заполнять мета-теги уникальным контентом. Это же необходимо для оптимизации сайта. Я пока к сожалению очень мало знакома с CMS modX, до этого момента больше оптимизацией занималась)Также ВЫ не уточните, есть ли в modX проблема с дублями страниц? И также может ВЫ сможете посоветовать, как лучше реализовать поиск на сайте, чтобы избежать дублей страниц с использованием модулей modX.Чуть не забыла. Сайт планирую делать на modX Revolution.
          1. Петропавловский Артем 14 июня 2017, 09:42 # 0
            Мета-теги реализуются с помощью TV-параметров. Проблема с дублями есть как и у любой другой CMS, решается проблема прописыванием 301 редиректов. Поиск можно реализовать как с помощью платного mSearch2, так и бесплатного SimpleSearch. В целом MODx очень гибкая система как в плане масштабирования, так и в плане SEO оптимизации — очень советую.
          2. exz098 06 ноября 2017, 07:22 # 0
            Доброго времени!поставил
            <base href="[[++site_url]]" />
            не отображаются изображения, скрипты и т.п.мета у меня
            <meta charset="utf-8">
            <title>Заголовок</title>
            <base href="[[++site_url]]" />
            <meta name="viewport" content="width=device-width, user-scalable=no">
            <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
            <link rel="stylesheet" href="js/fancybox/helpers/jquery.fancybox-buttons.css?v=2.1.4" type="text/css" media="screen" />
            <link rel="stylesheet" href="js/fancybox/helpers/jquery.fancybox-thumbs.css?v=2.1.4" type="text/css" media="screen" />
            <link rel="stylesheet" href="css/all.css" type="text/css" />
            
            подскажите пожалуйста что неправильно сделал если в мета добавлю
            assets/
            то норм