Блог на MODx Revolution: система комментирования
Продолжу разговор про создание и развитие блога с помощью системы управления контентом MODx Revolution. На этот раз речь пойдет о системе публикации комментариев к записям в блоге. Действительно, автору блога очень важно иметь возможность обратной связи со своими читателями, одним из самых распространенных вариантов которой является комментирование записей.
В случае создания блога на MODx у нас есть два (даже три) варианта: использовать готовый компонент, написать систему самому, использовать стороннее решение. Вариант написания своей реализации системы комментариев я отметаю сразу из-за неоправданной трудоемкости. Не зря же мы используем систему управления контентом. Из готовых компонентов для MODx Revolution есть только Quip. Из сторонних решений подойдут любые, которые можно интегрировать путем использования JavaScript. К ним можно отнести такие популярные системы как Disqus и IntenseDebate.
Изначально я использовал для своего сайта компонент Quip (http://rtfm.modx.com/display/ADDON/Quip), настроил его под свои нужды, изменил внешний вид, чтобы он коррелировал с дизайном сайта и приготовился радоваться. Но не тут-то было. После того, как начали появляться первые комментарии к статьям, я с удивлением обнаружил, что через некоторое время они исчезают. Сами по себе. Просто р-раз - и нету комментария. Испугавшись, что они утеряны на совсем, я пошел в табличку с комментариями в базу данных и с облегчением нашел, что они не удалены совсем и навсегда, а лишь отмечены, как удаленные. Изменив значение поля "deleted" с "1" на "0", я вернул комментарии к жизни. Но спустя несколько дней ситуация повторилась. Я опять починил комментарии, но потом они снова исчезли, и так продолжалось до тех пор, пока мне это не надоело. На официальном форуме MODx у одного человечка была такая же проблема как и у меня, но работающих вариантов решения не предлагалось. Ковыряться в исходном коде Quip мне хотелось меньше всего, и тут мой взор упал на систему комментирования Disqus.
Меня сразу же привлек довольно приятный дизайн, а так же возможность авторизации как внутри системы Disqus (которая используется на множестве сайтов, в том числе такие крупные как CNN, TechCrunch, Fox News и другие), так и с помощью Twitter, Facebook, Yahoo, используя OpenID или обычную для всех сайтов форму "Имя - Почта - Сайт - Комментарий". Причем организовано все весьма удобно с точки зрения пользователя. Было принято решение использовать Disqus.
После регистрации на сайте disqus.com предлагается несколько инструкций по установке кода в популярные системы ведения блогов типа WordPress, Blogger, Joomla и другие. MODx в их числе не оказалось, но мы не лыком шиты, поэтому идем в раздел Universal Code. После ознакомления с разделом становится ясно, что система состоит из двух модулей: сам модуль комментирования, который следует использовать на странице с блогозаписью, и модуль, выводящий количество комментариев в заданном посте, который можно использовать на самой странице блога в ленте статей.
Разберемся для начала с основным модулем для просмотра комментариев к статье и собственно комментирования. Создадим чанк, в который поместим код, написанный на странице установки Disqus, и назовем его DisqusComments. В нем надо как минимум изменить переменную disqus_shortname, в которой указать короткое имя, выбранное вами при регистрации, и желательно изменить переменные disqus_identifier и disqus_url для более простой работы системы. В качестве идентификатора статьи можно использовать ее id в MODx, например так:
var disqus_shortname = 'shortname_вашего_сайта';
var disqus_identifier = '[[+id]]';
var disqus_url = '[[+url]]';
Далее, в шаблоне для отображения страниц постов из блога в нужное место добавляем вызов этого чанка:
.. отображение содержания статьи ..
[[$DisqusComments? &id=`bounz_net_[[*id]]` &url=`[[++site_url]][[~[[*id]]]]` ]]
.. что-то еще ..
В данном случае я использую в качестве disqus_identifier конструкцию вида bounz_net_articleID, а переменной disqus_url присваиваю полный адрес страницы. Использование полного URL связано с тем, что изначально, пытаясь интегрировать Disqus со своим сайтом, и имея относительную адресацию страниц (в чанке заголовка был прописан тег <base />), возникала ошибка при формировании постоянных ссылок на комментарии. А т.к. до этого мне уже пришлось отказаться от относительных ссылок в разделе Галерея (т.к. они криво работали с хеш-тегами), то было принято решение вообще везде перейти на полную адресацию.
Но это было лирическое отступление. На данный момент система комментариев интегрирована в блог, их можно писать, читать и модерировать. Теперь было бы неплохо выводить количество комментариев в основной ленте записей блога. Это очень просто сделать. Создадим в чанке, ответственном за краткий вывод блогозаписи на главной странице блога, следующую ссылку:
<a href="/url_статьи#disqus_thread" class="leavecomment" data-disqus-identifier="bounz_net_[[+id]]">
Комментарии
</a>
Магия данной ссылки заключается в добавлении хеш-тега #disqus_thread к ссылке на статью и добавлении небольшого javascript-кода в конец страницы. Дополнительно к хеш-тегу можно задать у ссылки аттрибут data-disqus-identifier, который поможет Disqus идентифицировать статью. Вообще говоря, можно обойтись и без него, тогда система будет идентифицировать статьи, основываясь на их URL. Но если адреса страниц со статьями изменятся (допустим, вы начнете использовать ЧПУ), то все сломается. Дабы такого не случилось, я добавил этот атрибут. Заметьте, что он строится точно так же, как и значение свойства disqus_identifier в вызове скрипта комментирования. Собственно все готово.
Напоследок немного оформительских работ. Текст ссылок для количества комментариев можно задать в настройках на сайте Disqus (раздел Admin, вкладка Settings, подраздел Appearance, группа настроек Comment Count Link). На этой же станице настроек можно добавить своих правил CSS. Так я избавился от ссылки "blog comments powered by Disqus". Впрочем, убрать эту ссылку можно еще проще: удалив строчку <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> из того кода, который они дают.
Радостных вам комментариев!
Пт, 11.02.2011