Learn how to use Utterances with Academic Hugo theme in blogdown!
Configure a new comments provider
By Jesús Vélez in blogdown customization hugo
May 6, 2021
Why did I decide to leave Disqus and use Utterances?
You may think that I had great reasons to use Disqus
instead of Utterances
,
but the truth is that I did not. For the most part, it was for fun and
learning, but not having ads really sold me. 🤭
I knew that people I admire very much, like Julia Silge or Alison Hill, had made this migration not long ago. I wondered how they did it specifically since they also used the Academic Hugo Theme template. I went into their Github repositories and saw their commits about it.
Commits:
- Julia Silge: juliasilge/juliasilge.com@e7ea07d
- Alison Hill: rbind/apreshill@50127ff
I noticed that they had overwritten the article page template. I thought it
sounded good, I replicated it, and it worked. However, a part of me thought
that, just as you could overwrite that template, I could generate
a new HTML that would point to the Utterances
configuration. I went ahead
and got it. Here I show you how. 👀
Add Utterances as a new comments provider
The first step was to visualize what I wanted to achieve;
therefore, I decided to add the parameters required by
Utterances
in the configuration file:
./config/_default/params.yaml
Before
comments:
provider: 'disqus'
commentable:
post: true
book: true
project: true
publication: true
event: true
disqus:
shortname: 'jvelezmagic'
show_count: true
commento:
url: ''
After
comments:
provider: 'utterances'
commentable:
post: true
book: true
project: true
publication: true
event: true
disqus:
shortname: 'jvelezmagic'
show_count: true
commento:
url: ''
utterances:
repo: 'jvelezmagic/jvelezmagic'
issue_term: 'title'
label: 'web page comment'
theme: 'github-light'
Map Utterances parameters to a html view
With Utterances
added to the configuration file, I could now choose between
three comment providers: disqus
, commento
and utterances
.
However, as expected, when trying to initialize the page server,
I got the following error:
The ‘utterances’ comment provider was not found.
… # Unimportant things…
error calling partial: partial “comments/utterances.html” not found.
Therefore, I assumed that I should create a file named in this way
in my folder of partials, specifically at:
layouts/partials/comments/utterances.html
First, I tried to copy verbatim the content that Utterances
gave me for my
repository. I pasted it on, and it worked like a charm. Utterances
were now
enabled for all my pages on my website. 🤗✨
However, if I already configured Utterances
in the parameters file,
the correct thing to do would be to map them to a HTML view for formality.
So I added the following to my utterances.html
file. 👨🏽💻👇
{{ if site.Params.comments.utterances.repo }}
<script src="https://utteranc.es/client.js"
repo="{{ site.Params.comments.utterances.repo }}"
issue-term="{{ site.Params.comments.utterances.issue_term }}"
label="{{ site.Params.comments.utterances.label }}"
theme="{{ site.Params.comments.utterances.theme }}"
crossorigin="anonymous"
async>
</script>
{{ end }}
With this added, Utterances
felt like an extension that I can jump back and
forth from since it completely preserves the way of inserting comments on
Hugo's theme
pages. 😋
Conclusion
Setting up Utterances
turned out to be a simple task from which I learned a
little more about how Hugo’s templates work. 😋 Although you have Utterances
available without any problem, passing the comments from one platform to another
could be a more complicated task. 🧐
Personally, I’m just getting started, and I had no comments, so migrate from one comment provider to another was not a problem for me. 😅 The first post I reviewed about this problem is: “ Goodbye, Disqus! Hello, Utterances!”. I really found it very useful, and it could be the next step for you. 😇
You can find the commit with which I made these changes here: jvelezmagic/jvelezmagic@93d4323. Enjoy! 🥳🙌
Details
- Posted on:
- May 6, 2021
- Length:
- 3 minute read, 529 words
- Categories:
- blogdown customization hugo
- Tags:
- blogdown customization hugo
- See Also: