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

Вступление

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

В прошлом уроке мы уже установили систему управления сайтом MODx Revo и базово подготовили её к работе, ниже будут полезные ссылки:

Редактирование главного шаблона

Для начала перейдём в наш начальный шаблон и вставим туда следующий код:

<!DOCTYPE html>
<html lang="ru">
[[$head]]
<body>
[[$header]]
<main>
[[*content]]
</main>
[[$footer1]]
[[$scripts1]]
</body>
</html>

Конструкция в квадратных скобках с символом доллара [[$name]] – это чанк. Чанк позволит нам шаблонизировать основные элементы страниц:

  • [[$head]] – общий head наших страниц.
  • [[$header]] – общий header наших страниц.
  • [[$footer1]] – общий footer наших страниц.
  • [[$scripts1]] – общий блок, который будет вмещать в себя все скрипты страниц нашего сайта.

Зачем мы усложняем сайт чанками?

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

Появляется закономерный вопрос - зачем же нам усложнять структуру сайта чанками, если в чанк мы помещаем общий код, а у страниц он может и будет отличаться?

  • 1) Все уникальные элементы мы будем получать в чанк от самой страницы по средством стандартных и дополнительных полей.
  • 2) Разбивая структуру сайта на чанки, а после, редактируя один чанк - мы редактируем код у всех страниц использующих этот общий чанк.

Создание чанков

Разобравшись с теорией приступим к созданию самих чанков: элементы -> чанки -> новый чанк.

В head нашего сайта мы поместили следующий код:

<head>
<meta name="robots" content="all"/> <!-- Разрешаем индексацию наших страниц -->
<meta charset="utf-8"/> <!-- Обозначаем кодировку страниц -->
<meta name="reply-to" content=" [[#3.tv.email]]"/> <!--  Адрес электронного почтового ящика для связи с автором (автор – это конечный пользователь сайта) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!-- При заходе через IE указывает браузеру включать поддержку максимально доступной версии -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <!-- Установка ширины и начального масштаба для окна просмотра на мобильных устройствах -->
<meta name="description" content="[[*description]]"/> <!-- Описание страницы -->
<meta name="keywords" content="[[*introtext]]"/> <!-- Ключевые слова страницы -->
<meta name="copyright" content="[[#3.tv.cmp_name]]"/> <!-- Копирайт конечного пользователя сайта -->
<meta name="Author" lang="en" content="WITECH web studio"/> <!-- Автор сайта, можем указать себя -->
<meta property="og:locale" content="ru_RU"/> <!-- Микроразметка Open Graph, указываем язык сайта -->
<meta property="og:title" content="[[*longtitle]]"/> <!-- Микроразметка Open Graph, указываем имя страницы -->
<meta property="og:description" content="[[*description]]"/> <!-- Микроразметка Open Graph, указываем описание страницы -->
<meta property="og:image" content="[[++site_url]][[#3.tv.og_image]]"/> <!-- Микроразметка Open Graph, указываем ссылку на изображение, которое будет опубликовано в социальных сетях, если вы делитесь там ссылкой на эту страницу (оно может быть общим, но лучше, если у каждой страницы изображение будет уникальным -->
<meta property="og:type" content="website"/> <!-- Микроразметка Open Graph, указываем, какая эта страница. Как правило, это либо страница вебсайта, либо статья. -->
<meta property="og:url" content="[[*id:is=`1`:then=`[[++site_url]]`:else=`[[++site_url]][[~[[*id]]]]`]]"/> <!-- Микроразметка Open Graph, указываем канонический URL страницы. Конструкция, которую вы тут видите, будет формировать обычный URL сайта, если id=1 (главная страница по умолчанию) и полный URL для остальных случаем (если id страницы не равен 1) -->
<meta property="og:site_name" content="[[*longtitle]]"/> <!-- Микроразметка Open Graph, указываем имя страницы -->
<meta property="og:see_also" content="[[++site_url]]"/> <!-- Микроразметка Open Graph, указываем ссылку на сайт -->
<meta property="place:location:latitude" content="[[#3.tv.latitude]]"/> <!-- Метатег Google, указываем широту местоположения организации -->
<meta property="place:location:longitude" content="[[#3.tv.longitude]]"/> <!-- Метатег Google, указываем долготу местоположения организации -->
<meta property="business:contact_data:street_address" content="[[#3.tv.street_address]]"/> <!-- Метатег Google, указываем улицу местоположения организации -->
<meta property="business:contact_data:locality" content="[[#3.tv.locality]]"/> <!-- Метатег Google, указываем город местоположения организации -->
<meta property="business:contact_data:postal_code" content="[[#3.tv.postal_code]]"/> <!-- Метатег Google, указываем почтовый индекс организации -->
<meta property="business:contact_data:country_name" content="[[#3.tv.country_name]]"/> <!-- Метатег Google, указываем страну местоположения организации -->
<meta property="business:contact_data:email" content="[[#3.tv.email]]"/> <!-- Метатег Google, указываем электронную почту организации -->
<meta property="business:contact_data:phone_number" content="[[#3.tv.phone]]"/> <!-- Метатег Google, указываем телефон организации -->
<meta property="business:contact_data:website" content="[[++site_url]]"/> <!-- Метатег Google, указываем ссылку на сайт -->
<meta name="format-detection" content="telephone=no"> <!-- Запрещаем интерпретацию телефонных номеров как ссылки (мы это делаем сами, во избежание ошибок)  -->
<meta name="format-detection" content="address=no"> <!-- Запрещаем интерпретацию адреса как ссылки (мы это делаем сами, во избежание ошибок)  -->
<link rel="apple-touch-icon" type="image/png"  href="[[++site_url]]assets/components/img/touch-icon-iphone.png"> <!-- Ссылка на изображение  60х60, это как фавикон, только для Apple устройств (далее пойдут вариации по размеру) -->
<link rel="apple-touch-icon" type="image/png"  sizes="76x76" href="[[++site_url]]assets/components/img/touch-icon-ipad.png">
<link rel="apple-touch-icon" type="image/png"  sizes="120x120" href="[[++site_url]]assets/components/img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" type="image/png"  sizes="152x152" href="[[++site_url]]assets/components/img/touch-icon-ipad-retina.png">
<link rel="shortcut icon" href="[[++site_url]]assets/components/img/favicon.ico"> <!-- Ссылка на фавиконку -->
<title>[[*longtitle]]</title> <!-- Имя страницы -->
<link rel="stylesheet" href="[[++site_url]]assets/components/css/style.css"> <!-- Подключаем главный стиль -->
<!--[if IE]> <!-- Подключаем стиль для старых версий IE -->
<link rel="stylesheet" href="[[++site_url]]assets/components/css/ie.css" />
<![endif]-->
<link rel="stylesheet" href="[[++site_url]]assets/components/css/ie10-11.css" /> <!-- Подключаем стиль для последних версий IE -->
[[$analytics]] <!-- Помещаем сюда чанк, который будет содержать код систем аналитики сайта -->
</head>

В header нашего сайта мы поместили следующий код:

<header>
<div class="max-width">
<nav>
<ul>
<li><a href="[[++site_url]]" title="Главная">Главная</a></li>
</ul>
</nav>
</div>
</header>

Т.к. у нас на сайте сейчас есть только главная страница, наша навигация будет состоять только из неё.

В footer нашего сайта мы поместили следующий код:

<footer>
<div class="max-width">
<div class="left-block">
© [[#3.tv.date_start]] - [[year]] [[#3.tv.cmp_name]]. | <a href="[[++site_url]]terms-and-privacy-policy"  title="Условия конфиденциальности - [[#3.tv.cmp_name]]">Условия конфиденциальности</a>
</div>
<div class="right-block">
<a class="copyright" href="https://witech.su" title="Разработчик сайта" target="_blank">Witech | web studio</a>
</div>
</div>
</footer>

В чанк scripts и analytics мы пока ничего не запишем, т.к. скрипты и системы аналитики мы пока подключать не будем.

Вы можете заметить, что у нас в чанках присутствую новые конструкции:

  • 1) [[*name]] – получение данных из стандартного поля страницы, использующей чанк.
  • 2) [[#3.tv.name]] – получение данных дополнительных полей ресурса с номером ID=3, это будет ресурс с общими настройками нашего сайта, скоро мы создадим его.
  • 3) [[name]] – вызов сниппета, сниппет выполняет ту же функцию, что и чанк, единственное отличие заключается в том, что в сниппите находится PHP код.

Создание шаблона и ресурса Настройки

Давайте теперь создадим ресурс с настройками и первым делом мы сделаем отдельный шаблон, это нужно, чтобы дополнительные поля были привязаны только к этому ресурсу (привязка всех дополнительных (или TV) полей идёт по шаблону).

Элементы -> шаблоны -> новый шаблон, назовём его “Настройки”.

Теперь создадим новый ресурс: ресурсы –> новый ресурс, назовём его “настройки”, выберем шаблон “настройки” и отметим галочкой “скрыть из меню”, публиковать его мы не будем.

Установим дополнение PdoTools

Перед тем, как создавать дополнительные поля, нам нужно научить наш MODx читать наши конструкции, для этого мы установим дополнение pdoTools: пакеты -> установщик -> загрузить пакеты, после загрузки установим его.

Создадим категорию и TV поля

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

Создадим категорию для наших дополнительных полей: элементы -> категории -> новая категория, назовём её “Общие настройки”.

Теперь заходим в элементы -> дополнительные поля -> новое дополнительное поле (TV):

  • [[#3.tv.email]] – email.
  • [[#3.tv.phone]] – телефон.
  • [[#3.tv.cmp_name]] – название компании.
  • [[#3.tv.og_image]] – изображение для социальных сетей.
  • [[#3.tv.latitude]] – широта.
  • [[#3.tv.longitude]] – долгота.
  • [[#3.tv.street_address]] – улица.
  • [[#3.tv.locality]] – город.
  • [[#3.tv.postal_code]] – почтовый индекс.
  • [[#3.tv.country_name]] – страна.

Задаём имя дополнительного поля, на которое мы ссылаемся в коде, выбираем категорию “Общие настройки”, указываем подпись, это будет расшифровка, указывающая на его назначение. Переходим на вкладку “доступно для шаблонов” и ставим галочку напротив “Настройки”. Стоит заметить, что на вкладке “параметры ввода” мы оставляем “текст” - если TV поле вводится текстом, а если мы добавляем TV поле для картинки (у нас используется такое поле в микроразметке Open Graph, обозначающее изображение для социальных сетей) - выбираем “Изображение”.

Создание сниппета и проверка проделанной работы

После создания дополнительных полей перейдём в наш ресурс “Настройки” -> дополнительные поля и расставим цифры для проверки их корректной работы.

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

Теперь создадим сниппет [[year]], который автоматически будет подставлять текущий код в копирайт, находящийся в подвале. Элементы -> сниппеты -> новый сниппет.

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

Не забудем заполнить стандартные поля нашей страницы.

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

Заключение

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

Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 8,5 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.

Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!