Panduan Integrasi Sistem Komentar CWD

Saya berhasil menginisialisasi proyek Astro dan mengintegrasikan sistem komentar CWD.

Perubahan Utama

1. Inisialisasi Proyek: Membuat proyek Astro baru menggunakan template basics.
2. Pembuatan Komponen: Membangun komponen Astro yang dapat digunakan kembali [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: Menggunakan atribut data untuk meneruskan parameter ke skrip -->
<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. Impor pustaka: Mempertahankan is:inline untuk pemuatan kapan saja -->
<script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>
<!-- 3. Skrip inisialisasi: Menggunakan modul untuk mengimpor fungsi utilitas -->
<script>
  import { registerPageInit } from '@/utils/page-init';
  // Mendefinisikan logika inisialisasi
  const initComments = () => {
    const containers = document.querySelectorAll('.cwd-comments-container');

    containers.forEach((container) => {
      const el = container as HTMLElement;
      // Mencegah inisialisasi ganda
      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);

      // Memeriksa apakah pustaka telah dimuat
      if ((window as any).CWDComments && apiBaseUrl) {
        try {
          const comments = new (window as any).CWDComments({
            el: el,
            apiBaseUrl,
            pageSize,
            theme,
          });
          comments.mount();
          // Menandai sebagai diinisialisasi
          el.dataset.cwdInitialized = 'true';
        } catch (e) {
          console.error('[CWD] Inisialisasi gagal:', e);
        }
      } else {
        // Jika skrip masih memuat, polling sebentar
        const checkTimer = setInterval(() => {
          if ((window as any).CWDComments) {
            clearInterval(checkTimer);
            // Memicu ulang
            initComments();
          }
        }, 100);
        // Berhenti setelah 5 detik
        setTimeout(() => clearInterval(checkTimer), 5000);
      }
    });
    // Mengembalikan fungsi pembersihan (opsional)
    return () => {
      // CWD mungkin tidak menyediakan metode destroy, cukup kosongkan container
    };
  };
  // 4. Mendaftar dengan PageInitManager
  registerPageInit('init-cwd-comments', initComments, { immediate: true });
</script>

3. Integrasi Halaman: Menambahkan komponen komentar ke halaman beranda [src/pages/index.astro].

Konfigurasi

Sistem komentar memerlukan URL API untuk terhubung ke backend. Perbarui atribut apiBaseUrl di [src/pages/index.astro] (atau di mana pun Anda menggunakan komponen ini).

File: [src/pages/index.astro]

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

Pastikan untuk mengganti https://cmt-api.xxx.com dengan URL Worker yang benar-benar Anda gunakan.

Penggunaan Komponen

Anda dapat menggunakan komponen CwdComments di halaman atau tata letak Astro mana pun:

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

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

Verifikasi

Proyek berhasil dibangun. Jalankan server pengembangan untuk melihat komponen komentar (pastikan URL API dikonfigurasi dengan benar):

npm run dev

Penggunaan Ulang di Proyek Astro Lain

Untuk menggunakan sistem komentar ini di proyek Astro lain, tidak perlu men-deploy ulang backend atau panel admin. Cukup salin komponen frontend.

1. Salin Komponen: Salin [src/components/CwdComments.astro] ke direktori src/components/ proyek baru Anda. Catatan: Jika proyek Anda menggunakan View Transitions, pastikan Anda mempertahankan logika registerPageInit.

2. Tambahkan ke Halaman: Impor dan gunakan di halaman Anda:

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

3. Identifikasi Unik: Sistem secara otomatis membedakan komentar berdasarkan URL halaman (jalur). Selama domain atau jalur proyek baru berbeda, komentar akan otomatis diisolasi.

Tetap Terbarui

Karena CWD dalam tahap pengembangan awal dengan pembaruan sering, ikuti strategi pembaruan ini:

1. Backend (API):

   • Jalankan git fetch upstream dan git merge upstream/main di direktori cwd untuk menyinkronkan kode.
   • Jalankan npm install untuk memperbarui dependensi.
   • Jalankan npx wrangler d1 migrations apply CWD_DB (jika ada perubahan database).
   • Jalankan npm run deploy untuk men-deploy versi Worker yang baru.

2. Komponen Frontend:

   • Perbarui versi URL skrip di src/components/widgets/CwdComments.astro:

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

   • Gunakan @latest untuk versi terbaru (disarankan untuk pengembangan), atau tentukan nomor versi (misalnya @0.0.5) untuk stabilitas.

3. Panel Admin:

   • Tarik kode terbaru (langkah yang sama dengan backend).
   • Jalankan npm install dan npm run build.
   • Deploy ulang ke Cloudflare Pages: npx wrangler pages deploy dist --project-name cwd-admin.

Diterbitkan pada: 6 Feb 2026 · Diubah pada: 6 Feb 2026

RR

Membangun