Cara memasang komentar Disqus di Hugo

Langkah-langkah memasang komentar Disqus di Hugo

April 16, 2021

Cara memasang komentar Disqus di blog yang menggunakan hugo tidaklah sulit. Apakah Anda sudah mendengar Disqus sebelumnya? Sebagai informasi, Disqus merupakan layanan fitur komentar dan diskusi pada sebuah website.

Plugin Disqus memudahkan Anda dalam memberikan komentar pada sebuah website. Selain itu, adanya plugin ini membuat suatu konten lebih interaktif. Layanan ini menghubungkan website dengan orang yang berkomentar melalui komunitas diskusi.

Pertama-tama Anda harus memiliki akun Disqus terlebih dahulu sebelum memasangnya ke blog hugo. Untuk membuatnya Anda harus register ke website Disqus. Berikut panduan lengkap untuk membuat akun Disqus yang bisa Anda ikuti dengan mudah dan cepat.

Buat Akun Disqus

Silakan akses website Disqus dan lakukan pendaftaran untuk akun baru. Silakan klik tombol Get Started.
Masukkan detail informasi Anda berupa nama, email, dan password untuk akun Disqus Anda. Kemudian, klik tombol Signup.
Contoh ini akan menggunakan Disqus pada website. Silakan pilih I want to install Disqus on my site.
Masukkan nama website dan kategori website Anda, selanjutnya klik tombol Create Site.
Pilih plan yang ingin Anda gunakan. Pada contoh ini kami memilih Plan Basic.
Jika Anda sudah sampai pada langkah di atas, silakan klik “Subscribe New” dan Anda akan di arahkan ke halaman pemilihan platfrom.

Cara Memasang Komentar Disqus di Blog Hugo

Setelah Anda klik “Subscribe New” Anda akan mendapatkan tampilan seperti di bawah ini. Berikut panduan lengkap untuk memasang disqus di Hugo.

Pilih Universal Code.
Selanjutnya Copy kode tersebut dan buat file baru dengan nama disqus.html di dalam folder /themes/<nama tema kamu>/layouts/partials/

Langkah terakhir kita akan menampilkan komentar disqus yang sudah kita buat kedalam website kita dengan cara menambahkan kode dibawah ini ke dalam folder /themes/<nama tema kamu>/layouts/_default/single.html

{{ partial "disqus.html" . -}}

Sebagai contoh saya akan menampilkan komentar disqus dibawah content website saya sehingga penempatan kode-nya akan seperti ini:

{{ define "main" -}}
<div class="landing-{{ .Type }}">
    <div class="container-narrow {{ .Type }}-content">
        <div class="article_header">
            <h1 class="article_headline">{{.Title}}</h1>
         </div>
         {{ .Content -}}
         {{ partial "disqus.html" . -}}
     </div>
 </div>
 {{ end -}}

Anda tinggal menyesuaikan dengan tema yang sedang anda gunakan.

Proses instalasi komentar Disqus pada website Hugo sudah selesai dilakukan. Untuk mengeceknya, Anda dapat mengakses postingan atau halaman pada website Anda.