Добавляем практичные правила комментирования

5 января 2008 г.

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

Я уже задумывался над этим некоторое время назад, но реализовал только после того, как увидел правила комментирования на блоге Максима. Взял пример с него, т.к. во-первых, нигде ранее такого не встречал, во-вторых, прочитав правила у Максима, я понял, каким образом я сделаю то же самое у себя.

В отличие о Макса я решил не создавать для правил отдельную страницу, а вставил их прямо перед кнопкой “Отправить комментарий”. По умолчанию правила спрятаны, но они появляются при клике на соответствующую ссылку. Реализовано это с помощью небольшого ява-скрипта.

Денис Стреха попросил написать, как реализовать такую штуку, поэтому рассказываю, авось и кому-то еще пригодится.

  1. Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл):
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
      function view(n) {
        style = document.getElementById(n).style;
        style.display = (style.display == 'block') ? 'none' : 'block';
    }
    </script>
  2. В нужно месте пишем какой-то текст, который будет содержать ссылку на правила. Код ссылки должен выглядеть следующим образом:
    1
    <a href="#t1" onclick="view('t1'); return false">правила комментирования</a>

    Здесь t1 - это идентификатор, который мы применим для блока с комментариями, который по умолчанию будет скрыт.

  3. Создаем блок с правилами и назначаем ему идентификатор, в моем примере t1:
    1
    2
    3
    <div id="t1">
    Здесь правила комментирования
    </div>
  4. Для идентификатора t1 необходимо назначить CSS-правило display:none, чтобы по умолчанию блок с правилами был скрыт.

Все. Останется только добавить стили для оформления правил, если это потребуется.

Наглядный пример можете наблюдать прямо на моем блоге перед кнопкой “Отправить комментарий“.

Еще хочется добавить следующее. Чтобы обозначить, что ссылка на правила - это не обычная ссылка, которая открывает новую страницу, лучше сделать у нее подчеркивание пунктиром, убрав стандартное подчеркивание:

1
2
3
4
a {
  text-decoration: none;
  border-bottom: 1px dashed #F70;
}

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

* * *

Украинская торговая фирма “Страж” изготавливает и устанавливает стальные входные двери, обладающие красивым дизайном и надежной защитой. Вы можете выбрать как готовую дверь, так и сделать индивидуальный заказ.

Теги: , автор: Dimox | рубрика Веб-мастеринг

Комментарии (54): »

  1. Спасибо, навел на хорошую мысль))

  2. на днях реализую, спасибо ))

  3. А не проще было написать:

    function view(n) {
    el = document.getElementById(n).style.display;
    el = (el == ‘block’) ? ‘none’ : ‘block’;
    }

    Так короче просто, чем много раз повторять
    document.getElementById(n).style.display

    При этом, не происходит многократного поиска объекта DOM функцией getElementById, который занимает приличное время, а затем, не происходит многократного обращения к свойствам объекта DOM. Вряд ли быстродействие будет сильно заметно, но все же, это фетиш:)

  4. Спасибо, действительно полезно. А я все думал - что за модификацию плагина соцзакладок использует Lecactus ;)

  5. SHAman, я, к сожалению, в программировании ни бум-бум… Этот скрипт я уже давно где-то использовал, поэтому вставил то, что было :).

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

  6. Почему-то не срабатывает. Нужно только функцию заменить или в ссылке тоже что-то нужно менять?

  7. 2SHAman:

    Ты переоптимизировал до неработающего кода :-)

    function view(n) {
    style = document.getElementById(n).style;
    style.display = (style.display == ‘block’) ? ‘none’ : ‘block’;
    }

    @
  8. Во, Dmytro Shteflyuk, супер! Это работает :). Сейчас отредактирую статью.

  9. Dmytro Shteflyuk, ой! Действительно. Помнил же, что где-то тут была заковыка:) Ну, главное, что истина нашлась.

  10. Шикарная штука! обязательно к себе в блог припаяю! :)

  11. Ну и раз уж пошла жара, то приставка javascript: в onclick не нужна:

    1
    <a href="#" onclick="view('t1'); return false">правила комментирования</a>

    Ее используют в href, чтобы указать браузеру, что вместо ссылки будет JavaScript.

    1
    <a href="javascript:view('t1'); return false">правила комментирования</a>
    @
  12. Все! фичу присобачил! Отлично работает, спасибо! :)
    Только вот интересно, как отнесутся к скрытому тексту поисковики?….

  13. Feelov, не беспокойтесь! Эта штукенция стара как JavaScritpt. И никогда поисковики не будут за нее наказывать, если вы не будете ей злоупотреблять.

  14. 14
    Давид Мзареулян
    Давид Мзареулян

    “javascript:” в onclick писать не нужно.

  15. 2Feelov
    Поисковики вроде как не индексируют css и скрипты.
    Для верности можно окружить блок noindex

  16. >окружить блок noindex

    золотые слова

  17. Ее используют в href, чтобы указать браузеру, что вместо ссылки будет JavaScript.

    Только в этом случае приходится убирать “return false”, поскольку с ним ссылка работает некорректно.

  18. А я вот всё стараюсь везде избегать явы. Может это можно как-то и без неё сделать? На стилях например?
    Просто у меня к примеру стоит фильтр рекламы и он вырезает флеш, яву и т.д. На случай если у других тоже есть - стараюсь всё без явы делать.

  19. Не советую переносить js в href. В href нужно вставить ссылку на #id блока с правилами. И все будут рады. И поисковики и юзеры без js. А при работающем скрипте ссылка не сработает, так как есть return false. Так что:

    1
    <a href="#id" onclick="view('#id'); return false">
  20. Блин… ну вы, ребята, меня конкретно запутали :). Непонятно теперь, как все-таки лучше…

  21. Сделай так как я написал, хуже точно не будет, плюс улучшишь accessability :)

  22. Neutrino, мне кажется, лучше указывать в href не #id, а просто #. Потому что, если будет стоять id, то при клике по ссылки блок с этим id окажется вверху окна браузера, а если оставить #, то на экране ничего не передвинется.

  23. Дим, ты невнимателен :) Href не сработает, так как у тебя в js написано явно - return false. Href сработает только если отключен js. Кроме этого, поисковикам будет понятно куда ведет ссылка.

  24. Дэн, я не невнимателен, дело всего лишь в том, что я в этом ничегошеньки не пендрю =) (ява-скриптинг имею в виду).

    Спасибо за советы! Отредактировал пост по твоему примеру и поменял у себя в шаблоне.

  25. Кстати не знаешь, то что при сабмите комментария часто вылезает диалог сохранения php-файла, это баг движка или ФФ?

  26. Отличная идея - правила комментирования! У себя обязательно тоже сделаю.
    Как только закончу другую штуку с комментариями =)

    Dimox, у тебя правила не так суровы, как у Макса и их не так много, поэтому они помещаются на эту же страницу.

  27. Кстати не знаешь, то что при сабмите комментария часто вылезает диалог сохранения php-файла, это баг движка или ФФ?

    Ты имешь в виду мой блог или вообще WP-блоги в целом?

    Уникальный Человек, я так и предполагал, что тебе эта идея понравится :)

    Dimox, у тебя правила не так суровы, как у Макса и их не так много, поэтому они помещаются на эту же страницу.

    Хм… если бы у меня правила были такие же большие, как у Макса, я бы все равно их интергировал точно так же, как сейчас. Размер тут значения не имеет =)

  28. Имею в виду твой блог.

  29. Хм.. тогда не знаю, что тому виной. У WP такого бага нет, да и у ФФ не должно быть. Возможно, причина в моем хостере.

  30. Это скорее всего хостер + FF, у меня иногда бывает такое даже напр. на SE форуме ( когда его отключают ночью на профилактику, так за несколько секунд до этого такое вылетает). Но тут ещё такого не замечал. Иногда бывает другая странность, которую больше нигде не видел - при загрузки страницы ничего не отображается, просто белый лист, но при этом фавикон сверху подгружается. Для себя ссылаю это на то, что забываю иногда почистить кеш у браузера, или какой-то косяк хоста

  31. Вот только я не понимаю - зачем эти правила - и так все понятно, это прописные истины.
    А вот пример реализации чего-то веб2.0-го интересный.

    @
  32. Янис, в том и дело, что для некоторых комментаторов данных истин, видимо, не существует, посему специально для них и написаны правила.

  33. Подтверждаю, полуспамные комментарии замучили. Даже закрытие в nofollow/noindex не останавливает. Пойду и себе правила для комментаторов делать.

  34. Привет.
    не совсем понял - “Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл)” - где именно и как в теме надо “подключать”? (я чайник :) )
    спасибо.

    @
  35. не совсем понял - “Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл)” - где именно и как в теме надо “подключать”? (я чайник :) )

    Вставить этот скрипт в файл header.php, который находится в папке с темой, перед </head>.

  36. Я правила не увидел. Скролит под форму (Макстон2 на ИЕ6). Пришлось код страницы смотреть.

    Возникла идея. Сделать скрытой не правила, а саму форму. Пока не согласишься с правилами (типа кнопер “Прочитал -согласен”).
    Однако хорошо бы постоянным комментаторам сразу её показывать.
    Мож через куку как-то можно сделать.

    Как мысль? Жизнеспособная?

    @
  37. Я думаю, это излишне и может оттолкнуть. Комментирующий не любит совершать лишних действий при добавлении коммента.

  38. Я имею ввиду без перезагрузки. Так же как у тебя сейчас правила и помощь.

    Комментирующий не любит совершать лишних действий при добавлении коммента.

    Ну на многих блогаг капчу вводить не лень, а тут ссылочку кликнуть… ;)
    Ведь читать правила желающих ещё меньше найдется, чем комментить. А у кого возникнет желание прокомментить, тот и линк нажмёт. Заодно слабенький фильтр от тупых юзеров и бессмысленных коментов получится ;).

    Я наверное на каком-нить из своих блогов такое сделаю.
    Спасибо за идею. ;)

    @
  39. Я понимаю, что без перезагрузки. Идея интересная, но на данном блоге не вижу смысла этого делать.

  40. Отличная идея - правила комментирования!

  41. Для идентификатора t1 необходимо назначить CSS-правило display:none, чтобы по умолчанию блок с правилами был скрыт.

    Как это реализовать не могу понять. В CSS не силён, напишите что в стиль добавить. И если можно то как в код php корректно выводите? у меня не получается, приходиться картинками((

  42. 1
    #t1 {display: none}

    И если можно то как в код php корректно выводите?

    Не понял вопроса.

  43. Дима, я прошу прощения за прямоту , но!

    Эти прибамбасы не работают корректно (как здесь написано). Приведите пожалуйста рабочий код с начала до конца, если Вас не затруднит, тогда и лишнего “базара” не будет. Некоторые ребятки не понимают, что такое

    Для идентификатора t1 необходимо назначить CSS-правило display:none, чтобы по умолчанию блок с правилами был скрыт.

    Что назначить? Куда “впендюрить”? Урок нужно “разжевать”, чтобы ВСЕМ было ясно что и куда вставлять! Ведь, если я правильно понимаю, Вы пишите не только и в основном не для поннимающих в PHP?!

    @
  44. Советую почитать мануалы по CSS, тогда таких вопросов не будет возникать.

  45. Здравствуйте, Дмитрий.

    Да не обижайтесь Вы на критику - она добрая!
    Вот обратите пожалуйста на простой пример, простите, Вашей ошибки - Олег пишет:

    …….не совсем понял - “Для начала к теме блога необходимо подключить следующий ява-скрипт (либо вставить его прямо в тему, либо подключить через отдельный файл)” - где именно и как в теме надо “подключать”? (я чайник :) )………
    Вставить этот скрипт в файл header.php, который находится в папке с темой, перед .

    А разве нельзя было в своем уроке сразу расписать места установки Ваших скриптиков? Я думаю - можно и нужно, тогда и лишней полемики не будет - вот я о чем. А отмахиваться советами почитать это или то… не дело это настоящего блоггера, каковым Вас считают некоторые поклонники. Вот моя (да и не только…) точка зрения на вопрос написания постов по просьбам читателей.
    Ценность подобных уроков в том, чтобы даже “самый древний чайник” понял то, что Вы делаете, независимо от подготовленности в той или иной сфере сайтостроительства…
    Не обижайтесь пожалуйста на мои замечания, но, честно говоря… впрочем, не буду продолжать, дабы у Вас не отнимать время для написания, надеюсь, подробных постов. Спасибо за то, что не удалили мой коммент, поверьте - я не со зла, сам когда-то сделал пару-тройку подобных ошибок, пока не “вразумили добрые учителя”, коим безмерно благодарен”

    @
  46. А тут и не на что обижаться.

    Ценность подобных уроков в том, чтобы даже “самый древний чайник” понял то, что Вы делаете, независимо от подготовленности в той или иной сфере сайтостроительства…

    Я не ставлю цель донести информацию до “самых древних чайников”. Мне неинтересно описывать самые азы.

  47. Димокс! Да Ваш блог просто кладезь полезняшек! Браво!
    Видите, я добралась наконец и до правил :)
    Мало того, я сделала их и своими правилами - более сжатой и более ёмкой, тем не менее, формулировки трудно придумать!
    А теперь думаю: а вдруг Вы против?.. о.О
    Разумеется, триста раз разумеется, что я буду, захлёбываясь от восторга, писать о Вашем блоге :) Я буквально в шаге от поста на тему “Как я пилила дизайн и кто мне помогал” ;)
    СПАСИБО!!!

  48. Одно только забыла уточнить: вот эта премодерация самого первого комментария - это в админке задаётся?
    Вот это:

    Перед появлением комментария -
    Перед появлением комментария Администратор должен проверить комментарий
    Автор должен иметь ранее одобренные комментарии

    оно?
    Я так понимаю, что да (никогда раньше не модерировала каменты, поэтому и в затруднении).. думается мне, что нужно отметить эти две галочки: одна для самого первого камента, другая - для тех, чьи каменты были ранее одобрены.
    Или я всё путаю?

  49. Не против. Пожалуйста.

  50. Немного не так.

    Нужно отметить только “Автор должен иметь ранее одобренные комментарии”. Если Вы отметите “Администратор должен проверить комментарий”, тогда каждый комментарий будет попадать в модерацию, независимо от того, первый он или десятый.

  51. Точно, сейчас в этом убедилась..
    Димокс, имхо, Вы - лучший блогер рунета. Даже не спорьте :)
    Огромное Вам спасибо за Ваш великолепный блог!

  52. Большое спасибо за отзыв, очень приятно! =)

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.

Подписаться, не комментируя

Предыдущие из рубрики