Руководство по интеграции системы комментариев CWD

Я успешно инициализировал проект Astro и интегрировал систему комментариев CWD.

Основные изменения

1. Инициализация проекта: Создание нового проекта Astro с использованием шаблона basics.
2. Создание компонента: Создание переиспользуемого компонента Astro [src/components/CwdComments.astro].

---
interface Props {
  apiBaseUrl: string;
  elId?: string;
  pageSize?: number;
  theme?: 'light' | 'dark';
}
const { apiBaseUrl, elId = 'comments', pageSize = 20, theme = 'light' } = Astro.props;
---

<!-- 1. Контейнер: Использование data-атрибутов для передачи параметров скрипту -->
<div
  id={elId}
  class="cwd-comments-container"
  data-el-id={elId}
  data-api-base-url={apiBaseUrl}
  data-page-size={pageSize}
  data-theme={theme}
>
</div>
<!-- 2. Импорт библиотеки: Сохранение is:inline для загрузки в любое время -->
<script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>
<!-- 3. Скрипт инициализации: Использование модуля для импорта вспомогательных функций -->
<script>
  import { registerPageInit } from '@/utils/page-init';
  // Определение логики инициализации
  const initComments = () => {
    const containers = document.querySelectorAll('.cwd-comments-container');

    containers.forEach((container) => {
      const el = container as HTMLElement;
      // Предотвращение повторной инициализации
      if (el.children.length > 0 || el.dataset.cwdInitialized) return;
      const apiBaseUrl = el.dataset.apiBaseUrl;
      const theme = el.dataset.theme;
      const pageSize = Number(el.dataset.pageSize);

      // Проверка загрузки библиотеки
      if ((window as any).CWDComments && apiBaseUrl) {
        try {
          const comments = new (window as any).CWDComments({
            el: el,
            apiBaseUrl,
            pageSize,
            theme,
          });
          comments.mount();
          // Отметка как инициализированный
          el.dataset.cwdInitialized = 'true';
        } catch (e) {
          console.error('[CWD] Ошибка инициализации:', e);
        }
      } else {
        // Если скрипт ещё загружается, кратковременный опрос
        const checkTimer = setInterval(() => {
          if ((window as any).CWDComments) {
            clearInterval(checkTimer);
            // Повторный запуск
            initComments();
          }
        }, 100);
        // Остановка через 5 секунд
        setTimeout(() => clearInterval(checkTimer), 5000);
      }
    });
    // Возврат функции очистки (опционально)
    return () => {
      // CWD может не предоставлять метод destroy, просто очистить контейнер
    };
  };
  // 4. Регистрация в PageInitManager
  registerPageInit('init-cwd-comments', initComments, { immediate: true });
</script>

3. Интеграция страницы: Добавление компонента комментариев на главную страницу [src/pages/index.astro].

Настройка

Система комментариев требует URL API для подключения к бэкенду. Обновите атрибут apiBaseUrl в [src/pages/index.astro] (или где бы вы ни использовали этот компонент).

Файл: [src/pages/index.astro]

<CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

Обязательно замените https://cmt-api.xxx.com на фактический URL развёрнутого Worker.

Использование компонента

Вы можете использовать компонент CwdComments на любой странице или в макете Astro:

---
import CwdComments from '../components/CwdComments.astro';
---

<CwdComments
  apiBaseUrl="https://cmt-api.xxx.com"
  elId="comments"
  theme="light"
/>

Проверка

Проект успешно собирается. Запустите сервер разработки для просмотра компонента комментариев (убедитесь, что URL API настроен правильно):

npm run dev

Повторное использование в других проектах Astro

Чтобы использовать эту систему комментариев в других проектах Astro, нет необходимости повторно развёртывать бэкенд или панель администратора. Просто скопируйте фронтенд-компонент.

1. Копирование компонента: Скопируйте [src/components/CwdComments.astro] в директорию src/components/ вашего нового проекта. Примечание: Если ваш проект использует View Transitions, убедитесь, что сохранили логику registerPageInit.

2. Добавление на страницу: Импортируйте и используйте на вашей странице:

   ---
   import CwdComments from '../components/CwdComments.astro';
   ---
   
   <CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

3. Уникальная идентификация: Система автоматически различает комментарии по URL страницы (пути). Пока домен или путь нового проекта отличаются, комментарии будут автоматически изолированы.

Поддержание в актуальном состоянии

Поскольку CWD находится на ранней стадии разработки с частыми обновлениями, следуйте этой стратегии обновления:

1. Бэкенд (API):

   • Выполните git fetch upstream и git merge upstream/main в директории cwd для синхронизации кода.
   • Выполните npm install для обновления зависимостей.
   • Выполните npx wrangler d1 migrations apply CWD_DB (если есть изменения базы данных).
   • Выполните npm run deploy для развёртывания новой версии Worker.

2. Фронтенд-компонент:

   • Обновите версию URL скрипта в src/components/widgets/CwdComments.astro:

     <script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>

   • Используйте @latest для получения последней версии (рекомендуется для разработки) или укажите номер версии (например, @0.0.5) для стабильности.

3. Панель администратора:

   • Получите последний код (те же шаги, что и для бэкенда).
   • Выполните npm install и npm run build.
   • Повторно разверните на Cloudflare Pages: npx wrangler pages deploy dist --project-name cwd-admin.

Опубликовано: 6 февр. 2026 г. · Изменено: 6 февр. 2026 г.

RR

Строить