УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Уроки 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/images/demo/imgl.gif" alt="" />
      <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/en/extras/simplesearch/simplesearch#switchsettings

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/styles/layout.css вставьте следующую конструкцию:

/* -------------------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/komponentyi/pdotools/snippetyi/pdositemap

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/komponentyi/yandexmaps