Adding a Comment System to a Hugo Website

There are two commonly used comment systems for Hugo pages:

1. The Disqus comment plugin (a third-party social comment system from abroad).
2. The Giscus comment system (a comment system that stores comments based on Github’s Issues or Discussions).

Tip

This article mainly introduces the local setup of the first one, Disqus. The Giscus comment system will be supplemented later. You can refer to here. Domestic users need to surf the Internet scientifically to perform all the following operations!

Register Account

Register an Account on the Disqus Official Website

1. Open the Disqus official website to register an account. You can also log in using a Microsoft or Google account.
2. After logging in, click Get Started. After filling in the basic configuration according to the steps, save the Shortname you filled in.

Generate File

Generate a comments.html File Locally

1. Generate a layouts/partials/comments.html file, or directly download (right-click with the mouse -> Save Link As).

 1{{ if.Site.Config.Services.Disqus.Shortname }}
 2  <div id="disqus_thread"></div>
 3  <script>
 4    var disqus_config = function () {
 5      this.page.url = '{{.Permalink }}';  
 6      this.page.identifier = '{{.Permalink }}'; 
 7    };
 8    (function() {
 9      var d = document, s = d.createElement('script');
10      s.src = 'https://{{.Site.Config.Services.Disqus.Shortname }}.disqus.com/embed.js';
11      s.setAttribute('data-timestamp', +new Date());
12      (d.head || d.body).appendChild(s);
13    })();
14  </script>
15  <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
16{{ end }}

2. Set in params.toml in the config file:

1[article]
2    showComments = true

3. Set in hugo.toml in the config file:

1[services]
2  [services.disqus]
3    shortname = 'kel1n1995'