Textpattern: больше, чем просто блог. Часть 3

В ходе упражнений с Textpattern’ом мне не пришлось усомниться в его гибкости. Наверное, на основе этого движка нельзя сделать только интернет-магазин (поговаривают, правда, что и под него пишут ядро некие волонтеры). Тэги, дивы и блоки — поверьте, это очень и очень увлекательно :), хотя, казалось бы, ничего сверхсложного делать нам не доводилось. Продолжаем обустраивать сайт , и сегодня мы завершим написание форм и познакомимся ближе с таким абстрактным понятием, как секции.

Я решил, что приводить код полностью нецелесообразно. Чтобы не «засорять» страницы журнала, я буду упоминать только самые наглядные моменты, которые считаю необходимым прокомментировать.
И последнее отступление. Возможно, в предыдущем номере я поступил нелогично, пропустив название второй главы. Исправляюсь: первая глава называется «Закладываем фундамент», вторая — …

Часть вторая. Верстка форм и страниц (продолжение)

Вот что мы сверстали в прошлый раз и что спустя один номер журнала подверглось изменению (пометка обновлено):

  • Страница default;
  • Форма head — обновлено;
  • Форма content — обновлено;
  • Форма sidebar — обновлено;
  • Форма top;
  • Форма footer — обновлено.

Некоторые формы и страницы будут содержать тэги, изначально “неадекватно” воспринимаемые движком. Дело в том, что для их обработки необходимо установить плагины. Пока мы работаем с сайтом в режиме «Тестирование», ошибки обработки тэгов отображаются вверху сгенерированной страницы. Комментируя, я буду указывать «чужие» тэги и дополнения, которые в связи с этим нужно установить.

Форма article_heading

Она отвечает за заглавие статьи (поста, новости и т. д. — в общем, любого материала).

<li class="orig—pub"><txp:permlink><txp:title /></txp:permlink></li>
 <h6>Опубликовано <abbr title="<txp:posted gmt=‘1’ 
 format="%Y—%m—%d, %H:%M:%S" />" class="datetime published">
 <txp:posted /></abbr>
 //  Тэги: <txp:tru_tags_from_article /> 
 // Комментарии: <txp:comments_count /></h6>
 <p class=‘meta’>
    

<li class="orig-pub"> — как вертикальный список будет отображаться название статьи. Мы его идентифицировали как «orig-pub» (используя class, хотя для одиночного элемента корректнее id), чтобы в css-файле его можно было отличить от других списков и присвоить в качестве фона иконку (см. скриншот), чтобы надпись выглядела не так скучно, что ли.

Далее идут: код, который выводит строку даты («Опубликовано…») в указанном формате, количество комментариев и список ключевых слов («Тэги:»). Пожалуйста, не путайте тэги Textpattern’а с «тэгами» — ключевыми словами. У нас это синонимы. То есть, для их разграничения второе понятие я беру в кавычки.

<txp:tru_tags_from_article /> — это тэг плагина tru_tags. Он выводит облако «тэгов». Зачем, спросите вы, это облако, если в TXP есть разделение по категориям? «Облако» — решение более функциональное, удобное и интересное, нежели категории: оно позволяет сортировать контент не по двум, а по множеству ключевых слов. Удачно и само оформление «облака», где каждый элемент, в зависимости от наполнения, имеет разную величину шрифта. Таким образом, «тэги» могут полноправно занять боковую панель сайта.

Форма full_article

Форма вывода публикации целиком. Кстати сказать, любой материал в TXP содержит еще и выдержку (excerpt) — вводную часть, чаще всего для ознакомления читателя с замыслом публикации.

<txp:output_form form=‘article_heading’ />
 <txp:etz_pg_body />
 <div id=“pagin”><h6><txp:etz_pg_pages /></h6></div>
    

<txp:output_form form=‘article_heading’ /> — мы сделали ссылку на предыдущую форму, чтобы сперва подгружался заголовок статьи. <txp:etz_pg_body /> — тэг плагина etz_pg, который разбивает большие материалы на страницы. Если вы делаете блог, то плагин этот, наверное, и не нужен, так как посты блога, «по закону жанра», вовсе не измеряются страницами. Последняя строка выводит номера страниц, оформленные div’ом pagin.

Ссылки. Форма plainlinks

<txp:link />
    

Проще формы не придумаешь :). Она предназначена для отображения ссылок. Поскольку у нас нет причин выводить еще и их описание (в духе «На этом сайте вы найдете…»), для этого потребовалось бы создать целый раздел — «Ссылки», мы ограничились выводом собственно названия.

Навигация. Форма nav

Вот и подобрались к основе всего сайта — к навигации. Я не стремился соригинальничать и придумать какие-либо кнопки или, к примеру, выезжающее меню на JavaScript. Нет, все лаконично (см. скриншот): текстовые ссылки с пунктирным подчеркиванием. В лаконизме и заключается суть разумного веб-дизайна!

