CWD-Kommentarsystem-Integrationsleitfaden

Ich habe erfolgreich ein Astro-Projekt initialisiert und das CWD-Kommentarsystem integriert.

Hauptänderungen

1. Projektinitialisierung: Erstellung eines neuen Astro-Projekts mit der Vorlage basics.
2. Komponentenerstellung: Erstellung einer wiederverwendbaren Astro-Komponente [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. Container: Verwendung von Datenattributen zur Übergabe von Parametern an das Skript -->
<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. Bibliothek importieren: is:inline beibehalten für jederzeitiges Laden -->
<script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>
<!-- 3. Initialisierungsskript: Modul verwenden, um Dienstprogrammfunktionen zu importieren -->
<script>
  import { registerPageInit } from '@/utils/page-init';
  // Initialisierungslogik definieren
  const initComments = () => {
    const containers = document.querySelectorAll('.cwd-comments-container');

    containers.forEach((container) => {
      const el = container as HTMLElement;
      // Doppelte Initialisierung verhindern
      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);

      // Prüfen, ob Bibliothek geladen wurde
      if ((window as any).CWDComments && apiBaseUrl) {
        try {
          const comments = new (window as any).CWDComments({
            el: el,
            apiBaseUrl,
            pageSize,
            theme,
          });
          comments.mount();
          // Als initialisiert markieren
          el.dataset.cwdInitialized = 'true';
        } catch (e) {
          console.error('[CWD] Initialisierung fehlgeschlagen:', e);
        }
      } else {
        // Wenn Skript noch lädt, kurzes Polling
        const checkTimer = setInterval(() => {
          if ((window as any).CWDComments) {
            clearInterval(checkTimer);
            // Neu auslösen
            initComments();
          }
        }, 100);
        // Nach 5 Sekunden stoppen
        setTimeout(() => clearInterval(checkTimer), 5000);
      }
    });
    // Bereinigungsfunktion zurückgeben (optional)
    return () => {
      // CWD bietet möglicherweise keine destroy-Methode, einfach Container leeren
    };
  };
  // 4. Mit PageInitManager registrieren
  registerPageInit('init-cwd-comments', initComments, { immediate: true });
</script>

3. Seitenintegration: Die Kommentarkomponente wurde zur Startseite [src/pages/index.astro] hinzugefügt.

Konfiguration

Das Kommentarsystem benötigt eine API-URL, um eine Verbindung zum Backend herzustellen. Aktualisieren Sie das Attribut apiBaseUrl in [src/pages/index.astro] (oder wo immer Sie diese Komponente verwenden).

Datei: [src/pages/index.astro]

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

Stellen Sie sicher, dass Sie https://cmt-api.xxx.com durch die tatsächliche URL Ihres bereitgestellten Workers ersetzen.

Komponentenverwendung

Sie können die Komponente CwdComments auf jeder Astro-Seite oder in jedem Layout verwenden:

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

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

Überprüfung

Das Projekt wird erfolgreich erstellt. Führen Sie den Entwicklungsserver aus, um die Kommentarkomponente anzuzeigen (stellen Sie sicher, dass die API-URL korrekt konfiguriert ist):

npm run dev

Wiederverwendung in anderen Astro-Projekten

Um dieses Kommentarsystem in anderen Astro-Projekten zu verwenden, müssen Sie das Backend oder das Admin-Panel nicht erneut bereitstellen. Kopieren Sie einfach die Frontend-Komponente.

1. Komponente kopieren: Kopieren Sie [src/components/CwdComments.astro] in das Verzeichnis src/components/ Ihres neuen Projekts. Hinweis: Wenn Ihr Projekt View Transitions verwendet, stellen Sie sicher, dass Sie die Logik registerPageInit beibehalten.

2. Zur Seite hinzufügen: Importieren und verwenden Sie auf Ihrer Seite:

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

3. Eindeutige Identifizierung: Das System unterscheidet Kommentare automatisch anhand der Seiten-URL (Pfad). Solange sich die Domain oder der Pfad des neuen Projekts unterscheidet, werden die Kommentare automatisch isoliert.

Auf dem neuesten Stand bleiben

Da sich CWD in der frühen Entwicklung mit häufigen Updates befindet, folgen Sie dieser Update-Strategie:

1. Backend (API):

   • Führen Sie git fetch upstream und git merge upstream/main im Verzeichnis cwd aus, um den Code zu synchronisieren.
   • Führen Sie npm install aus, um die Abhängigkeiten zu aktualisieren.
   • Führen Sie npx wrangler d1 migrations apply CWD_DB aus (falls Datenbankänderungen vorhanden sind).
   • Führen Sie npm run deploy aus, um die neue Version des Workers bereitzustellen.

2. Frontend-Komponente:

   • Aktualisieren Sie die Skript-URL-Version in src/components/widgets/CwdComments.astro:

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

   • Verwenden Sie @latest für die neueste Version (empfohlen für die Entwicklung) oder geben Sie eine Versionsnummer an (z. B. @0.0.5) für Stabilität.

3. Admin-Panel:

   • Neuesten Code abrufen (gleiche Schritte wie beim Backend).
   • Führen Sie npm install und npm run build aus.
   • Erneut auf Cloudflare Pages bereitstellen: npx wrangler pages deploy dist --project-name cwd-admin.

Veröffentlicht am: 6. Feb. 2026 · Geändert am: 6. Feb. 2026

RR

Aufbauen