Статические сайты - это здорово! Их легко публиковать и поддерживать. Вы можете легко масштабировать статический веб-сайт для миллионов пользователей. И хостинг обычно довольно дешевый. Еще одно преимущество - удобство локальной разработки и возможность предварительного просмотра любых изменений перед публикацией. Одна из проблем статических веб-сайтов - это добавление на сайт динамического контента. В этом посте я покажу вам простой способ добавить виджет комментариев на статический веб-сайт на основе GatsbyJS с помощью Просто комментариев.

Создание нового блога с помощью GatsbyJS ’blog starter

Пропустите этот раздел, если у вас уже есть блог с Гэтсби. Тем, у кого его нет, начнем с установки GatsbyJS:

npm install --global gatsby-cli

Создайте новый блог с названием «блог с комментариями»:

gatsby new blog-with-comments

Измените каталог на `blog-with-comments` и запустите GatsbyJS в режиме разработки. Это запустит сервер разработки, и вы сможете увидеть блог по адресу http: // localhost: 8000

gatsby develop

Добавление комментариев в блог GatsbyJS

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

Сначала создайте учетную запись в Just Comments, войдя через Github или Facebook. После входа в систему вы увидите созданный для вас API-ключ.

Теперь нам нужно изменить шаблон блога и интегрировать виджет в наш блог. Откройте файл src/templates/blog-post.js в своем любимом редакторе. Измените тег <Helmet> следующим образом:

<Helmet title={`${post.frontmatter.title} | ${siteTitle}`}>
  <script src="https://just-comments.com/w.js" type="text/javascript" defer="true"></script>
</Helmet>

Добавляя тег script, мы встраиваем виджет, предоставленный Just Comments, который будет работать с нашими комментариями.

Во-вторых, разместите контейнер для комментариев там, где хотите. Добавляю сразу после тега <Bio /> в том же файле src/templates/blog-post.js. Замените YOUR_API_KEY фактическим ключом API для своей учетной записи Just Comments.

<div
  className="just-comments"
  data-allowguests="true"
  data-apikey="YOUR_API_KEY"
  style={{
   marginBottom: rhythm(1),
   marginTop: rhythm(-1),
  }}
>
</div>

Конечный результат выглядит примерно так:

О Just Comments

Just Comments - это сервис, предлагающий систему комментариев. Это не совсем бесплатно, но почти бесплатно для небольших веб-сайтов, которые не посещают миллионы посетителей. Just Comments взимает плату за так называемый просмотр страницы с комментарием, а один просмотр страницы с комментарием стоит всего 0,00001 доллара США или 10 долларов США за 1 000 000 просмотров страницы. Узнайте больше о ценах Just Comments и возможной интеграции на https://just-comments.com/