Статические веб-сайты доставляют контент через предопределенную коллекцию файлов HTML, CSS и JavaScript, что делает их простым и экономичным выбором для многих.

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

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

Создайте базовый статический сайт на Kinsta.

В этом руководстве используется шаблон Docusaurus, созданный в учетной записи Kinsta GitHub. Docusaurus — популярный генератор статических сайтов, который использует React, одну из лучших библиотек JavaScript, в качестве библиотеки пользовательского интерфейса для создания страниц.

Выполните следующие действия, чтобы настроить этот сайт на Kinsta:

  1. Чтобы использовать шаблон Docusaurus, нажмите Используйте этот шаблон > Создайте новый репозиторий.
  2. Клонируйте репозиторий на свой локальный компьютер, выполнив следующую команду: 
    https://github.com/kinsta/hello-world-docusaurus.git
  3. Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
  4. Авторизуйте Kinsta у своего провайдера Git.
  5. Нажмите Статические сайты на левой боковой панели, затем нажмите Добавить сайт.
  6. Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
  7. Присвойте уникальное имя своему сайту.
  8. Добавьте настройки сборки в следующем формате:
    • Команда сборки: npm run build
    • Версия узла: 16.18.20
    • Каталог публикации: строить
  9. Наконец, нажмите Создать сайт.

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

Успешное развертывание статического сайта.

Создать учетную запись Disqus

Disqus предлагает инструменты для повышения вовлеченности посредством социальной интеграции, инструментов модерации и аналитики. Он поддерживает онлайн-обсуждения через комментарии. Выполните следующие действия, чтобы использовать Disqus:

  1. Создайте учетную запись Disqus.
  2. Заполните необходимую информацию для процесса регистрации.
  3. После регистрации выберите Я хочу установить Disqus на свой сайт.
  4. Зарегистрируйте свой сайт в Disqus. При регистрации выберите короткое имя и категорию для своего сайта. Организация автоматически создает список, содержащий ваш новый сайт и любые дополнительные сайты, которые вы создадите в будущем.
  5. Выберите план Disqus для своей организации. Disqus предлагает различные планы подписки, включая Plus, Pro и Business. Для этой демонстрации вы можете выбрать базовый план, который включает в себя основные функции, такие как плагин комментариев, расширенную фильтрацию спама, инструменты модерации и базовую аналитику.

Интегрируйте Disqus со своим статическим сайтом на Kinsta.

Следующим шагом является интеграция фрагмента кода Disqus в генератор статического сайта.

  1. После регистрации вашего сайта нажмите Я не вижу своей платформы в списке, установите вручную с помощью универсального кода..
    Я не вижу своей платформы в списке, установите вручную с помощью опции универсального кода в Disqus.
    Встраивание кода Disqus вручную с помощью Universal Code.

    Отображаемая страница содержит фрагмент кода JavaScript в разделе с надписью Поместите следующий код туда, где вы хотите, чтобы Disqus загружался. Поскольку статический сайт является приложением React, вам необходимо изменить этот фрагмент кода для работы с React.

  2. Создайте папку с названием Дискус внутри источник/компоненты папка.
  3. Используйте следующий код внутри вашего index.js файл. Обязательно замените https://your_shortname_placeholder.disqus.com/embed.js с URL-адресом, который вы получили в универсальном коде: 
    import React, { useEffect } from 'react';

const DisqusComments = () => {
    useEffect(() => {

    const disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's 
canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with   
your page's unique identifier variable
    };

    // Load Disqus script dynamically
    (function () {
        const d = document;
        const s = d.createElement('script');
        s.src="https://your_shortname_placeholder.disqus.com/embed.js";
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();

    // Cleanup Disqus on component unmount
    return () => {
        const disqusThread = document.getElementById('disqus_thread');
        if (disqusThread) {
        disqusThread.innerHTML = ''; // Clear the Disqus thread to avoid  
interference with other components
        }
    };
    }, []); // Run this effect only once on component mount

    return (
    <div>
        <div> id="disqus_thread"></div>
        <noscript>Please enable JavaScript to view the <a>  
href="https://disqus.com/?ref_noscript">comments powered by  
Disqus.</a></noscript>
    </div>
    );
};

export default DisqusComments;

    disqus_config функция определяет две переменные:

    • this.page.url — Эта переменная имеет значение PAGE_URL, который следует заменить каноническим URL-адресом страницы. Disqus использует этот URL-адрес для идентификации конкретной страницы, к которой относятся комментарии.
    • this.page.identifier — Эта переменная имеет значение PAGE_IDENTIFIER, который следует заменить уникальным идентификатором страницы. Этот идентификатор позволяет Disqus различать страницы с одинаковым URL-адресом и связывать комментарии с правильной страницей.
  4. Вы можете импортировать этот компонент на страницу, на которой вы хотите отображать раздел комментариев Disqus. 
    import DisqusComments from '@site/src/components/Disqus';
  5. Затем добавьте раздел комментариев Disqus на целевую страницу, включив в него следующий оператор импорта. index.js в рамках источник/страницы каталог и используйте DisqusComments соответственно: 
    export default function Home() {
    const {siteConfig} = useDocusaurusContext();
    return (
    <Layout
        title={`Hello from ${siteConfig.title}`}
        description="Description will go into a meta tag in <head />">
        <HomepageHeader />
        <main>
        <HomepageFeatures />
        <DisqusComments/>
        </main>
    </Layout>
    );
}
  6. Внесите эти изменения в свой репозиторий, чтобы они отразились на вашем статическом сайте, размещенном на Kinsta: 
    git add .
git commit -m "Adding Disqus Comments"
git push -u origin master

Если вы нажали Автоматическое развертывание при фиксации включено при развертывании статического сайта внесение новых изменений автоматически инициирует развертывание на MyKinsta. В противном случае разверните изменения вручную.

Скриншот статического сайта с разделом комментариев Disqus ниже.
Статический сайт со встроенными комментариями Disqus.

Поздравляем — вы создали статический сайт с помощью хостинга статических сайтов Kinsta и интегрировали раздел комментариев с помощью Disqus!

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

Как настроить раздел комментариев

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

Настройте тему

Чтобы настроить тему комментариев Disqus, перейдите на панель управления Disqus и нажмите Общий из Настройки вкладке и выберите подходящие параметры на вкладке Цветовая схема и Гарнитура выпадающие списки.

Скриншот страницы настройки темы
Настройте тему своих комментариев Disqus.

Включите реакции на своем сайте

Вы можете повысить вовлеченность аудитории, включив реакции на своем сайте. Настройте эти реакции в соответствии со своими предпочтениями.

Чтобы включить эту функцию, перейдите к Настройки вкладка на панели управления Disqus. Выбирать Реакции. Затем нажмите Включите реакции на своем сайте.

Снимок экрана: страница настройки и включения реакций на панели управления Disqus.
Настройка и включение реакций через панель управления Disqus.

Обновите свой сайт. Появится опция для реакций.

Статический сайт с разделом комментариев и реакциями
Статический сайт отображает интеграцию реакций.

Комментировать аватары

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

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

Загрузка аватара комментатора по умолчанию
Функция «Аватар комментатора по умолчанию».

Сортировать комментарии

Добавьте настройку, позволяющую пользователям сортировать комментарии по Сначала старые, Новички впередили Лучший первый. Нажмите Сообщество на вкладке «Настройки» на панели управления Disqus и выберите порядок из Сортировка по умолчанию падать.

Сортировка комментариев с помощью Disqus
Сортировка комментариев в заданном порядке.

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

Чтобы модерировать комментарии в Disqus, используйте панель модерации Disqus на верхней панели навигации на панели управления Disqus. Этот инструмент обеспечивает быстрый просмотр комментариев вашего форума и их статуса (утверждено, ожидается и т. д.).

Вы также можете настроить правила модерации из На модерации меню, которое доступно на левой навигационной панели под Настройки вкладка панели управления Disqus.

Страница настроек комментариев и модерации на панели управления Disqus
Доступ к панели модерации из панели управления Disqus.

Затем ознакомьтесь с их документацией, чтобы узнать об основных шагах и функциях, которые помогут вам управлять и модерировать комментарии в Disqus.

Разрешить посетителям комментировать

Чтобы разрешить гостевым пользователям комментировать ваш сайт, установите флажок Комментарии гостей установите флажок, затем нажмите Сохранять. Эти комментарии остаются на рассмотрении до тех пор, пока модератор не одобрит их на панели модерации Disqus.

Снимок экрана с флажком «Комментирование гостей»
Разрешение гостям оставлять комментарии на вашем сайте.

Одобрять, удалять и отмечать комментарии как спам

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

После включения этого параметра модератор должен одобрить комментарии, прежде чем они будут отображены.

Скриншот раздела комментариев с точки зрения модератора
Модерирование комментариев Disqus с помощью массовых действий.

Краткое содержание

Из этого туториала вы узнаете, как добавить раздел комментариев на статический сайт. Помимо Docusaurus, вы можете внедрить Disqus в любую другую SSG, например VuePress, Gatsby и другие.

Хостинг статических сайтов Kinsta позволяет легко развертывать готовые нединамические файлы. Чтобы изучить преимущества размещения вашего статического сайта на Kinsta и интеграции таких функций, как раздел комментариев, ознакомьтесь с хостингом статических сайтов Kinsta.

Вы когда-нибудь внедряли Disqus или какой-либо другой сервис комментирования на свой статический сайт? Поделитесь своим опытом в разделе комментариев ниже.