Уроки MODx Revolution
Скачать материалы к учебному курсу - папка distr_MODx.zip
Урок 8. Реализация поиска в MODx. Карта сайта
Изначально в выбранном нами шаблоне не было предусмотрено наличие поиска по сайту. Поэтому мы сами добавим его на страницу. Чтобы гармонично вписать форму поиска в шаблон, и чтобы она отображалась на всех страницах создаваемого сайта, давайте поместим ее внизу страницы в футере сайта.
В футере сейчас находится три колонки с блоками различной информации. Давайте их преобразуем таким образом, чтобы в первой колонке была краткая информация о нашем сайте, во второй колонке контактная информация, а в третью колонку поместим форму поиска.
Если Вы помните, когда мы разбивали шаблон на чанки, мы поместили нижнюю часть в чанк с именем FOOTER.
1. Замените HTML-содержимое чанка FOOTER на следующий код:
<div class="wrapper col4">
<div id="footer">
<div class="box1">
<h2>Несколько слов о компании</h2>
<img class="imgl" src="/assets/plusbusiness/
<p>Несколько слов о компании на главной странице. Можно написать о всех достижениях. Так же в этом блоке вы можете дать <a href="#">ссылку</a> на страницу с полной информацией о вашей фирме.</p>
<p>В общем, в этом блоке будет важная информация кратко описывающая чем занимается ваша фирма.</p>
</div>
<div class="box contactdetails">
<h2>Поиск по сайту</h2>
</div>
<div class="box contactdetails">
<h2>Контактная информация</h2>
<p>Вы можете связаться с нами любым удобным для Вас способом.</p>
<p>Наши менеджеры обязательно свяжутся с вами в ближайшее время.</p>
<ul>
<li><strong>Сайт:</strong> efimov.ws</li>
<li><strong>ICQ:</strong> 3-695-058</li>
<li><strong>Skype:</strong> all_ximik</li>
<li class="last"><strong>Email:</strong> allximik1@gmail.com</li>
</ul>
</div>
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col5">
<div id="copyright">
<p class="fl_left">Copyright © 2010 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">Template by <a href="<a href="http://www.os-templates.com/">http://www.os-templates.com/</a> " title="Open Source Templates">OS Templates</a></p>
<br class="clear" />
</div>
</div>
После внесенных изменений внешний вид футера сайта будет следующим:
Рисунок 8.1
Как видите, пустым остался только блок, в котором будет находиться поиск по сайту. Сейчас мы это исправим.
2. Сначала установите сниппет SimpleSearch с помощью Пакеты – Установщик.
SimpleSearch имеет 2 сниппета – один для отображения формы (SimpleSearchForm), а другой для отображения результатов поиска (SimpleSearch).
Для вывода результатов поиска необходимо создать ресурс в дереве ресурсов.
3. Найдите блок в HTML-разметке чанка FOOTER и поместите в него вызов сниппета SimpleSearch. Пока можно самый простой вызов, без передачи дополнительных параметров
[[!SimpleSearchForm]]
Вот как будет выглядеть после этого код блока поиска в футере:
<div class="box contactdetails">
<h2>Поиск по сайту</h2>
[[!SimpleSearchForm]]
</div>
4. Обновите страницу в браузере. В футере должна появиться строка поиска.
Рисунок 8.2
Сейчас сделаем так, чтобы результаты поиска отображались на другой странице.
5. Для этого сначала создайте новый ресурс в дереве сайта с именем, например, Результаты поиска с шаблоном 2 колонки. При создании ресурса на вкладке Документ установите галочку Скрыть из меню, а на вкладке Настройки уберите галочки Доступен для поиска, Кэшируемый и Использовать HTML-редактор.
6. Сохраните ресурс и обновите окно браузера.
7. В область содержимого созданного ресурса поместите еще один вызов сниппета SimpleSearch
[[!SimpleSearch]]
Рисунок 8.3
Результаты поиска будут оформляться в чанке SearchForm, который идет в поставке сниппета SimpleSearch, его код можно просмотреть, открыв чанк в дереве элементов.
Рисунок 8.4
7. Теперь при вызове сниппета в чанке FOOTER добавьте параметр, указывающий ID целевой страницы. В итоге конструкция вызова сниппета в футере сайта примет следующий вид:
<div class="box contactdetails">
<h2>Поиск по сайту</h2>
[[!SimpleSearchForm? &landing=`22` &tpl=`SearchForm`]]
</div>
Результаты поиска будут отображаться на странице с ID=22 (у вас идентификатор страницы может отличаться). При большом количестве результатов поиска они будут разбиты на страницы. По умолчанию отображается по 10 результатов на странице, но вы легко сможете изменить это число с помощью параметра &perPage (при вызове сниппета на странице результатов [[!SimpleSearch? &perPage=`2`]]).
Полную документацию по сниппету можно посмотреть по адресу https://docs.modx.com/current/
8. Введите запрос в строку поиска, например, слово сайт. Результаты поиска будут отображены на странице Результаты поиска. Страница с результатами поиска выглядит примерно так:
Рисунок 8.5
Внешний вид формы поиска и вид вывода результатов поиска Вы можете изменить с помощью CSS. Каждый блок по умолчанию выводится с определенным CSS классом или идентификатором, для которого Вы сможете прописать стили. Давайте с помощью CSS немного изменим внешний вид формы поиска, на странице с результатами добавим выделение цветом искомого слова.
9. Измените внешний вид формы поиска. Сначала сделайте копию чанка SearchForm и назовите SearchFormMy. И замените код на следующий:
<form role="search" action="[[~[[+landing]]]]" method="[[+method]]">
<label for="[[+searchIndex]]">
<input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" placeholder="Поиск..." value="[[+searchValue]]">
<input type="hidden" name="id" value="[[+landing]]" />
</label>
<input type="submit" value="Найти">
</form>
10. Соответственно измените имя шаблона в вызове сниппета.
[[!SimpleSearchForm? &landing=`22` &tpl=`SearchFormMy`]]
11. Просмотрите код, блока в котором расположена форма:
<div class="box contactdetails">
<h2>Поиск по сайту</h2>
<form role="search" action="rezultatyi-poiska.html" method="get">
<label for="search">
<input type="text" name="search" id="search" placeholder="Поиск..." value="">
<input type="hidden" name="id" value="22" />
</label>
<input type="submit" value="Найти">
</form>
</div>
12. Создайте стили для оформления формы, для этого отредактируйте файл: assets/plusbisiness/styles/layout.css
Добавьте следующие строки:
/* -------------------Search-------------------------------------*/
.box form input {padding:5px;}/*добавляем отступы в форме поиска*/
.box form input[type="submit"] {padding:5px 12px 5px 12px; background-color:#95AD19; color:#FFF; border: 2px solid #95AD19; font-weight: bold}/*добавляем стили кнопке Найти*/
.box form input[type="submit"]:hover {background-color:#bdda25; text-decoration: underline; cursor: pointer}/*добавляем стили кнопке Найти при наведении мыши*/
После этого форма поиска будет иметь следующий вид:
Рисунок 8.6
13. Введите слово сайт в строку поиска и нажмите Найти. Просмотрите код с результатами поиска.
Код выглядит следующим образом:
<h1>Результаты поиска</h1>
<p class="simplesearch-results">3 результатов найдено для "<span class="simplesearch-highlight">сайт</span>"</p>
<div class="simplesearch-paging">
<span class="simplesearch-result-pages">Страницы с результатами поиска:</span><span class="simplesearch-page simplesearch-current-page">1</span>
</div>
<div class="simplesearch-results-list">
<div class="simplesearch-result">
<h3>1. <a href="uslugi/sozdanie-sajtov.html" title="Расширенный заголовок Создание сайтов">Создание сайтов</a></h3>
<div class="extract">
<p>Содержание Создание <span class="simplesearch-highlight">сайт</span>ов</p>
</div>
</div>
<div class="simplesearch-result">
<h3>2. <a href="uslugi/prodvizhenie-sajtov.html" title="Расширенный заголовок Продвижение сайтов">Продвижение сайтов</a></h3>
<div class="extract">
<p>Содержание Продвижение <span class="simplesearch-highlight">сайт</span>ов</p>
</div>
</div>
<div class="simplesearch-result">
<h3>3. <a href="uslugi/sozdanie-sajtov/dizajn.html" title="Расширенный заголовок Дизайн">Дизайн</a></h3>
<div class="extract">
<p>Содержание Дизайн <span class="simplesearch-highlight">сайт</span>ов</p>
</div>
</div>
</div>
<div class="simplesearch-paging">
<span class="simplesearch-result-pages">Страницы с результатами поиска:</span>
<span class="simplesearch-page simplesearch-current-page">1</span>
</div>
14. Добавьте следующие стили в файл layout.css
.simplesearch-highlight, .simplesearch-current-page {background-color:#95AD19; color:#FFF;} /*подсветка слова поиска и номеров страниц*/
.simplesearch-current-page {padding: 1px 3px 1px 3px} /*отступы для номера страницы*/
.simplesearch-current-page:hover {text-decoration: underline; cursor: pointer} /*оформление номера страницы при наведении мыши*/
После изменения стилей результаты поиска будут выглядеть следующим образом.
Рисунок 8.7
Карта сайта для посетителей и поисковых машин
Карта сайта – своеобразное содержание сайта, аналогичное содержанию книги. Обычно карта сайта состоит из ссылок на все страницы либо разделы, содержащиеся на сайте. Карта сайта наглядно показывает, из каких страниц состоит сайт, и она помогает пользователю быстро найти интересующую его информацию. Карту можно отнести к элементу навигации: со страницы, на которой она расположена, посетитель сможет в один клик добраться до любого раздела или материала, который ему нужен.
Добавьте ссылку на карту сайта в футере в чанке FOOTER после вызова сниппета SImpleSearch:
<div class="box contactdetails">
<h2>Поиск по сайту</h2>
[[!SimpleSearchForm? &landing=`22` &tpl=`SearchFormMy`]]
<p>Также для поиска информации на сайте Вы можете воспользоваться <a href="#">картой сайта</a>.</p>
</div>
Создание карты сайта для посетителей
В MODx есть немало путей реализации карты сайта. В сегодняшнем уроке мы посмотрим самый распространенный способ – с использованием сниппета pdoMenu.
Если Вы помните, с помощью этого сниппета мы вызывали наши главное и вспомогательное меню на сайте.
Для того чтобы на какой-нибудь странице вывести дерево, состоящее из всех ссылок, достаточно вызвать сниппет с помощью следующей конструкции:
[[!pdoMenu? &parents=`0`]]
В этом случае сниппет пробежит по всему дереву документов в MODx и выведет в виде списка ссылки на все ресурсы. При этом дочерние документы контейнеров будут отображаться в виде вложенных списков UL.
Если Вы хотите, чтобы в итоговом дереве ссылок отображались также и документы, не отмеченные для показа в меню, необходимо добавить параметр &showHidden=`1` при в вызове сниппета.
1. Итак, создайте страницу с заголовком Карта сайта с шаблоном 2 колонки, установите галочку Скрыть из меню.
Рисунок 8.8
2. Во вкладке Настройки сбросьте флажок Использовать HTML-редактор 
и сохраните ресурс, обновите страницу браузера, чтобы настройка применилась и поместите в область Содержимое ресурса только что созданной страницы конструкцию вызова сниппета pdoMenu:
[[!pdoMenu? &parents=`0` &showHidden =`1`]]
Рисунок 8.9
Иногда есть необходимость исключить некоторые документы из дерева ссылок. Например, логично было бы не выводить ссылку на страницу с результатами поиска, или на саму карту сайта. Чтобы исключить из вывода служебные страницы, воспользуемся параметром &excludeDocs. В этом параметре в вызове сниппета необходимо через запятую указать ID докуметов, которые вы не хотите видеть в карте сайта.
3. В нашем случае страница с Картой сайта имеет идентификатор ID=23, а страница с результатами поиска ID=22, давайте исключим эти ресурсы из вывода карты сайта.
[[!pdoMenu? &parents=`0` &showHidden =`1` &excludeDocs=`22,23`]]
4. Также можно указать, по какому параметру производить сортировку выводимого списка ссылок, и допустимый уровень вложенности. Для этого можно использовать параметры: &level и &sortBy.
[[!pdoMenu? &parents=`0` &showHidden =`1` &excludeDocs=`22,23` &sortBy=`id`]]
Уровень вложенности и поле, по которому нужно отсортировать Ваш список, можете указать любыми.
Последний штрих, который можно сделать в создании карты сайта, это обернуть конструкцию вызова сниппета в контейнер с CSS классом, например, sitemap, чтобы из CSS файла иметь возможность изменить внешний вид выводимого списка.
Итоговая конструкция в коде с содержимым страницы Карта сайта (не забывайте, что ID у Вас могут быть другими, вставьте свои значения).
<div class="sitemap">
[[!pdoMenu? &parents=`0` &showHidden =`1` &excludeDocs=`22,23` &sortBy=`id`]]
</div>
5. Вставьте эту конструкцию в Содержимое ресурса.
Рисунок 8.10
Давайте поставим на нее ссылку в футере в блоке поиска по сайту под формой поиска.
6. Перейдите в чанк FOOTER.
Чтобы поставить ссылку можно воспользоваться специальным тегом MODx [[~id]], который выводит URL страницы с указанным ID. В нашем случае ID ресурса с картой сайта равен 23, поэтому вывод ссылки на эту страницу примет следующий вид:
<a href="[[~23]]">картой сайта</a>
У вас ID может отличаться.
7. Вставьте ссылку на карту сайта в соответствии с ID-ресурса Карта сайта у Вас. Проверьте работоспособность ссылки. Карта сайта выглядит примерно вот так:
Рисунок 8.11
8. В CSS можете прописать внешний вид нашей карты, как Вам нравится. Например, в CSS файл assets/plusbusiness/
/* -------------------Sitemap-------------------------------------*/
.sitemap ul{ padding:10px; list-style-type:none; margin:10px 20px;}
.sitemap ul ul,.sitemap ul ul, .sitemap ul ul ul, .sitemap ul ul ul ul { padding:10px;list-style-type:none; margin:10px 20px; border-left: 3px solid #ccc;}
.sitemap ul li { padding:2px;}
.sitemap a{color:#666;}
.sitemap a:hover{color:#B2C629;}
9. Обновите страницу в браузере. После этого внешний вид карты сайта будет следующим (если изменения не видны, не забываем про Ctrl+F5).
Рисунок 8.12
Создание карты сайта для поисковых машин
Мы позаботились о наших посетителях, предоставив им возможность в один клик с карты сайта перебраться на любой документ на сайте. Но это еще не все. Сейчас давайте создадим такую же карту, но не для посетителей, а для поисковых машин. Это, так называемая, XML карта sitemap.xml, адрес к которой можно указать в панели управления поисковиков, и которая будет оперативно сообщать поисковым роботам о новых недавно появившихся страницах на сайте. Подробнее о XML карте вы можете почитать в википедии.
Создать карту сайта для поисковых машин можно с помощью сниппета pdoSitemap, который входит в состав pdoTools.
Документацию по сниппету pdoSitemap можно посмотреть по адресу https://docs.modx.pro/
1. Создайте в корневом каталоге дерева документов новый ресурс со следующими настройками:
Заголовок – Карта сайта XML для поисковых систем
Шаблон – пустой шаблон
Псевдоним – sitemap
Скрыть из меню – установить флажок
Опубликован – установить флажок.
Рисунок 8.13
2. Во вкладке Настройки:
уберите галочки Использовать HTML-редактор, Доступен для поиска, Кэшируемый
установите Тип содержимого как XML.
Установите флажок Заморозить URI
В поле URI введите sitemap.xml
3. Сохраните ресурс и обновите страницу браузера, чтобы применить все настройки.
4. В поле содержимое введите [[!pdoSitemap]] и сохраните.
Рисунок 8.14
3. Просмотрите документ по адресу http://имя_сайта/sitemap.xml
Рисунок 8.15.
Так как карта сайта всегда имеет адрес в Интернет, то при добавлении ресурсов в дереве Вашего сайта, эта XML-карта всегда будет обновленной для поисковых систем.
Задание для самостоятельного изучения
На странице «Контактная информация»:
1. Создать контактную форму с помощью любого сниппета, предназначенного для создания форм на MODx Revolution.
2. Создать карту Яндекса средствами сниппета YandexMaps. Документация сниппета YandexMaps расположена по адресу https://docs.modx.pro/