giscus - add comments to hugo blog using github discussions
I use hugo as the Static Site Generator for my #blog: https://meleu.sh.
I use the PaperMode theme.
And I learned to use giscus to add comments.
In the giscus website we fill a form and they give us a snippet to be used in our pages.
Here are the changes I made in my code:
Added this to my config.yml
:
params:
# ...
comments: true
giscus:
repo: "meleu/meleudotsh"
repoId: "R_kgDOG_9USg"
category: "Announcements"
categoryId: "DIC_kwDOG_9USs4ChHrL"
mapping: "pathname"
strict: "0"
reactionsEnabled: "1"
emitMetadata: "0"
inputPosition: "bottom"
# "transparent_dark" works fine with both
# light/dark PaperMod colors
theme: "transparent_dark"
lang: "pt"
loading: "lazy"
Created a layouts/partials/giscus.html
with this:
{{- if isset .Site.Params "giscus" -}}
{{- if and (isset .Site.Params.giscus "repo") (not (eq .Site.Params.giscus.repo "" )) (eq (.Params.disable_comments | default false) false) -}}
<script src="https://giscus.app/client.js"
data-repo="{{ .Site.Params.giscus.repo }}"
data-repo-id="{{ .Site.Params.giscus.repoID }}"
data-category="{{ .Site.Params.giscus.category }}"
data-category-id="{{ .Site.Params.giscus.categoryID }}"
data-mapping="{{ .Site.Params.giscus.mapping }}"
data-strict="{{ .Site.Params.giscus.strict }}"
data-reactions-enabled="{{ .Site.Params.giscus.reactionsEnabled }}"
data-emit-metadata="{{ .Site.Params.giscus.emitMetadata }}"
data-input-position="{{ .Site.Params.giscus.inputPosition }}"
data-theme="{{ .Site.Params.giscus.theme }}"
data-lang="{{ .Site.Params.giscus.lang }}"
data-loading="{{ .Site.Params.giscus.loading }}"
crossorigin="anonymous"
async>
</script>
{{- end -}}
{{- end -}}
And finally created a layouts/partials/comments.html
with this single line (note: this is overriding the PaperMods file)
{{- partial "giscus.html" . }}