Создание блога на MODx. Урок 6 — Поиск по сайту, контактная форма, HTML и XML карты, RSS рассылка

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

Итак, приступим.

Оглавление сегодняшнего урока:

  1. Форма поиска с оформлением страницы с результатами (сниппет AjaxSearch)
  2. Контактная форма, на основе HTML разметки из шаблона (сниппет eForm)
  3. HTML карта сайта для посетителей и XML карта для поисковиков (сниппеты Wayfinder и Sitemap)
  4. RSS лента блога (сниппет Ditto)
  5. E-mail рассылка с блога (сервис Feedburner)

Поиск по сайту

Перед тем, как мы начнем создавать поиск на нашем MODx блоге, предлагаю освежить в памяти содержимое двух уроков из прошлого курса, в которых довольно подробно описывается работа сниппета AjaxSearch: организация поиска по сайту и вывод изображений, прикрепленных с помощью TV в результатах поиска.

Создаем в дереве документов ресурс с именем, например, «Результаты поиска», на котором в дальнейшем будем выводить найденные материалы. Помещаем в области содержимого ресурса вызов сниппета следующего вида:

[!AjaxSearch? &ajaxSearch=`0` &pagingType=`0` &showInputForm=`0` &grabMax=`7` !]

Переданные параметры и их значения:

&ajaxSearch=`0` — выключить режим Ajax при поиске;

&pagingType=`0` — режим постраничного разбиения результатов поиска (более подробно в прошлом курсе);

&showInputForm=`0` — не выводить форму поиска на странице результатов;

&grabMax=`7` — количество результатов на странице.

В настройках ресурса на вкладке «Общие» выбираем шаблон «Внутренняя страница», снимаем галочку «Показывать в меню» и на вкладке «Настройка страницы» убираем галочки: «Использовать HTML-редактор», «Доступен для поиска», «Кэшируемый».

Страница с результатами поиска

Теперь отправляемся редактировать чанк HEADER, в котором у нас сейчас находится вывод формы поиска. Находим в этом чанке следующий код формы:

   <form id="quick-search" method="get" action="index.html">
      <fieldset class="search">
         <label for="qsearch">Search:</label>
         <input class="tbox" id="qsearch" type="text" name="qsearch" value="Search..." title="Start typing and hit ENTER" />
         <button class="btn" title="Submit Search">Search</button>
      </fieldset>
   </form>

И вместо него вставляем вызов сниппета AjaxSearch:

[!AjaxSearch? &ajaxSearch=`0`  &landingPage=`16` &showResults=`0` &showIntro=`0` !]  

Обязательно в параметре сниппета &landingPage укажите ID ресурса с выводом результатов поиска (ID ресурса, созданного на прошлом шаге). Это число скорей всего у вас будет отличаться от моего примера.

После сохранения вы увидите, что внешний вид формы поиска изменился, и она выглядит некорректно:

Ошибка в отображении поиска

Это связано с тем, что изменились названия классов и идентификаторов, которые использовались в CSS для описания стилей. Если посмотреть на HTML разметку формы поиска, вместо которой мы вызвали сниппет, то можно увидеть: для тега form прописан id="quick-search", тег fieldset имеет class="search", тег input имеет class="tbox", а кнопка поиска реализована с помощью тега button с классом class="btn".

Для того, чтобы исправить внешний вид формы поиска, мы можем воспользоваться двумя вариантами: добавить в шаблон формы поиска требуемые теги классы и id, либо переписать CSS стили под новые сгенерированные сниппетом классы и ID. Думаю, что быстрее будет подредактировать шаблон.

Все шаблоны вывода для сниппета AjaxSearch находятся в папке assets/snippets/ajaxSearch/templates/, а за вывод формы поиска отвечает файл input.tpl.html, находящийся в этой папке. Давайте изменим этот файл.

Сейчас в файле input.tpl.html находится следующая конструкция:

Файл шаблона вывода

Вносим следующие изменения: добавляем необходимые идентификаторы и классы, заменяем отображение кнопки на тег button и удаляем лишние теги label.

Редактируем шаблон формы поиска

Места, в которые были внесены правки подчеркнуты красным. Скачать измененный input.tpl.html вы сможете в конце урока в разделе с файлами к уроку.

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

