@giscusgiscus

giscus

Sebuah sistem komentar yang diberdayakan oleh GitHub Discussions. Memungkinkan pengunjung meninggalkan komentar dan reaksi pada website Anda melalui GitHub! Terinspirasi dari utterances.

Catatan:
giscus masih sedang dalam pengembangan aktif. GitHub juga masih aktif mengembangkan Discussions dan API-nya. Oleh karena itu, beberapa fitur giscus mungkin rusak atau berubah seiring waktu.

Cara kerja

Ketika giscus dimuat, API pencarian GitHub Discussions digunakan untuk mencari diskusi yang terkait dengan halaman penyemat berdasarkan pemetaan yang dipilih (URL, pathname, <title>, dll.). Jika diskusi yang terkait tidak ditemukan, bot giscus akan otomatis membuat diskusinya ketika ada orang yang meninggalkan komentar atau reaksi untuk pertama kalinya.

Untuk berkomentar, pengunjung harus mengizinkan aplikasi giscus untuk berkomentar atas nama mereka menggunakan alur GitHub OAuth. Atau, pengunjung dapat meninggalkan komentar pada diskusinya secara langsung di GitHub. Anda dapat memoderasi komentarnya di GitHub.

Konfigurasi

Bahasa

Pilih bahasa yang akan ditampilkan giscus. Tidak dapat menemukan bahasa Anda? Buat kontribusi terjemahan.

Repositori

Pilih repositori yang akan dihubungkan dengan giscus. Pastikan:

  1. Repositori tersebut publik, jika tidak maka pengunjung tidak dapat melihat diskusi.
  2. Aplikasi giscus terpasang di repositori tersebut, jika tidak maka pengunjung tidak dapat meninggalkan komentar dan reaksi.
  3. Fitur Discussions diaktifkan dengan mengaktifkannya pada repositori tersebut.

Suatu repositori yang publik. Di repositori inilah diskusinya akan dihubungkan.

Pemetaan Halaman ↔️ Diskusi

Pilih pemetaan antara halaman penyemat dan diskusi yang disematkan.

giscus akan mencari diskusi yang judulnya mengandung komponen URL pathname dari halaman penyemat.

giscus akan mencari diskusi yang judulnya mengandung URL dari halaman penyemat.

giscus akan mencari diskusi yang judulnya mengandung tag HTML <title> dari halaman penyemat.

giscus akan mencari diskusi yang judulnya mengandung tag HTML <meta property="og:title"> dari halaman penyemat.

giscus akan mencari diskusi yang judulnya mengandung suatu istilah spesifik.

giscus akan memuat suatu diskusi spesifik berdasarkan nomornya. Opsi ini tidak mendukung pembuatan diskusi otomatis.

Menghindari ketidakcocokan akibat metode pencarian GitHub yang samar ketika ada beberapa diskusi dengan judul yang mirip. Baca dokumentasinya untuk detail lebih lanjut.

Kategori Diskusi

Pilih kategori diskusi di mana diskusi baru akan dibuat. Disarankan untuk menggunakan kategori dengan tipe Announcements agar diskusi baru hanya dapat dibuat oleh pengurus dan giscus.

Ketika mencari diskusi yang cocok, giscus hanya mencari dalam kategori ini.

Fitur

Pilih apakah fitur-fitur tertentu ingin diaktifkan.

Reaksi untuk kiriman utama diskusinya akan ditampilkan di atas komentar.

Metadata diskusi akan dikirimkan secara berkala ke jendela induk (halaman yang menyematkan diskusi). Untuk demonstrasi, aktifkan opsi ini dan buka konsol peramban Anda pada halaman ini. Baca dokumentasinya untuk detail lebih lanjut.

Kotak masukan komentar akan ditempatkan di atas komentar, sehingga pengguna dapat meninggalkan komentar tanpa menggulir ke bagian bawah diskusi.

Pemuatan komentar akan ditunda sampai pengguna menggulir ke dekat wadah komentar. Ini dilakukan dengan menambahkan loading="lazy" ke elemen <iframe>.

Tema

Pilih tema yang cocok dengan situs web Anda. Tidak ada yang cocok? Buat kontribusi tema baru.

Aktifkan giscus

Tambahkan tag <script> berikut ke template halaman web Anda di mana Anda ingin komentarnya muncul. Apabila sudah terdapat elemen dengan kelas giscus, maka komentarnya akan diletakkan di sana.

Anda belum mengonfigurasi repositori dan/atau kategori Anda. Nilai untuk kolom tersebut tidak akan ditampilkan sampai Anda mengisinya.
<script src="https://giscus.app/client.js"
        data-repo="[MASUKKAN REPOSITORI DI SINI]"
        data-repo-id="[MASUKKAN ID REPOSITORI DI SINI]"
        data-category="[MASUKKAN NAMA KATEGORI DI SINI]"
        data-category-id="[MASUKKAN ID KATEGORI DI SINI]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="id"
        crossorigin="anonymous"
        async>
</script>

Anda dapat mengubah tata letak wadahnya menggunakan pemilih kelas .giscus dan .giscus-frame dari halaman penyemat.

Jika Anda menggunakan giscus, pertimbangkan untuk menambahkan bintang 🌟 giscus di GitHub dan menambahkan topic giscus pada repositori Anda! 🎉

Penggunaan lanjutan

Anda dapat menambahkan konfigurasi tambahan (contoh: hanya mengizinkan situs tertentu) dengan mengikuti panduan penggunaan lanjutan.

Untuk menggunakan giscus dengan React, Vue, atau Svelte, cek pustaka komponen giscus.

Migrasi

Apabila Anda sebelumnya menggunakan sistem lain yang menggunakan GitHub Issues (misal: utterances, gitalk), Anda dapat mengkonversi isu yang sudah ada menjadi diskusi. Setelah proses konversi, pastikan bahwa pemetaan antara judul diskusi dengan halaman-halamannya sudah benar, dan giscus akan otomatis menggunakan diskusinya.

Situs yang menggunakan giscus

Berkontribusi

Lihat CONTRIBUTING.md

Silakan dicoba 👇👇👇

Powered by Vercel