Які є рішення?⌗

Якщо ми говоримо про статичні сайти, то у нас є лише одне сучасне рішення додати трохи JavaScript на сторінку, а ось реалізацій - дві.

Перша - взяти і написати все власноруч, наприклад використавши Alpine.js або ж і тут не покладатись на когось і озброєвшись чистим JS написати все з нуля. Це звісно добрий підхід, якщо ви хочете щось спробувати спроєктувати або попрацювати з новими для себе інструментами, але і значно складніший. Цей варіант ми розглянемо окремо, якщо буде необхідно.

Друга - обрати сторонню систему коментарів, яких на ринку є безліч. Починаючи від кострубатих але повністью безкоштовних і закінчуючи виключно платними рішеннями під ключ. Пропоную на цьому варіанті і зосередитись.

Disqus - король коментарів⌗

Я думаю, що багато хто з вас бачив Disqus - систему коментарів, яка використовується багатьма сайтами як по всьому світу так і в Україні, наприклад mezha.media.

З основних переваг можна виділити:

  • умовно безкоштовну модель користування
  • гнучку систему кастомізації і модерації навіть в безкоштовній версії
  • адаптивність кольорової схеми блоку з коментарями

До того всього разом з HUGO інтегрувати Disqus можливо рівно за два рядки коду. Після того як ви зареєструєтесь треба взяти так званий shortname в панелі керування Disqus. Сам shortname ніщо інакше як унікальний ID, який ви задаєте при реєстрації сайту в системі.

Далі з цим shortname йдемо в конфігураційний файл HUGO - config.toml і додаємо наступний рядок

disqusShortname = 'yourDisqusShortname'

Це ми зробили, бо з коробки HUGO вміє інтегрувати блок коментарів за допомогою наступного вбудованого шаблону

{{ template "_internal/disqus.html" . }}

Цей шалон треба вставити на сторінку допису під основним контентом і у нас готова система коментарів з Disqus i HUGO.

Лічильник коментарів⌗

Якщо ви бажаєте додатково показувати кількість коментарів в шапці посту, то це також можливо за допомогою декількох рядків коду.

По перше треба додати скріпт від Disqus на сторінку де будемо показувати лічильник.

<script
  id="dsq-count-scr"
  src="https://ваш-shortname.disqus.com/count.js"
  async
></script>

А далі дописуємо наступний HTML у потрібне місце.

<span>
  <a id="disqus_comments" href="{{ .Permalink }}#disqus_thread">
    <span
      style="display:none!important;"
      class="disqus-comment-count"
      data-disqus-url="{{ with .Params.disqus_url }}{{ . }}{{ else }}{{ .Permalink }}{{ end }}"
    ></span>
    {{ .Site.Params.noCounter }}
  </a>
</span>

Цей код буде брати статичну посилання на ваш допис щоб асоціювати запит з даними на стороні Disqus. А для більш простого перевикористання цього шматку розмітки можна створити новий partial з назвою comments_counter.html и перенести попередній код в цей файл, а замість нього та в будь якому іншому місці де є контекст сторінки можна використовувати такий шорткод

{{ partial "pagination.html" . }}