<div id=“nav”>
    <txp:section_list active_class=“active” 
    sections=“Blog,Articles,Contact,About” 
    default_title=“Блог” wraptag=“ul” break=“li” />
    </div>
    

Код настолько же прост: с помощью тэга <txp:section_list /> и атрибутов wraptag и break TXP выводит список ссылок. Оформили все это div’ом nav, чтобы список принял вертикальное положение :).

Неплохие примеры меню приведены здесь. Если вы создаете меню без <txp:section_list />, используйте тэг <txp:site_url/>, заменяющий название сайта. Заметьте, слеш ставится не после тэга, а после адреса, например: <txp:site_url/>about/.

Поиск. Форма search_results

<div class=“content”>
    <h3>Результаты поиска</h3>
    <p><txp:search_result_url /></p>
    Опубликовано <txp:search_result_date>
    <p><txp:excerpt /></p>
    <div class=“resultdetail”>
    <p><txp:search_result_excerpt /></p>
    </div></div>
    

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

Комментарии

Если вы не боитесь объективной критики («Great» — наиболее употребимое слово на Западе, увы, не у «нас» :) и спаммеров, для обратной связи на сайте можете включить комментарии.

Вначале я не решался за браться за это дело: нужно было сделать целых 4 формы и реализовать комментарии на боковой панели. Не слишком ли это нагрузит сайт? Оказалось что нет, совсем нет. В разделе администратора следуем во вкладку Настройки — Главные — Настройки сайта и выставляем там примерно такие настройки.

«Принимать комментарии», «Включено по умолчанию», «Модерировать комментарии» — везде ставим «Да». Режим комментариев — «nopopup», чтобы не выскакивали ошибки, которых пока и так предостаточно :).

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

Комментарии нумерованным списком — «Нет». Номер комментария удобнее всего прописать в свойствах формы и css-стиля, и, таким образом, разместить его в нужном месте страницы. Нумерация «по умолчанию» пригодится разве что для очень простой разметки.

Форма comments_display

<txp:if_comments_preview>
    <txp:comments_preview form=“comments_preview” />
    <txp:comments_form=“1” />
    <txp:else />
    <txp:if_comments>
    <h3>Комментарии</h3>
    </txp:if_comments>
    <txp:comments />
    <txp:if_comments_allowed>
    <txp:comments_form />
    </txp:if_comments_allowed>
    </txp:if_comments_preview>
    

С помощью набора условий можно ограничить вывод форм. Смотрите, сперва мы поставим условие: если идет предосмотр комментария (<txp:if_comments_preview>), тогда выводим форму comments_preview. Второе условие: если это комментарии (<txp:if_comments>), включаем форму comments. Нужно следить за тем, чтобы все условия были завершены, ибо последствия непредсказуемы.

Форма comments

Отображение отдельно взятого комментария.

<div class=“comment-body entry-content”>
    <p class=“comment—meta”>
    <h6><txp:comment_time /> // <txp:comment_name />:</h6></p>
    <txp:message />
    </div>
    

Форма comments_preview

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

<div id=“cpreview”>Так будет отображен ваш комментарий
<p class=“comment-meta”>
<h6><txp:comment_time /> // <txp:comment_name />:</h6></p>
<txp:message />
</div>

Форма comment_form

Comment_form необходима для отображения формы заполнения нового комментария. Код объемный, поэтому смотрите его в архиве.

Совет. Если после верстки кода вы обновили браузер и с неприятным удивлением обнаружили безобразно расползшуюся по периметру окна страницу, не отчаивайтесь. Внимательно проверьте, все ли div’ы и другие тэги закрыты. Попробуйте добавить в сомнительный код «лишний» div — вдруг поможет :). Прояснить ситуацию также поможет исходный код сгенерированной браузером страницы.

Секции

Если вы уже определились, на какие рубрики будет разделен ваш сайт, переходим к секциям. А уже после этого возьмемся за верстку страниц — внешнюю оболочку разделов. Заходим в Оформление — Секции и смотрим, что можно добавить, убрать и изменить. Я разместил на своем сайте следующие разделы:

About — информация об авторе сайта. По моим наблюдениям, на многих зарубежных дизайнерских сайтах и эту информацию, и даже контактную форму выносят на боковую панель. Будет ли это уместным или наоборот —нагромождением слов и элементов, зависит от конкретной ситуации.
Articles — здесь мы разместим достаточно большие статьи. В моем случае — это публикации, в том числе о Textpattern’е. Поскольку таким материалам просто необходима разбивка на страницы, я включил нумерацию (ее также называют пагинацией).
Blog — публикация постов (новостей, мелких заметок, «мыслей по поводу»). Отличия от статей нет почти никакого, разве что секция имеет другое название и выдержки к материалу чаще всего не бывает.
Contact — обратная связь в виде формы, предназначенной для заполнения.
Search — результаты поиска. Сюда можно вывести ссылку и написать инструкцию по эксплуатации поиска :).
Tag — отображение публикаций, отсортированных по тэгам.

Остальные секций можно убрать (крестик справа), чтобы пустых разделов впоследствии не было. А вот такие настройки имеются в каждой секции:

