Инструкция по созданию сайта на MODx. Урок 9 — Работа со специальными тегами MODx

В этом уроке речь пойдет о специальных тегах системы управления, которые вы будете использовать для создания динамических сайтов на MODx. Что такое специальные теги MODx? Это определенные конструкции, которые необходимо вставлять в код шаблона сайта, чтобы вывести ту или иную динамическую информацию на сайте.

Ничего сложного в этом нет, и вы уже с некоторыми специальными тегами познакомились на практике в предыдущих уроках. При настройке шаблона мы использовали тег [*content*] для вывода содержимого страниц и тег [(base_url)] для указания базового URL для всех страниц сайта.

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

Наиболее распространенные теги MODx

[(site_name)] — этот тег выводит заголовок вашего сайта. Обычно используется в заглавии страниц HTML в теге <title>. Ниже на рисунке изображено поле содержимое которого выводит эта конструкция. Отредактировать его можно на странице системной конфигурации.

[(base_url)] или [(site_url)] — два тега идентичны между собой. Эти конструкции позволяют выводить URL вашего сайта. При создании шаблона мы использовали тег [(base_url)] для указания базового URL для корректной работы с относительными путями.

[*pagetitle*] — эта конструкция выводит содержимое поля «Заголовок», которое мы будем заполнять на странице создания/редактирования ресурса.

[*longtitle*] — выводит содержимое поля «Расширенный заголовок». Обычно используется как главный заголовок <h1> на странице.

[*description*] — выводит содержимое поля «Описание». Это поле будем использовать для вывода содержимого в META-теге description.

[*introtext*] — выводит содержимое поля «Аннотация». Это поле чаще всего используют при создании новостей, заметок в блоге и т.п. для организации страниц с кратким описанием заметок.

[*content*] — основное содержимое страниц. Конструкция выводит любой текст или HTML код, написанный или отредактированный в визуальном редакторе.

[*id*] — выводит идентификатор ресурса.

[*alias*] — выводит псевдоним ресурса.

[~идентификатор~] — выводит URL адрес ресурса, идентификатор которого указан. Например, если ID страницы «Новости» — 4, а псевдоним этой страницы — «news», то конструкция [~4~] выведет URL вашей страницы с новостями.  

Обратите внимание:  результатом обработки данной конструкции является лишь строка в виде URL страницы, не перепутайте ее со ссылкой на документ. Ссылка на страницу с использованием этой конструкции будет иметь следующий вид:

<a href=”[~4~]”>Новости</a>

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

Выше представлены часто употребляемые теги MODx. Но вы должны иметь ввиду, что всего тегов существует гораздо больше. И, безусловно, при более детальном знакомстве с MODx они вам тоже понадобятся.

Чтобы вы имели о них представление, я дополню список менее распространенными тегами.

[*pub_date*] — дата публикации ресурса

[*unpub_date*] — дата завершения публикации

[*createdby*] — идентификатор пользователя, создавшего ресурс

[*createdon*] — дата создания ресурса

[*editedby*] — идентификатор пользователя, редактировавшего ресурс

[*editedon*] — дата редактирования ресурса

[*contentType*] — тип содержимого (например, text/html)

[*type*] — тип (ресурс, папка или ссылка)

[*published*] — опубликован ли ресурс (1|0)

[*parent*] — номер (ID) родительского ресурса

[*isfolder*] — является ли ресурс папкой (1|0)

[*richtext*] — используется ли при редактировании страницы визуальный редактор

[*template*] — номер (ID) используемого шаблона для ресурса

[*menuindex*] — порядковый номер отображения в меню

[*searchable*] — доступен ли ресурс для поиска (1|0)

[*cacheable*] — кэшируется ли ресурс (1|0)

[*deleted*] — ресурс удален (1|0)

[*deletedby*] — идентификатор пользователя, удалившего ресурс

[*menutitle*] — заголовок меню, если таковой есть

[*donthit*] — слежение за количеством посещений отключено (1|0)

[*haskeywords*] — ресурс содержит ключевые слова (1|0)

[*hasmetatags*] — ресурс имеет META теги (1|0)

[*privateweb*] — ресурс входит в частную группу пользовательских документов (1|0)