Чтобы изменить внешний вид этой страницы, давайте добавим некоторые CSS стили в файл assets/templates/blog/css/coolblue.css:

Предлагаю оформить CSS следующим образом:

.AS_ajax_resultsIntroFailure,.ajaxSearch_grpResult{margin-left:25px; padding-top:20px;}
.ajaxSearch_result{padding:15px; border:1px solid #666; margin:15px 15px 15px 0px; background:#f3fdfe;  border:1px solid #dbf8fb;}
.ajaxSearch_resultLink{font-size:1.3em}
.ajaxSearch_highlight{ background:#dbf8fb;}
.ajaxSearch_resultsInfos .ajaxSearch_highlight{ background:none;}
.ajaxSearch_resultExtract p{margin-left:0;}

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

Результаты поиска, стилевое оформление

Примечание: вы можете делать стилевое оформление любым, каким пожелаете, используя указанные CSS классы.

Создание контактной формы

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

Перед тем, как вызвать на странице с контактной информацией сниппет eForm, необходимо создать три чанка-шаблона: шаблон формы, шаблон отправляемой на почту информации и чанк с текстом об удачной отправке сообщения. Предлагаю все эти чанки объединить в одну категорию с названием «Форма обратной связи».

В качестве шаблона формы будем использовать HTML разметку страницы шаблона assets/templates/blog/style.html. Там есть код HTML формы:

<form action="index.html" method="get" id="contactform">
       <p class="no-border"><strong>Send me a message</strong></p>
       <p>
       <label for="subject">Subject</label><br />
        <select id="subject" name="subject" tabindex="1">
            <option value="1">Option One</option>
            <option value="2">Option Two</option>
            <option value="3">Option Three</option>
        </select>
       </p>
       <p>	
       <label for="name">Your Name</label><br />
       <input id="name" name="name" value="Your Name" type="text" tabindex="2" /></p>
       <p><label for="email">Your Email Address</label><br />
       <input id="email" name="email" value="Your Email" type="text" tabindex="3" /></p>
       <p><label for="message">Your Message</label><br />
       <textarea id="message" name="message" rows="10" cols="20" tabindex="4"></textarea></p>
       <p class="no-border"><input class="button" type="submit" value="Submit" tabindex="5" />
       <input class="button" type="reset" value="Reset" tabindex="6" />	 </p>
</form>

Отправляемся создавать чанк c именем, например form-tpl и помещаем в область содержимого следующую конструкцию, представляющую из себя обычную HTML разметку с добавленным специальным синтаксисом eForm.

[+validationmessage+]
<form id="ContactForm" method="post"  action="[~[*id*]~]">
<input type="hidden" name="formid" value="contact-form" />
<p><label for="subject">Тема сообщения</label><br />
<select id="subject" name="subject">
<option value="Предложение">Предложение</option>
<option value="Вопрос">Вопрос</option>
</select> </p>
<p>
<label  for="name">Имя или псевдоним</label><br />
<input id="name" type="text" maxlength="150"   name="name" eform="Ваше имя::1"   />
</p>
<p>
<label for="email">Email</label><br /> <input type="text" id="email"   name="email" size="40" maxlength="50" eform="Email:email:1"  />
</p>
<p> <label for="message">Сообщение</label><br /><textarea id="message" cols="20" rows="10" maxlength="1500"  name="comments" eform="Сообщение:html:1" ></textarea> </p>
<p class="no-border">
<input name="submit" id="submit" class="button" type="submit" value="Отправить" />
<input class="button" type="reset" value="Очистить" />
</p>
</form>

При создании формы мы прописали по-русски названия полей, указали какие из них будут обязательными и сделали проверку на правильность введенного e-mail. Скачать содержимое чанка form-tpl вы сможете в конце урока в разделе с остальными файлами.

Главное при создании шаблона для контактной формы — не пропустить специальный плейсходлдер eForm для вывода сообщения об ошибке при неверном заполнении, указать в качестве обработчика формы ту же страницу на которой вызван сниппет, и проследить за полным совпадением идентификаторов и классов с первоначальной HTML разметкой, для верного отображения CSS стилей.

Очень подробно конструкции, используемые в шаблоне eForm описаны в прошлом курсе. Если какой-то момент из выше приведенного кода вам еще не ясен — обязательно посмотрите подробный урок о eForm.

После создания шаблона формы необходимо создать чанк, который будет отвечать за отображение отправляемой на e-mail информации. Назовем его, например, report-tpl.

В область «Код чанка» скопируем содержимое этого файла.

Шаблон отправляемой информации

Напомню, что названия плейсходлеров вида [+имя+], отвечающих за вывод содержимого полей должны совпадать с указанными атрибутами name="имя" для  полей, прописанных в шаблоне формы. Скачать содержимое чанка report-tpl вы также можете в конце урока в разделе с файлами к уроку.

Сейчас нам осталось создать еще один чанк с информацией об успешной отправке сообщения.

Создадим чанк с именем, например, thank-tpl и в область  «Код чанка» скопируем содержимое этого файла.

Информация об успешной отправке сообщения

Скачать код, с содержимым чанка  thank-tpl вы сможете скачать в конце урока в разделе с остальными файлами.

После того, как все чанки-шаблоны были созданы необходимо прописать конструкцию вызова сниппета на странице. Отправляемся на страницу в дереве сайта, на которой вы хотите видеть форму обратной связи. В моем примере это страница «Контактная информация» и в области «Содержимое ресурса» вставляем вызов сниппета eForm, указывая в вызове все только что созданные чанки.

[!eForm? &formid=`contact-form` &tpl=`form-tpl`&to=`m@m.ru` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`0` !]

В вызове сниппета используются следующие параметры и их значения:

&formid=`contact-form` — указываем идентификатор формы, прописанный в шаблоне;

&tpl=`form-tpl`— название чанка, в котором хранится HTML шаблон формы;

&to=`m@m.ru` — в значении этого параметра обязательно впишите адрес вашего почтового ящика, на который будут приходить все отправленные с помощью формы сообщения;

&report=`report-tpl` — имя чанка, в котором лежит шаблон для отображения отправляемой на e-mail информации;

&thankyou=`thank-tpl`  — имя чанка, в котором лежит шаблон сообщения об удачной отправке формы;

&vericode=`0` — выключаем капчу для формы.

После вызова сниппета на странице появится контактная форма следующего вида:

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

Давайте внесем небольшие правки в CSS файл, чтобы сделать внешний вид нашей формы более подходящим.

Добавим в CSS файл следующую конструкцию, чтобы оформить сообщение об ошибках при заполнении формы и сообщения об удачной отправке:

.errors{padding: 10px 10px 10px 0px;color:#df7c83; margin-left:25px;}
.thank{padding: 10px 10px 10px 0px;color:#018fbe; margin:25px; border:1px solid #74c2c9; background:#daf5f8;}
.thank h4{color:#018fbe;}

После этого сообщение об ошибке будет выводиться красным цветом:

Вывод сообщения об ошибке

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

Сообщение об отправке

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

Находим в файле coolblue.css следующую конструкцию:

form {
margin: 10px 25px 10px 25px;	
padding: 10px 25px 25px 25px;    
background: #F3F4F5;    
border: 1px solid #E2E4E7;	
width: 477px;
}

и убираем в ней жестко прописанную ширину формы width: 477px.

Затем находим стиль, описывающий поля в форме

#name, #email, #message, #website {width: 460px;} 

и меняем его на

#name, #email, #message, #website {	width: 625px;} 

Итоговый CSS файл со всеми внесенными изменениями вы сможете скачать в конце урока в разделе с файлами к уроку.

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

Создание XML и HTML карты сайта на MODx

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

Для вывода HTML карты сайта воспользуемся сниппетом Wayfinder, а для создания XML карты придется установить еще один сниппет Sitemap.

Начнем с карты для посетителей.

HTML карта сайта c помощью Wayfinder

Создаем в корне дерева сайта ресурс с заголовком «Карта сайта», указываем для него псевдоним, например sitemap и в настройах страницы убираем галочки: «Доступен для поиска», «Использовать визуальный редактор».

В области содержимого вставляем вызов следующую конструкцию с вызовом сниппета Wayfinder:

<div class="sitemap">
[!Wayfinder? &startId=`0` &excludeDocs=`9, 10` &level=`5` &sortBy=`id` !]
</div>

Используемые параметры в вызове сниппета:

&startId=`0`— ID папки из которой выводить документы. Значение 0 указывает, что сниппету необходимо вывести все ресурсы из дерева сайта.

&excludeDocs=`9, 10` — ID исключаемых документов из карты сайта. Желательно из карты сайта исключить ссылку на саму карту и другие служебные страницы (результаты поиска, и т.д.). Внимание: ID исключаемых ресурсов вероятно не совпадут с указанным примером, поэтому будьте внимательны и посмотрите в дереве сайта ID документов, которые вы не хотите видеть в своей карте сайта.

&level=`5` — возможный уровень вложенности ресурсов.

&sortBy=`id` — сортировка документов по ID.

Пропишем стили в CSS файле, для оформления карты сайта:

.sitemap ul li { margin: 5px 20px; list-style: disc; list-style-image: url(../images/list.gif); } 
.sitemap ul li a{ color: #33799B} 
.sitemap ul li a:hover{ color:#000}

При этом не забудьте положить в папку assets/templates/blog/images/ изображение list.gif, которое используется в виде буллета для списка карты сайта (чтобы скачать файл list.gif нажмите Ctrl+S в вашем браузере).

После этого внешний вид карты сайта примет следующий вид:

Карта сайта

Создание XML карты сайта sitemap.xml

Для того чтобы вывести XML карту сайта сперва необходимо создать страницу, на которой она будет отображаться. В дереве документов создаем ресурс со следующими параметрами:

Заголовок — XML карта сайта

Псевдоним — sitemap.xml

Шаблон — (blank)

Показывать в меню — нет

Использовать HTML-редактор — нет

Тип содержимого — text/xml

Внимание: убедитесь, что все перечисленные  настройки ресурса вы указали верно!

После создания страницы для карты отправляемся создавать сниппет Sitemap.

Имя сниппета — sitemap

Описание — XML карта сайта

Код сниппета (php) — в эту область необходимо скопировать содержимое этого файла.

Сейчас можно отправляться на недавно созданную страницу в дереве документов, чтобы в область содержимого поместить конструкцию вызова sitemap.

Создание XML карты сайта

После сохранения ресурса с XML картой сайта вы можете посмотреть что получилось, нажав кнопку «Просмотр», либо набрав в адресной строке URL следующего вида http://адрес_сайта/sitemap.xml. Внешний вид XML карты будем следующим:

XML карта сайта

Эту карту вам в дальнейшем необходимо будет добавить в панели веб-мастеров Google и Яндекса. Для чего это надо и как это сделать описывается в уроке из прошлого курса.

Если нет никаких ошибок в выводе XML карты, можно двигаться дальше. Отправляемся создавать RSS ленту и e-mail подписку.

RSS лента MODx сайта и E-mail подписка с блога

Что такое RSS и с чем его едят вы сможете прочитать на русском языке в Википедии. Если вкратце, то с помощью RSS можно транслировать краткое описание либо полный текст новой информации, появившейся на вашем сайте/блоге. Интернет-ресурс в формате RSS называется RSS-каналом, RSS-лентой или RSS-фидом. Все современные браузеры умеют работать с этим форматом данных, кроме того, существуют специализированные приложения (RSS-агрегаторы), собирающие и обрабатывающие информацию с этих RSS-каналов. Также очень популярны веб-агрегаторы, представляющие собой сайты по сбору и отображению RSS-каналов, такие как Google Reader, Яндекс.Лента.

Для примера RSS лента моего блога выглядит следующим образом, также с помощью этой технологии реализована подписка на e-mail. При появлении нового материала в блоге анонс записи отображается в RSS агрегаторе, либо приходит на почту посетителям, которые подписались на e-mail рассылку. (Если есть те, кто еще не работал с RSS лентами, рекомендую подписаться на рассылку с моего блога и попробовать эту технологию вживую, после подписки, вы всегда сможете оперативно узнавать о появлении новых материалов блога).

Давайте сначала определимся с тем, что именно мы будем отдавать в RSS ленту. Предлагаю публиковать в RSS только краткие анонсы заметок блога со ссылкой на полную статью. Делать это мы будем опять же с помощью старого доброго сниппета Ditto, но сперва создадим ресурс на котором будет идти вывод ленты:

Заголовок — Название вашей ленты

Псевдоним — rss.xml

Шаблон — (blank)

Использовать HTML-редактор — нет

Тип содержимого — text/xml

Внимание: убедитесь, что все перечисленные настройки ресурса вы указали верно!

После этого вставляем в область «Содержимое ресурса» вызов сниппета Ditto:

[[Ditto? &parents=`2,3,4` &format=`rss` &display=`all`  &depth=`2`  ]]

&parents=`2,3,4` — через запятую вписываем сюда ID папкок, из которых будут браться заметки для ленты. Т.е. здесь будут вписаны ID всех наших категорий и подкатегорий. Если вы решите какой-нибудь раздел не отдавать в RSS ленту, то просто не вписывайте его идентификатор в этот параметр.

&format=`rss`— указываем формат данных Ditto.

&display=`all` — выводить в ленту все найденные документы.

&depth=`2` — возможная глубина вложенности статей.

Теперь при промоторе в браузере страницы RSS лента будет выглядеть вот так:

Внешний вид RSS ленты сайта

Работа с сервисом Feedburner

Если вы создаете блог прямо на хостинге, то можете сразу «прожечь» ваш RSS фид с помощью feedburner.google.com. Это поможет вам в дальнейшем управлять вашими подписчиками, смотреть статистику RSS ленты и реализовать автоматический кросспост кратких анонсов с блога в другие социальные сервисы, например, в Twitter. Для того, чтобы воспользоваться Feedburner, у вас должен быть аккаунт в Google, если его у вас по каким-то причинам нет, настоятельно рекомендую завести. 

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

Чтобы добавить ваш RSS канал в feedburner.google.com, просто после авторизации введите адрес вашей страницы с RSS лентой и нажмите кнопку Next.

RSS фид

На следующем шаге дайте название вашей RSS ленте и заполните URL адрес, по которому будет доступен ваш фид (эти поля уже будут заполнены по умолчанию, если вас устроит их содержимое, можете оставить без изменений).

Второй шаг по созданию RSS фида

После заполнения информации нажимайте кнопку Next для перехода на следующий шаг. На следующих двух шагах также переходите далее с помощью этой кнопки.

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

Ссылка на RSS фид в шапке сайта

и в правой колонке:

RSS в правой колонке

Думаю, что вы без труда справитесь с тем, чтобы проставить ссылку на RSS ленту самостоятельно в чанках HEAD и SIDEBAR. 

Активация подписки по электронной почте в Feedburner

Помимо обычной RSS ленты, которую посетители смогут читать с помощью различных агрегаторов (Google Reader, Яндекс.Лента и т.д.) вы можете с помощью Feedburner реализовать E-mail подписку с блога, воспользовавшись которой посетители смогут получать краткие анонсы о новых материалах на свой электронный адрес. В качестве примера подобного решения — подписка с моего блога efimov.ws.

Для того, чтобы воспользоваться этой функцией вам необходимо в сервисе Feedburner её активировать. Делается это на вкладке: Публикуй → Подписки по электронной почте.

Активация E-mail подписки

На следующем шаге из выпадающего списка необходимо выбрать язык:

Выбрать язык

и скопировать сгенерированный код формы подписки или ссылки на e-mail подписку. Предлагаю скопировать только URL адрес ссылки, по нажатию на которую посетитель сможет открыть форму подписки.

Ссылка на e-mail рассылку

Затем необходимо прописать этот URL для изображения в правой колонке. Добавить эту ссылку как и в случае со ссылкой на RSS ленту можно отредактировав чанк SIDEBAR.

Ссылка на email рассылку

Как только у вас появятся подписчики по электронной почте, вы сможете с помощью Feedburner просматривать и сортировать список, активировать и деактивировать отдельные адреса электронной почты.

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

Ниже приведены все измененные и созданные файлы и чанки, с которыми мы работали в этом уроке:

Файлы к уроку

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

В следующем уроке мы с вами реализуем следующие моменты:

  • оформим внутренние страницы блога
  • реализуем цепочку навигации на внутренних страницах
  • добавим кнопоки «Поделиться в социальных сетях»
  • добавим комментирование материалов блога
  • оформим футера блога

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

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

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

05.12.2011
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus