Новая система комментариев на сайте

Всем здравствуйте!

В настоящий момент на сайте запущенна новая система комментариев, и я расскажу о некоторых её особенностях.

Данный ресурс работает на платформе Ghost, у которой есть своя встроенная система комментарием к каждому посту, и она работала ранее, однако она оказалась чересчур простой. Не было возможностей форматирования текста, вставки изображений, только текстовые сообщения. Это не самый удобный формат обсуждения и обменом информации по конкретной теме.

В связи с этим я принял решение подключить новую систему комментариев на данном ресурсе. Долго выбирал из огромного количества self-hosted вариантов, и в итоге остановился на проекте Remark42. Это удобная система комментариев, и возможностью форматирования текста посредством Markdown разметки, загрузки и вставки изображений в сообщение (в том числе drag&drop и из буфера обмена). А также удобная система авторизации с помощью различных провайдеров учетных данных, что даёт возможность оставить комментарий и получать уведомления на email/Telegram об ответах на Ваш комментарий.

Авторизация

Для того чтобы начать работу с комментарием, необходимо авторизоваться наиболее удобным способом:

На выбор доступны следующие способы авторизации:

• учетная запись Google;
• учетная запись Яндекс;
• учетная запись Github;
• Telegram аккаунт (через настроенного бота авторизации);
• Email (но почту придет токен, который нужно скопировать вставить в окно подтверждения);

Если с авторизацией через Google/Яндекс/Github/email всё понятно, те же самые действия, что и на других ресурсах, то с авторизацией через Telegram с помощью бота порядок такой:

Выбрав авторизацию с помощью Telegram, появится диалог, со ссылкой и QR кодом для перехода к боту авторизации (выбирайте, что Вам удобнее):

Автоматически переходим к боту в Telegram, который запустит команду /start и подтвердит завершения процесса авторизации:

После этого переходим обратно на сайт, и жмем кнопку "Проверить":

Если всё прошло успешно, то Вы увидите вашу учетную запись надо окном ввода комментария:

Теперь Вы можете полноценно работать с комментариями.

Если есть желание подписаться на комментарии отдельного поста, то можете это сделать с конкретных пунктах окна ввода комментария:

Вставка изображений

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

При этом после вставки в окне комментария появится название файла (в квадратных скобках []) и ссылка на загруженное изображение:

При желании можно поменять название файла в квадратных скобках (для себя) и выполнить предпросмотр изображения:

Можно добавлять несколько изображений с форматированием текста между сообщениями, в общем всё в рамках Mardown разметки.

Отправляем комментарий с текстом и изображениями:

Ну и официальная инструкция по разметке Markdown в сервисе комментариев Remark42:

Как использовать Markdown в Remark

Markdown — это простой и удобный синтаксис для оформления комментариев Remark. Вы можете управлять отображением комментария, выделять слова жирным или курсивом, добавлять изображения и создавать списки — и это лишь некоторые из возможностей Markdown.

Заголовки и цитаты

Иногда полезно использовать разные уровни заголовков для структурирования комментариев. Для создания заголовков начинайте строки с `#`.

Вы можете использовать от одного `#` до шести `######` для разных размеров заголовков.

Если вы хотите процитировать кого-то, используйте символ > перед строкой

Текст

Очень легко сделать некоторые слова жирными: обведите их двумя звёздочками **, а другие слова курсивом: обведите их одной звёздочкой *.

Вы даже можете создать ссылку на Google! с помощью этого синтаксиса:
[ссылка на Google!](https://google.com)

Списки

Если вам нужны пронумерованные списки:

1. Один
2. Два
3. Три
3.1. Пункт 3.1
3.2. Пункт 3.2

Если вам нужен маркер, укажите

* Пункт 1
* Пункт 2
* Пункт 2a
* Пункт 2b

Изображения

Если вы хотите вставлять изображения, вот как вы это делаете:


Код

Вы можете создать блок кода, заключив текст в обратные кавычки: `ваш код`

Таблицы

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

|Первый заголовок | Второй заголовок |
|------------ | -------------|
|Содержимое ячейки 1 | Содержимое ячейки 2|
|Содержимое в первом столбце | Содержимое во втором столбце|