Change blog comment system to utterances

1 Why utterances?

I tried Disqus, but it looks a bit garish.

I looked through comment systems supported by LoveIt theme.

• telegram: require initial authorization using SMS and it did not work well
• valine: requires certification number (issued in China)

I choose utterances looks to simple user interface. That supports github account access and utilize github issue for comment system.

2 Setup utterances

1. Create new github repository (in my case, tatoflam/tatos-note-for-utterances as public repo.

2. Go to github app utterances page and install utterances to created repository.

3. At themes/LoveIt/layouts/partials/comment.html, there is a logic to embed utterances like:

   1 2 3 4 5 6 7 8 9 10 11 12 13

   {{- /* Utterances Comment System */ -}} {{- $utterances := $comment.utterances | default dict -}} {{- if $utterances.enable -}} <div id="utterances"></div> {{- $commentConfig = dict "repo" $utterances.repo | dict "utterances" | merge $commentConfig -}} {{- $commentConfig = $utterances.issueTerm | default "pathname" | dict "issueTerm" | dict "utterances" | merge $commentConfig -}} {{- $commentConfig = dict "label" $utterances.label | dict "utterances" | merge $commentConfig -}} {{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}} {{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}} <noscript> Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>. </noscript> {{- end -}}

   So, just set parameters in config.toml

   config.toml

   1 2 3 4 5 6 7

   [params.page.comment.utterances] enable = true repo = "tatoflam/tatos-note-for-utterances" issueTerm = "pathname" label = "" lightTheme = "github-light" darkTheme = "github-dark"

   And disable disqus by

   1 2	[params.page.comment.disqus] enable = false

   Then embed utterances comment at the bottom of this page. 😄

Reference

• utterances
• hugoloveit - basic documentation