Как сделать комментарии на сайте html

Как сделать комментирование на HTML-сайте

Иногда у меня спрашивают, как сделать комментирование на HTML-сайте. То есть чтобы не было никаких PHP, баз данных и прочего. В голове большинства опытных Web-программистов сразу возникает мысль, что это невозможно. Но не всё так просто, и это всё-таки возможно. Поэтому в данной статье я расскажу, как сделать комментирование на HTML-сайте.

Поскольку весь механизм сохранения требует наличия PHP и базы данных, соответственно, единственный выход — это использовать другой сервер, где всё это имеется. А дальше достаточно передать запрос на этот сервер с помощью JavaScript и технологии Ajax.

Отсюда выход следующий: надо найти готовый сервис комментирования. Данный сервис выдаст JavaScript-код, который надо будет вставить к себе на сайт.

Есть разные сервисы, наиболее популярные — это http://disqus.com. А в Рунете, в основном, подключают комментарии вконтакте.

Как видите, и на HTML-сайт можно подключить комментирование. Однако, помните, что все комментарии будут храниться на сторонних сервисах. Если вдруг по каким-либо причинам там Ваш сайт заблокируют, то Вы потеряете все комментарии (если, конечно, Вы их не сохраняли постоянно).

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

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

А як написати власну коментарну стіну на сайт.

Михаил, с некоторых пор замечаю, что комментирование не работает — долго грузится блок ВКонтакте или вообще не открывается. Думал, что это у меня на сайте проблема. Зашел на ваш блог — тоже самое. Вот прямо сейчас тоже не работает. Причем это происходит по вечерам. Днем все нормально. Что это может быть — перегрузка на серверах ВКонтакте?

Здравствуйте, Анатолий. Это связано с перебоями работы ВК. Такое бывает, но не часто. Возможно у Вас медленное соединение с интернетом? Проверьте вашу скорость вечером.

Александр, как вы думаете, входящей скорости 6 Мб/с хватит, чтобы загрузить копеечный виджет от ВК? ]:)

Риторический вопрос. Исходящей скорости в 6Мбит должно хватать. А, вопрос я Вам задал такой, потому, что вечером у большинства провайдеров скорость интернет соединения существенно замедляется и не равна заявленной.

Александр, не хочу вступать в полемику. Но, если вы внимательно читали мое первое сообщение, то должны были увидеть мои слова, что в блоге Михаила наблюдалась такая же проблема. p.s. Написал сегодня в поддержку ВК. Пока не тормозит. Посмотрим, что дальше будет.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

HTML элементы. <!—Комментарии—>

Тег комментария используется для вставки комментариев в исходный код. Комментарии не отображаются в браузерах.

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

Поддержка браузерами

Отличия между HTML 4.01 и HTML5

Советы и примечания

Вы также можете использовать тег комментариев, чтобы «скрыть» скрипты от браузеров без поддержки сценариев (чтобы они не показывали их как обычный текст):

Примечание: Две косых черты в конце строки комментариев (//) являются символом комментария JavaScript. Это предотвращает исполнение JavaScript —> тега.

Стандартные атрибуты

Тег комментария не поддерживает никаких стандартных атрибутов.

Больше информации о стандартных атрибутах можно узнать в разделе Стандартные атрибуты.

Атрибуты события

Тег комментария не поддерживает атрибуты событий.

Больше информации об атрибутах события в разделе Атрибуты события.

Примечание: Комментарии нельзя влаживать внутрь других комментариев.

Как комментировать в HTML

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а).

Количество просмотров этой статьи: 47 089.

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

Улучшение формы комментариев

От базовых до улучшенных сообщений об ошибках к фоновой синхронизации

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

Вот почему я хотел бы показать вам как, используя фоновую синхронизацию, вы можете улучшить форму (в данном случае состоящую из <input> для имени, <textarea> для сообщения и <button> для отправки) с базовой до Улучшенной улучшенной™ версии с фоновой синхронизацией.

Базовая версия

Начнём с базовой версии HTML-формы:

Это будет работать в любом браузере. Теперь начнём улучшать форму без изменения её базовой версии.

Улучшенная HTML-версия

Во-первых, элемент <textarea> никогда не должен быть пустым, поэтому добавим к нему атрибут required . Форму можно проверять на стороне клиента без JavaScript — при условии, что браузер поддерживает такую возможность. Однако, не стоит на него полагаться (неподдерживаемые браузеры, баги в браузерах и другое), поэтому валидация форм на стороне сервера — очень хорошая идея.

Далее, добавим атрибут placeholder . Никогда не заменяйте <label> на placeholder , это важное дополнение, но никак не замена.

Делим по способностям

Для дальнейших улучшений мы будем использовать JavaScript. В <head> нашей страницы добавим тест, отсекающий браузеры, которые не поддерживают улучшения. Мы будем использовать технику, с которой я впервые столкнулся в статье Filament Group «Enhancing optimistically».

Кастомные сообщения об ошибках

Заменим базовое сообщение об ошибке «Пожалуйста, заполните это поле» на кастомное. Для создания кастомного сообщение в наш скрипт enhanced.js (который будет загружаться только в поддерживаемых браузерах) добавим следующий код:

В таком случае, при отправке формы без комментариев, пользователю будет выводиться сообщение «Пожалуйста, введите комментарий». Вы, наверное, заметили, что я до сих пор ничего не говорил о стилях сообщений. Потому что на данный момент нет никакой возможности оформить их с помощью CSS. Раньше можно было воспользоваться селектором ::-webkit-validation-bubble для браузеров на WebKit, но он был удалён. Если вы действительно хотите оформить всплывающее окно, то вам нужно будет создать своё собственное. Но имейте в виду, что здесь есть много подводных камней, поэтому я советую использовать всплывающие окна по умолчанию.

Аяксим

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

Сначала проверим поддерживает ли бразуер FormData и расширенные функции XMLHttpRequest . Если да, то определим функцию appendComment() для добавления нового комментария к другим комментариям. Далее добавим событие отправки к нашей форме для отправки XMLHttpRequest . Если запрос успешный — добавляем комментарий. В самом конце вызовем preventDefault для предотвращения поведения формы по умолчанию. Важно вызывать метод preventDefault в конце, так как мы не знаем завершится ли выполнение JavaScript ошибкой.

Теперь наша форма прекрасно отправляет комментарии без перезагрузки страницы и при этом по-прежнему работает в неподдерживаемых браузерах.

На этом этапе вы можете задаться вопросом, почему я не использовал Fetch API. Я хотел охватить как можно больше популярных браузеров без использования полифилов и не хотел ограничиваться поддержкой только современных браузеров.

Авторасширение <textarea>

Если вы напишите длинный комментарий, вам придётся проматывать текст вверх и вниз, чтобы перепроверить написанное. Исправим это с помощью авторасширения <textarea> .

Для этого мы будем использовать решение, которое я нашёл на CodePen.

Теперь элемент <textarea> адаптируется к длине комментария, что упрощает проверку текста.

Успех, ошибка и плохое соединение

Итак, мы добавили улучшенный HTML (атрибуты placeholder и required ), назначили кастомные сообщения об ошибках, добавили AJAX и автоматическое расширение для <textarea> .

Далее, для большего удобства, добавим уведомление о успешной (или неуспешной) отправке комментария и индикатор прогресса для отображения времени загрузки.

Сначала добавим новый элемент в нашу форму для отображения сообщений.

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

Сервис-воркер и фоновая синхронизация

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

Сначала проверим поддерживается ли сервис-воркер браузером. Если да, то используем фоновую синхронизацию для отправки комментария, в противном случае опубликуем комментарий через XMLHttpRequest , как показано выше в версии на AJAX.

Давайте посмотрим, как работает код. При отправке данных формы сохраним значение имени и комментария в IndexedDB. В моём случае, я использую хранилище «ключ-значение» на промисах Джейка Арчибальда, реализованное с помощью IndexedDB. Также выведем сообщение о том, что пользователь находится в автономном режиме и, как только появится сеть, комментарий будет автоматически опубликован. Если соединение хорошее и комментарий может быть опубликован сразу, это сообщение выводиться не будет. И, наконец, регистрируем фоновую синхронизацию с тегом form-post .

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

Теперь давайте посмотрим, как выглядит наш service-worker.js.

Сначала импортируем хранилище «ключ-значение» на промисах, которое мы уже использовали в enhanced.js для обработки IndexedDB. Затем определим const для версии кэша и добавим функции для обработки install (добавим ресурсы в кэш), fetch (для обработки запросов) и события активации. Самая важная часть начинается с синхронизированной версии. Здесь мы сначала проверяем является ли тег form-post . Это тот самый тег, который мы зарегистрировали ранее используя swRegistration.sync.register(form-post) . При совпадении тега вызываем e.waitUntil(postComment()) . Теперь, как только появится хорошее соединение, функция postComment будет выполнена.

В нашей функции postComment создадим новый объект FormData и добавим имя и значение поля, которые мы получим от IndexedDB. Далее, для того, чтобы сохранить комментарий, используем fetch . В случае получения успешного ответа отобразим сообщения об удачной отправке комментария (в противном случае — об ошибке).

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

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

Заключение

Как видите, есть много вариантов улучшить форму, а также множество других возможностей, которые я не упомянул. Столько всего можно сделать с помощью CSS, о чём я вообще не говорил здесь, но также многое можно сделать с помощью JavaScript. Самое главное здесь, что, благодаря прогрессивному улучшению, мы поддерживаем все браузеры. Некоторые посетители получат более удобный интерфейс, но абсолютно все пользователи смогут выполнить задачу и опубликовать комментарий.

Лишь немногие получат Улучшенную улучшенную™ версию, но, в зависимости от обстоятельств, каждый гарантированно получит базовую версию формы.

Если у вас есть какие-либо идеи по улучшению или вы нашли ошибку в коде, пожалуйста, создайте ишью на Гитхабе.