ソースを参照

Load disqus comments dynamically after user request.

Thomas Buck 7年前
コミット
b2460a1869
コミッターのメールアドレスに関連付けられたアカウントが存在しません
2個のファイルの変更32行の追加12行の削除
  1. 23
    12
      page.html
  2. 9
    0
      static/css/style.css

+ 23
- 12
page.html ファイルの表示

@@ -85,21 +85,13 @@
85 85
                 print '</span>'
86 86
                 print '</div>'
87 87
 
88
-            # Disqus Comments
88
+            # Disqus Comments (only show button to load afterwards)
89 89
             if page.get("comments", "false") == "true":
90
+                print '<div style="margin-top: 1em; text-align: center;">'
91
+                print '<button class="show-comments">Load Disqus comments</button>'
92
+                print '</div>'
90 93
                 print '<div id="disqus_thread"></div>'
91
-                print '<script type="text/javascript">'
92
-                print 'var disqus_shortname = "xythobuz";'
93
-                print 'var disqus_identifier = "http://xythobuz.org/' + page["url"] + '";'
94
-                print 'var disqus_url = "http://xythobuz.org/' + page["url"] + '";'
95
-                print '(function() {'
96
-                print 'var dsq = document.createElement("script"); dsq.type = "text/javascript"; dsq.async  = true;'
97
-                print 'dsq.src = "http://" + disqus_shortname + ".disqus.com/embed.js";'
98
-                print '(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]    ).appendChild(dsq);'
99
-                print '})();'
100
-                print '</script>'
101 94
                 print '<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>'
102
-                print '<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>'
103 95
             elif page.get("comments", "false") != "false":
104 96
                 print '<p><a href="%s">Head over here to discuss this article!</a></p>' % page.get("comments", "false")
105 97
         %-->
@@ -123,6 +115,25 @@
123 115
         <a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_send-money&nav=1&email=xythobuz@me.com">PayPal</a>
124 116
     </div>
125 117
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
118
+    <!--%
119
+        # Dynamically load Disqus comments after user requested it
120
+        if page.get("comments", "false") == "true":
121
+            print '<script type="text/javascript">'
122
+            print 'var disqus_shortname = "xythobuz";'
123
+            print 'var disqus_identifier = "http://xythobuz.org/' + page["url"] + '";'
124
+            print 'var disqus_url = "http://xythobuz.org/' + page["url"] + '";'
125
+            print '$(document).ready(function() {'
126
+            print '$(".show-comments").on("click", function(){'
127
+            print '(function() {'
128
+            print 'var dsq = document.createElement("script"); dsq.type = "text/javascript"; dsq.async  = true;'
129
+            print 'dsq.src = "http://" + disqus_shortname + ".disqus.com/embed.js";'
130
+            print '(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]    ).appendChild(dsq);'
131
+            print '})();'
132
+            print '$(this).fadeOut();'
133
+            print '});'
134
+            print '});'
135
+            print '</script>'
136
+    %-->
126 137
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
127 138
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.18/js/lightgallery-all.min.js"></script>
128 139
     <script type="text/javascript">

+ 9
- 0
static/css/style.css ファイルの表示

@@ -47,6 +47,15 @@ pre {
47 47
     border-radius: 10px;
48 48
 }
49 49
 
50
+.show-comments {
51
+    background: none;
52
+    border: none;
53
+    font: inherit;
54
+    cursor: pointer;
55
+    border-bottom: 1px solid blue;
56
+    color: blue;
57
+}
58
+
50 59
 #home {
51 60
     font-size: 2.5em;
52 61
     margin-right: 0.5em;

読み込み中…
キャンセル
保存