Статические сайты - это здорово! Их легко публиковать и поддерживать. Вы можете легко масштабировать статический веб-сайт для миллионов пользователей. И хостинг обычно довольно дешевый. Еще одно преимущество - удобство локальной разработки и возможность предварительного просмотра любых изменений перед публикацией. Одна из проблем статических веб-сайтов - это добавление на сайт динамического контента. В этом посте я покажу вам простой способ добавить виджет комментариев на статический веб-сайт на основе 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/