Merge pull request #58 from kerma/master

Add disqus comment loading on demand

3 files changed, 41 insertions, 5 deletions

diff --git a/README.md b/README.md
index 3d6a462..d3e0919 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,9 @@ homeTitle = "" # Title for home page
 poweredby = true # Adds powered by hugo and kiss below Copyright
 related = true # Includes related articles at the bottom of the article
 
+[params.features]
+disqusOnDemand = true  # Load Disqus comments on click
+
 
 [params.opengraph.facebook]
 admins = [] # array of Facebook IDs
@@ -107,14 +110,14 @@ To align images, add #c for center, #r/l for right/left.
 
 #### Changing Social Menu Icons Order
 
- If you want to change the order of the social menu icons, modify the `[params.social.config]` section of your `config.toml` file:
+If you want to change the order of the social menu icons, modify the `[params.social.config]` section of your `config.toml` file:
 
- ```toml
+```toml
 [params.social.config]
 platforms = ["github","facebook","twitter","instagram","email","codepen","linkedin"]
 ```
 
- The social menu icons will appear in the order you specify in the `platforms` array.
+The social menu icons will appear in the order you specify in the `platforms` array.
 
 ## Add sections
 Links can be added to the navbar (below the blog name and social links).
@@ -154,6 +157,18 @@ By default up to 5 articles will be shown (can be changed by cloning related.htm
 
 To change the behaviour of how related articles are generated, check [official docs on Related Content](https://gohugo.io/content-management/related/).
 
+## Disqus Comments
+
+Hugo has a built-in support for [Disqus comments](https://gohugo.io/content-management/comments/#configure-disqus).
+In order to speed up your site full loading time you could load comments only after visitor
+requests them via clicking on the "Show comments" button. Use the following in the configuration to enable
+on demand loading:
+
+```toml
+[params.features]
+disqusOnDemand = true 
+```
+
 ## Single Page Configuration
 
 ```
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 99b64e2..cf5546e 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -9,6 +9,8 @@ googleAnalytics = ""
 Paginate = 5
 enableRobotsTXT = true
 
+[params.features]
+disqusOnDemand = true  # Load Disqus comments on click
 
 [params.assets]
 customCSS = ["css/custom.css"]
diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html
index 06c7f78..5cc7836 100644
--- a/layouts/partials/disqus.html
+++ b/layouts/partials/disqus.html
@@ -2,13 +2,32 @@
 <section class="section">
   <div class="container">
     <aside><div id="disqus_thread"></div></aside>
+  {{ if .Site.Params.Features.DisqusOnDemand }}
+    <div id="show_comments"><a id="load_comments" class="button is-link">Load comments</a></div>
+  {{ end }}
     <script type="text/javascript">
       var disqus_shortname = '{{ .Site.DisqusShortname }}';
-      (function() {
+      function disqus() {
         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);
-      })();
+      }
+  {{ if .Site.Params.Features.DisqusOnDemand }}
+      //Opens comments when linked to directly
+      var hash = window.location.hash.substr(1);
+      if ((hash.length > 8) && (hash.substring(0, 8) === "comment-")) {
+        disqus();
+        document.getElementById("show_comments").style.display = "none";
+      } else {
+        document.getElementById('load_comments').onclick = function() {
+          disqus();
+          document.getElementById("show_comments").style.display = "none";
+        };
+      }
+  {{ else }}
+      disqus();
+  {{ end }}
+
     </script>
     <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
   </div>