УЧЕБНЫЕ МАТЕРИАЛЫ
Web-верстка, компьютерная графика,
мультимедиа
Уроки MODx Revolution
Скачать материалы к учебному курсу — папка distr_MODx.zip
Урок 5. Специальные теги MODx
Что такое специальные теги MODx – это определенные конструкции, которые необходимо вставлять в код шаблона сайта, чтобы вывести ту или иную динамическую информацию на сайте.
При настройке шаблона мы использовали тег [ [*content]] для вывода содержимого страниц, и тег [ [++site_url]] для указания базового URL для всех страниц сайта.
В этом уроке мы более подробно разберем основные теги, с которыми вам придется столкнуться при разработке сайтов на MODx.
Наиболее распространенные теги MODx
[ [++site_name]] – этот тег выводит заголовок вашего сайта. Обычно используется в заглавии страниц HTML в теге . Ниже на рисунке изображено поле, содержимое которого выводит эта конструкция. Отредактировать его можно на странице системной конфигурации.
[ [++site_url]] – эта конструкция позволяет выводить URL вашего сайта. При создании шаблона мы использовали этот тег для указания базового URL для корректной работы с относительными путями.
[ [*pagetitle]] – эта конструкция выводит содержимое поля Заголовок, которое мы будем заполнять на странице создания/редактирования ресурса.
[ [*longtitle]] – выводит содержимое поля Расширенный заголовок. Обычно используется как главный заголовок
[ [*description]] – выводит содержимое поля Описание. Это поле будем использовать для вывода содержимого в META-теге description.
[ [*introtext]] – выводит содержимое поля Аннотация. Это поле чаще всего используют при создании новостей, заметок в блоге и т.п. для организации страниц с кратким описанием заметок.
[ [*content]] – основное содержимое страниц. Конструкция выводит любой текст или HTML код, написанный или отредактированный в визуальном редакторе.
[ [*id]]– выводит идентификатор ресурса.
[ [*alias]]– выводит псевдоним ресурса.
]] – выводит URL адрес ресурса, идентификатор которого указан. Например, если ID страницы Новости – 4, а псевдоним этой страницы – news, то конструкция [ [
]] выведет URL вашей страницы с новостями.
Обратите внимание: результатом обработки данной конструкции является лишь строка в виде URL страницы, не перепутайте ее со ссылкой на документ. Ссылка на страницу с использованием этой конструкции будет иметь следующий вид:
Для простоты понимания приведенных выше тегов MODx мы приводим изображение, на котором изображена страница редактирования ресурса с указанием того, какие теги отвечают за вывод в шаблоне содержимого того или иного поля.
Выше представлены часто употребляемые теги MODx. Но вы должны иметь ввиду, что всего тегов существует гораздо больше. Чтобы вы имели о них представление, мы дополним список менее распространенными тегами.
[ [*pub_date]] – дата публикации ресурса
[ [*unpub_date]] – дата завершения публикации
[ [*createdby]] – идентификатор пользователя, создавшего ресурс
[ [*createdon]] – дата создания ресурса
[ [*editedby]] – идентификатор пользователя, редактировавшего ресурс
[ [*editedon]] – дата редактирования ресурса
[ [*content_type]] – тип содержимого (например, text/html)
[ [*class_key]] – тип (ресурс, папка или ссылка)
[ [*published]] – опубликован ли ресурс (1|0)
[ [*parent]] – номер (ID) родительского ресурса
[ [*isfolder]] – является ли ресурс папкой (1|0)
[ [*richtext]] – используется ли при редактировании страницы визуальный редактор
[ [*template]] – номер (ID) используемого шаблона для ресурса
[ [*menuindex]] – порядковый номер отображения в меню
[ [*searchable]] – доступен ли ресурс для поиска (1|0)
[ [*cacheable]] – кэшируется ли ресурс (1|0)
[ [*deleted]] – ресурс удален (1|0)
[ [*deletedby]] – идентификатор пользователя, удалившего ресурс
[ [*menutitle]] – заголовок меню, если таковой есть
[ [*content_dispo]] – вариант выдачи содержимого (1 – для отображения | 0 – прикрепленное для скачивания)
[ [*hidemenu]] – документ не отображается в меню (1|0)
[ [++modx_charset]] – выводит название используемой кодировки
[ ^q^] – количество запросов к БД
[ ^qt^] – время, затраченное на обработку запросов
[ ^p^] – время работы php скрипта
[ ^t^] – общее время загрузки страницы. Сумма двух предыдущих значений
[ ^s^] – источник загрузки страницы — кэш или база данных.
1. Откройте для редактирования чанк HEAD и в теге вставьте конструкцию:
Эта конструкция будет выводить в названии HTML-страницы название ресурса и заголовок сайта, разделенные знаком «|».
2. Затем добавьте META тег description, в содержимое которого вписываем конструкцию [ [*description]]
3. Измените кодировку в шаблоне. Если помните, у нас она была выставлена в UTF-8. В списке выше указан тег, который выводит название кодировки, используемой на сайте.
После внесения всех перечисленных изменений чанк HEAD будет иметь следующий вид:
[ [*pagetitle]] | [ [++site_name]]
plusbusiness/ styles/layout.css» type=»text/css»/>
4. Посмотрите, как выглядит заголовок страницы Услуги в окне браузера. У нас выглядит так:
5. Сейчас неплохо было бы автоматизировать вывод главного заголовка
[ [*longtitle]]
Таким образом, главные заголовки
[ [*pagetitle]]
Стили для заголовка в шаблоне уже прописаны. Поэтому, если поле Расширенный заголовок Вы не оставили пустым на странице у вас появится заголовок. Вот так он выглядит:
6. После этого нам необходимо добавить вывод заголовков в шаблон Во всю ширину, ведь Вы помните, что в этом шаблоне чанка CONTENT у нас нет, а содержимое страниц мы вызываем сразу из шаблона с помощью тега [ [*content]]. Поэтому, откройте страницу редактирования шаблона и добавьте над этим тегом вывод заголовка:
[ [*longtitle]]
Реализация цепочки навигации «Хлебные крошки». Сниппет pdoCrumbs
Цепочка навигации будет показывать посетителю, где он находится относительно главной страницы.
Реализовать строку навигации в MODx можно реализовать с помощью сниппета pdoCrumbs. Он входит в состав пакета pdoTools, который мы установили в одном из предыдущих уроков, и его основной задачей является создание этой цепочки.
Чтобы вызвать сниппет pdoCrumbs в шаблоне мы должны вставить следующую конструкцию:
В этом случае результат работы будет кэшироваться, и при повторном вызове сниппета код не обрабатывается, а берется из кэш. Некэшируемый вызов осуществляется с помощью названия сниппета, помещенного в квадратные скобки с восклицательными знаками. Вот как бы выглядел некэшируемый вызов: [ [!pdoCrumbs]]
В нашем шаблоне хлебные крошки будут отображаться на всех страницах, кроме главной. Мы вынесли этот элемент в отдельный чанк с именем BREADCRUMB. Сейчас в этом чанке находится следующий код:
7. Навигационная цепочка в этом чанке представляет собой ненумерованный список, помещенный в два контейнера
Внимание: в конструкции вызова сниппета имя должно быть написано точно так же, как на странице в администраторской панели: Элементы – Сниппеты. Это значит, что если Вы напишите с маленькой буквы, либо все буквы будут заглавными, то вызов сниппета осуществлен не будет.
8. Обновите сайт. В браузере на всех страницах, кроме главной будет отображаться динамическая цепочка навигации. Вот как она будет выглядеть на странице Услуги:
Как видно из рисунка, если вызывать сниппет pdoCrumbs без параметров, то сниппет выводит только пункт текущей страницы и не показывает всю цепочку от корня сайта.
Рассмотрим специальные параметры, которые Вы сможете передавать сниппету pdoCrumbs, чтобы иметь полный доступ к оформлению цепочки навигации.
Напомним, что передача параметров сниппету осуществляется с помощью следующей конструкции:
[ [pdoCrumbs? &имя_параметра1=`значение` &имя_параметра2=`значение`]]
Мы уже пользовались подобным синтаксисом при передаче параметров сниппету pdoMenu в уроке по реализации динамического меню.
Параметры pdoCrumbs можно посмотреть в документации на странице https://docs.modx.pro/ komponentyi/pdotools/ snippetyi/pdocrumbs
9. В чанке BREADCRUMB замените конструкцию вызова сниппета [ [pdoCrumbs]] на следующий код:
Ваш чанк BREADCRUMB должен выглядеть следующим образом:
Параметр &showHome=`1` отвечает за вызов ссылки на главную страницу в цепочке «хлебных крошек».
&tpl – шаблон для оформления ресурса в цепочке.
&tplHome – шаблон оформления ссылки на главную страницу.
&tplWrapper – шаблон-контейнер для всей цепочки, в нашем случае выводит список
&tplCurrent – шаблон оформления текущего документа.
&outputSeparator – разделитель между пунктами цепочки.
10. Обновите страницу Услуги в браузере. Сейчас цепочка навигации выглядит как такой нумерованный список.
11. Чтобы исправить ситуацию откройте в файловом менеджере хостинга файл стилей layout.css. Он находится в папке assets/plusbusiness/styles Щелкните правой кнопкой мыши по имени файла и выберите пункт Правка.
12. В открывшемся окне найдите раздел /*—-BreadCrumb—*/
13. И замените его на следующие стили
Выполните команду Файл – Сохранить в верхнем меню.
Мы не будем приводить сравнение этих двух блоков стилей, т.к. Вы уже владеете CSS и сможете разобраться без дополнительных пояснений.
14. Обновите страницу. Если после обновления не видно изменений (мы ведь используем кэшируемый вызов сниппета pdoCrumbs), нажмите Ctrl+F5, чтобы загрузить страницу не из кэша браузера. После обновления страницы внешний вид нашей цепочки навигации значительно изменится. Номеров не будет, ссылки будут подчеркнуты.
Источник
Мета-теги и заголовки MODx
В CMS MODx есть специальная система размещения мета-тегов страницы. Она присутствует на всех версиях системы до 1.0.0 включительно. О размещении META-тегов в MODx 1.0.2 вы можете прочитать здесь .
Рабоатет она довольно странно и, возможно, неудобно.
Как это работает по умолчанию
В системе есть возможность добавлять МЕТА-теги. Делается это на вкладке Ресуры(Elements) -> Управление МЕТА-тегами и ключевыми словами(Manage META-tags and Keywords).
Здесь можно внести необходимые МЕТА-теги, а также ключевые слова.Для того чтоб МЕТА-теги отображались на конкретной странице их надо выбрать в настройках документа для соответствующей страницы:
Добавлять в шаблон информацию о МЕТА-тегах не надо, она сформируется автоматически.
Тег title.
Для отображения этого тега в шаблонах modx обычно используются конструкции вроде
в этом случае заголовком страницы будет ее название или, как во втором случае, название сайта и название страницы. При добавлении META-тега title он будет отображаться таким образом :
Это не всегда удобно. Ниже приведен сниппет, который берет за заголовок страницы соответствующий внесенный МЕТА-тег, а если не находит его, то заголовок страницы:
db->query( ‘SELECT *
FROM modx_site_content_metatags
INNER JOIN modx_site_metatags ON modx_site_content_metatags.metatag_id = modx_site_metatags.id
WHERE modx_site_content_metatags.content_id =’.$modx->documentIdentifier );
while( $row = $modx->db->getRow( $result ) ) <
if ($row[‘tag’]==’title’) <$output .= $row[‘tagvalue’]; >;
>
if ($output==») <
$a = $modx->getPageInfo($modx->documentIdentifier);
$output .= $a[‘pagetitle’];
>
echo $output;
?>
Сохранить его можно под названием showtitle и вызывать в шаблоне [[showtitle]] в блоке head например так:
Тег keywords.
В системе есть два способа внесения ключевых слов:
1) Можно это сделать аналогично остальным тегам (например description);
2) Можно внести список всех, встречающихся на сайте ключевых слов и выбирать для каждой страницы их список. В этом случае в коде HTML будет примерно следующая конструкциия:
Т. е. ключевые слова будут перечислены через запятую. Если одновременно указать ключевые слова обоими способами, то META-тегов будет два, что, наверное, нежелательно.
Теги descrition, robots и т. п.
Соответствующие теги просто вносятся в систему и выбираются для страницы. В коде HTML появляются конструкции:
Рассмотрим все это на конкретном примере
На вкладке ресурсы — Управление META-тегами и Ключевыми словами внесем необходимые нам META-теги. Вносить надо все МЕТА-теги для всего сайта.
На этой же странице внесем ключевые слова. Если для сайта есть набор ключевых слов, который подходит для каждой страницы(большинства страниц), то целесообразно вносить ключевые слова через нижнюю форму. В нашем примере, для каждой страницы списка рефератов будут актуальны ключевые слова «скачать рефераты» и «коллекция рефератов» остальные ключевые слова для каждой рубрики будут разные
Если для сайта характерны уникальные для каждой страницы наборы ключевых слов(или изредка пересекающиеся) то для их добавления целесообразно использовать верхнюю форму добавления META-тегов. Нижнюю форму использовать в этом случае не надо.
Далее на каждой странице выбираем нужные нам метатеги. Если мы решили, что будем загружать ключевые слова по второму принципу — первый столбец будет пустым, если по первому — во втором столбце не будет тегов keywords. Нельзя использовать два способа одновременно.
С еще одним способом организации размещения мета-информации на сайте, а также с размещением мета-тегов в последних версиях MODx можно прочитать здесь .
Источник