Название секции: вводите латинские символы, все равно слово переведется в «некрасивый» транслит.
Заголовок секции: краткое описание секции, можно и на русском языке. About — «О себе», Contact — «Обратная связь» и т. д.
Использовать страницу… Для разделения контента, каждой секции нужно присваивать соответствующую ей страницу. Только для разделов «blog» и «articles» она общая — «default». Страницы мы еще не сверстали (кроме «default»), поэтому возвратимся к этому месту позже.
Использовать стиль: везде «default», иного и не дано.
Выбрано по умолчанию? Флажок напротив «Да» выставляется только одной секции, что вполне понятно.
На главной странице? Главная страница — та, на которую выходит браузер, зайдя по адресу сайта. В нашем случае блог и статьи будут совмещены на главной странице как «Последние сообщения».
Публиковать в RSS? Значение «Да» я присвоил только регулярно обновляемым разделам — «blog» и «articles».
Включить в поиск по сайту? По желанию. В принципе, можно включить поиск везде, если только некоторая информация не конфиденциальна (кстати, средствами TXP можно заблокировать паролем вход в любой раздел).

Установка плагинов

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

Скачайте плагины, которые требует Textpattern в строке ошибки и после этого заходите в раздел Настройки — Плагины Textpattern’а. Откройте файл плагина, содержанием которого является… хм, зашифрованный php-код. Скопируйте его содержание и загрузите через специально предназначенную для этого форму.

Обязательно активируйте плагин и, запасясь терпением, прочитайте входящую в него справку или онлайн-инструкцию, если первой нет. В help’e разработчик обычно пишет о таких полезных вещах, как описание тэгов и стилизация элементов.
Плагины, которые я задействовал при создании сайта, находятся в архиве, в одноименной папке. В некоторых местах, возможно, вам придется вручную подправить код, скажем, для локализации (и это довольно грубый метод). Я выложил плагины в их начальном виде, а не модифицированном.

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

Etz_pg и rsx_page_number — нумерация страниц. В случае с первым плагином, разбивка происходит по сепаратору page в каком-либо материале, во втором случае — по значению тэга <txp:article limit=“5” />.
Tru_tags — создает облако тэгов. В блогах — явление распространенное.
Zem_contact_reborn и zem_contact_lang — контактная форма.

На самом деле, плюсов у плагинов TXP много. Они позволяют реализовать в TXP то, чего изначально в нем нет или это делается очень хитроумным способом, о котором знает только сам Дин Ален (Dean Allen, не забыли, кто это такой? :). Но нужно также знать и о минусах — это некоторое (а то и существенное) снижение производительности движка. В результате может случиться так, что Интернет быстрый, а страница загружается медленно, т. к. долго генерируется (о том, как узнать производительность движка и скорость генерации страниц, я писал в предыдущем номере). Поэтому активировать нужно лишь самые необходимые плагины.

Послесловие

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

Безусловно, фрагменты, которые вы видите на скриншотах (почти завершенный, но не совсем «доведенный до ума» сайт), будет совершенно отличаться от того, что на данном этапе есть у вас (сайт практически без оформления). Черновой вариант стилевого файла style.css я закинул в архив с кодом. Для еще большей наглядности, рекомендую вам наполнить сайт разнообразным текстовым содержанием, чтобы видеть, как все это уживается друг с другом.
Что касается вопроса «нет ли ошибок отображения сайта в браузерах»: устранением различных перекосов мы займемся в последней части повествования. Пока же могу сказать, что страницы корректно отображаются в последних версиях браузеров Opera и Mozilla Firefox. Про IE6/7, Safari (под Windows) так же оптимистично сказать не могу… По только пока. А на стадии тестирования дозволяется все :).

Implant. Time Machine, или Система отката

Работая с кодом, не всегда получается сохранять результаты проделанной работы. Иногда, заменив «удачный» кусок кода на неправильный, и обновив страницу, вы понимаете, что хотите вернуть предыдущий код. Но поздно. Каким образом его можно восстановить? Во-первых, в браузере есть замечательная кнопка навигации по страницам — «Назад». По крайней мере, Opera некоторое время хранит в кэше содержание заполненных форм. Нажав два или несколько раз на кнопку «Назад», сохраните содержимое старой формы нажатием кнопки «Сохр.» в админ-панели. Еще в браузере Opera я отметил бы функцию «Notes», то есть, написание заметок в боковой панели. Нажатием Ctrl + Shift + C (или через контекстное меню) заметка сохраняется, и подобным же образом восстанавливается.

Другой способ — с помощью небольшого, но очень полезного PHP-скрипта Dumper) произвести импорт/экспорт SQL-базы данных, в которой хранятся таблицы Textpattern’а, включая данные форм/страниц. Дамп можно сжать в архив с различной степенью компрессии. Все архивы хранятся на сервере в папке «Backup». Удобный скрипт, да и работать с ним в разы проще и быстрее, чем со скриптом PhpMyAdmin.