[*privatemgr*] — ресурс входит в частную группу менеджерских документов (1|0)

[*content_dispo*] — вариант выдачи содержимого (1 — для отображения | 0 — прикрепленное для скачивания)

[*hidemenu*] — документ не отображается в меню (1|0)

[(modx_charset)] — выводит название используемой кодировки

[^qt^] — выводит время запросов к базе данных

[^q^] — выводит количество запросов к базе данных

[^p^] — выводит время работы PHP скриптов

[^t^] — выводит общее время генерации страницы

[^s^] — выводит источник содержимого (база или кэш)

Теперь, когда вы познакомились с основными тегами MODx, применим некоторые из них для наших шаблонов. Я предлагаю добавить в шаблон вывод названия страниц и их описание. Для этого откройте для редактирования чанк HEAD и в теге <title> вставьте констркуцию:

[*pagetitle*] | [(site_name)]

Эта конструкция будет выводить в названии HTML страницы название ресурса и заголовок сайта, разделенные знаком «|».

Затем можно добавить META тег description, в содержимое которого вписываем конструкцию [*description*]

<meta name="description" content="[*description*]"/>

После этого SEO описание для любой страницы на вашем сайте вы сможете делать заполнив поле «Описание» при редактировании ресурса. Опять же в этом моменте вы прочувствуете всю прелесть того, что мы не пожалели времени в самом начале настройки нашего шаблона и вынесли содержимое тега <head> в отдельный чанк. Теперь нам не нужно вносить изменения во все 3 шаблона, достаточно только отредактировать наш чанк HEAD.

Раз мы уже начали редактировать содержимое этого чанка, то можно сразу изменить кодировку в шаблоне. Если помните, у нас она была выставлена в UTF-8. В списке выше указан тег, который выводит название кодировки используемой на сайте.

[(modx_charset)]

После внесения всех перечисленных изменений чанк HEAD будет иметь следующий вид:

<head>
<base href="[(site_url)]" />
<title>[*pagetitle*] | [(site_name)]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)] "/>
<meta name="description" content ="[*description*]"/>
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/assets/templates/site/styles/layout.css" type="text/css" />
<script type="text/javascript" src="/assets/templates/site/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="/assets/templates/site/scripts/jquery.jcarousel.setup.js"></script>
</head>

Вы можете посмотреть, как выглядит заголовок страницы в окне браузера. У меня выглядит так:

Сейчас неплохо было бы автоматизировать вывод главного заголовка <h1> на страницах сайта. Для этого отправляемся на страницу редактирования чанка и перед уже знакомым тегом вывода содержимого страницы вставляем вывод заголовка, содержимое которого будем брать из поля «Расширенный заголовок». Как мы видели из рисунка — этому полю соответствует тег [*longtitle*].

После внесения изменений чанк CONTENT примет следующий вид:

Таким образом, главные заголовки <h1> наших страниц будут выставляться автоматически, и их не нужно будет вписывать в визуальном редакторе. Главное — это не оставлять пустым поле «Расширенный заголовок» при редактировании ресурса, содержимое которого будет использоваться в качестве заголовков. Так же для организации заголовков вы можете использовать содержимое других полей, например, поле «Заголовок». В этом случае в чанк CONTENT вам необходимо будет добавлять конструкцию <h1>[*pagetitle*]</h1>. Стили для заголовка в шаблоне уже прописаны. Поэтому, если поле «Расширенный заголовок» вы не оставили пустым на странице у вас появится заголовок. Вот так он выглядит:

После этого нам необходимо добавить вывод заголовков в шаблон «Во всю ширину», ведь вы помните, что в этом шаблоне чанка CONTENT у нас нет, а содержимое страниц мы вызываем сразу из шаблона с помощью тега [*content*]. Поэтому, отправляемся на страницу редактирования шаблона и добавляем над этим тегом вывод заголовка: <h1>[*longtitle*]</h1>.

Итак, в этом уроке мы более подробно познакомились со специальными тегами MODx и некоторые из них уже применили на практике при создании нашего сайта.

По ходу урока мы внесли изменения в два чанка на нашем сайте: HEAD и CONTENT и в шаблон «Во всю ширину». Я приведу ниже файлы с кодом для каждого из них. При желании, можете скопировать их к себе:

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx: