Как добавить ИИ-чат-бот Asyntai в Hugo

Пошаговое руководство для генератора статических сайтов Hugo

Платформа:

Шаг 1: Получите код встраивания

Сначала перейдите на Панель управления Asyntai и прокрутите вниз до раздела «Код для встраивания». Скопируйте уникальный код, который выглядит так:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Добавьте код в partial темы (рекомендуется)

Лучший способ добавить чат-бот на все страницы вашего сайта на Hugo — создать partial:

Перейдите в каталог layouts/partials/ вашего проекта Hugo
Создайте новый файл asyntai-widget.html
Вставьте код встраивания Asyntai в этот файл:

<!-- layouts/partials/asyntai-widget.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Откройте файл baseof.html вашей темы (обычно в layouts/_default/baseof.html)
Добавьте код вставки непосредственно перед закрывающим тегом </body>:

    {{ partial "asyntai-widget.html" . }}
  </body>
</html>

Сохраните файл и пересоберите Hugo-сайт

Совет: Использование шаблонных фрагментов — рекомендуемый Hugo способ включения переиспользуемых компонентов. Этот метод гарантирует появление чат-бота на каждой странице, использующей шаблон baseof.html, что, как правило, охватывает все страницы сайта.

Альтернативный способ 1: Добавить в Head Partial

Если в вашей теме есть фрагмент head, вы можете добавить код туда:

Найдите head partial вашей темы (обычно layouts/partials/head.html)
Если его нет, создайте layouts/partials/head.html в корне вашего проекта
Добавьте код Asyntai в этот файл:

<!-- layouts/partials/head.html -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Убедитесь, что ваш baseof.html включает этот шаблон в раздел <head>:

<head>
  {{ partial "head.html" . }}
</head>

Примечание: Если в вашей теме уже есть фрагмент head.html с существующим контентом, просто добавьте код Asyntai в конец. Не заменяйте существующий контент.

Альтернативный способ 2: Папка static с пользовательским JavaScript

Для более модульного подхода используйте папку static в Hugo:

Перейдите в каталог static/js/ вашего проекта Hugo
Создайте каталог, если он не существует
Создайте новый файл asyntai-loader.js
Добавьте следующий код для загрузки виджета:

// static/js/asyntai-loader.js
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.head.appendChild(script);
})();

Ссылайтесь на этот файл в baseof.html или фрагменте футера перед </body>:

<script src="{{ "js/asyntai-loader.js" | relURL }}"></script>
</body>

Совет: Файлы в директории static/ копируются без изменений в корень опубликованного сайта. Функция relURL генерирует правильный относительный путь для вашего развёртывания.

Альтернативный метод 3: конфигурация Hugo (config.toml/yaml)

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

# config.toml
[params]
  customJS = ["https://asyntai.com/static/js/chat-widget.js"]

# Or in config.yaml
params:
  customJS:
    - https://asyntai.com/static/js/chat-widget.js

Примечание: Этот метод работает только если ваша тема поддерживает параметр customJS. Проверьте документацию темы. Вам также может потребоваться добавить атрибут data-asyntai-id через настройку темы.

Альтернативный метод 4: Front Matter (для конкретных страниц)

Чтобы добавить чат-бот только на определённые страницы:

Добавьте пользовательский параметр в блок front matter вашей страницы:

---
title: "My Page"
asyntaiWidget: true
---

В вашем baseof.html или partial добавьте условную логику:

{{ if .Params.asyntaiWidget }}
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{{ end }}

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

Альтернативный способ 5: Переопределение макетов темы

Чтобы переопределить макет темы без изменения файлов темы:

Скопируйте файл baseof.html из themes/ваша-тема/layouts/_default/
Вставьте это в файл layouts/_default/baseof.html вашего проекта
Добавьте код вставки Asyntai перед закрывающим тегом </body>
Сохраните и пересоберите ваш сайт

Важно: При переопределении файлов темы вы не будете автоматически получать обновления для этих файлов при обновлении темы. Этот метод даёт полный контроль, но требует большего обслуживания. Рассмотрите использование partial-файлов для упрощения обновления темы.

Шаг 3: Сборка и развёртывание

После добавления кода соберите свой Hugo-сайт:

# Build the site
hugo

# Or build with specific environment
hugo --environment production

# For development preview
hugo server

Сгенерированный сайт будет находиться в каталоге public/
Разверните эту директорию на вашей хостинг-платформе (Netlify, Vercel, GitHub Pages и т.д.)

Совет: В процессе разработки используйте hugo server для предпросмотра сайта локально по адресу http://localhost:1313. Чат-бот должен появиться в правом нижнем углу на всех страницах.

Шаг 4: Проверка установки

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

Виджет не отображается? Убедитесь, что вы пересобрали сайт командой hugo после внесения изменений. Проверьте, что вы заменили YOUR_WIDGET_ID на фактический ID виджета из панели управления. Очистите кэш браузера или откройте сайт в режиме инкогнито. При использовании CDN может потребоваться инвалидация кэша. Откройте консоль браузера (F12) для проверки ошибок JavaScript.

Документация