Improve the built-in Disqus template

[yihui]

1. Set disqus_identifier, disqus_title, and disqus_url only if the user has explicitly provided them in the metadata of a post. Two reasons:

   1. If Hugo does not set them explicitly, Disqus knows how to fetch them anyway. The shortname is the only required variable for Disqus, and all other variables are optional.

   2. If Hugo sets them, there are two problems:

      1. disqus_identifier is set to .Permalink by default, which is identical to disqus_url in the current template. This is not only redundant, but also defeats the purpose of disqus_identifier: the identifier is introduced to instruct Disqus to load the same discussion thread for a page even if its URL has been changed. In other words, it is supposed to be a fixed value, independent of the page URL. Ideally this should be provided by the user explicitly.

      2. disqus_url is redundant because Disqus also uses .Permalink as its default value. There is one scenario in which Hugo's .Permalink will fail Disqus: baseurl = "/" in config.toml.¹ In this case, .Permalink does not contain the full URL (e.g., /2017/06/23/hello-world/). However, if you do not hardcode disqus_url to .Permalink, Disqus will continue to work, because it basically uses window.location.href.

2. Do not load Disqus when the website is previewed locally, otherwise it is very confusing and even frustrating (e.g. comments sent to an unexpected URL by accident).

I believe these two changes will greatly improve the user experience with Disqus for those who just uses the default Disqus template in Hugo.

---

1. In case you wonder why I set baseurl = "/": I know the disadvantages, e.g., sitemap.xml won't work, but I want all URLs on my website to be portable, i.e., not tied to my domain. The solution is .RelPermalink in the theme/templates but most theme authors just use .Permalink and I cannot fix these themes. The most important reason for making URLs portable is Netlify's preview for pull requests: the best way to make the preview websites work is baseurl = "/" before other theme authors change .Permalink to .RelPermalink and use relURL.

[CLAassistant]

All committers have signed the CLA.

[yihui]

I think AppVeyor sent the wrong status to Github: https://ci.appveyor.com/project/bep/hugo/build/1.0.69 (success here)

[anthonyfok]

Possibly related:

Same Disqus Comments Showing up on Every Post?
https://discourse.gohugo.io/t/same-disqus-comments-showing-up-on-every-post/7176

[anthonyfok]

Hi @yihui,
You seem to have a lot of experience working with Disqus, and quite an expert in this area, so I'll take your word for it. :-) Merged.

Thank you for your contribution! 感谢您的贡献！

[yihui]

Thanks for merging my first PR to Hugo! 🎉 Yes, I have used Disqus for quite a few years, and I think I'm fairly familiar with Disqus. Since you were okay with this PR, I'll submit another one shortly, which will not be as important as this one but will make the code a little bit cleaner.

And just in case anyone run into problems after this PR, below is the original template code:

{{ if .Site.DisqusShortname }}<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    var disqus_identifier = '{{with .GetParam "disqus_identifier" }}{{ . }}{{ else }}{{ .Permalink }}{{end}}';
    var disqus_title = '{{with .GetParam "disqus_title" }}{{ . }}{{ else }}{{ .Title }}{{end}}';
    var disqus_url = '{{with .GetParam "disqus_url" }}{{ . | html  }}{{ else }}{{ .Permalink }}{{end}}';
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>{{end}}

If it is desirable for a user to revert to the old template, the above code can be saved to layouts/partials/disqus.html. Then replace {{ template "_internal/disqus.html" . }} with {{ partial "disqus.html" . }}.

[tombennet]

Hey @yihui - thanks for this contribution. Am I right in thinking that this change negates the advice in the Hugo docs on conditionally loading Disqus? Given that the built-in Disqus template now does not load on localhost, the suggestion that users create a separate partial seems redundant. If so, let me know - I'm happy to submit a PR updating the docs.

[yihui]

@tombennet Yes, you are right. The docs should be updated, and there is no need to use a separate partial only for this purpose. Thanks!

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.