添加 gitalk 评论和 disqus 懒加载；添加文章目录导航

assets/css/_custom.scss

@@ -1,4 +1,96 @@
 // ==============================
 // Custom style
 // ==============================
-// You can override the variables in _variables.scss to customize the style
+// You can override the variables in _variables.scss to customize the style
+
+.comments-container {
+    position: relative;
+    width: 100%;
+    max-width: 780px;
+    margin: 0 auto;
+    padding-top: 2rem;
+}
+
+.disqus_title {
+    display: inline-block;
+    padding: 0 15px;
+    color: #0a9caf;
+    border: 1px solid #0a9caf;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    /* float: left; */
+    margin-top: 20px;
+}
+
+.disqus_title:hover {
+    color: #fff;
+    background: #0a9caf;
+}
+
+.gitalk-container {
+    margin: 20px 0;
+    border-bottom: 1px solid #e9e9e9;
+}
+
+.post-toc {
+    position: absolute;
+    width: 200px;
+    margin-left: 780px;
+    padding: 10px;
+    word-wrap: break-word;
+    box-sizing: border-box;
+
+    .post-toc-title {
+        margin: 0;
+        font-weight: 400;
+        text-transform: uppercase;
+    }
+
+    .post-toc-content {
+        &.always-active ul {
+            display: block;
+        }
+
+        >nav>ul {
+            margin: 10px 0;
+        }
+
+        ul {
+            padding-left: 0;
+            list-style: none;
+
+            ul {
+            padding-left: 15px;
+            display: none;
+            }
+
+            .has-active > ul {
+                display: block;
+            }
+        }
+    }
+
+    a:hover {
+        color: #c05b4d;
+        -webkit-transform: scale(1.1);
+        -ms-transform: scale(1.1);
+        transform: scale(1.1);
+    }
+
+    a {
+        display: block;
+        line-height: 30px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -webkit-transition-duration: .2s;
+        transition-duration: .2s;
+        -webkit-transition-property: -webkit-transform;
+        transition-property: -webkit-transform;
+        transition-property: transform;
+        transition-property: transform,-webkit-transform;
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+}

layouts/_default/baseof.html

@@ -7,6 +7,7 @@
     	 <main class="main">
           <div class="container">
       		{{ block "content" . }}{{ end }}
+          {{ partial "comments.html" . }}
           </div>
 		   </main>
       {{ partial "footer.html" . }}

layouts/_default/single.html

@@ -20,8 +20,17 @@
                         {{ end }}
                 </span>
                 {{- end }}
+
+                |
+                <a href="#gitalk-container" itemprop="discussionUrl">
+                    <span class="post-comments-count gitalk-comment-count" itemprop="commentCount"></span>
+                </a>
+                {{ .Site.Params.gitalk.countSign }}
         </div>
     </header>
+
+        {{ partial "toc.html" . }}
+
     <div class="post-content">
         <!--featured_image-->
 
@@ -95,11 +104,7 @@
     </div>
 
     <div class="post-comment">
-          {{ if ( .Params.showComments | default true ) }}
-                 {{ if ne .Site.DisqusShortname "" }}
-                     {{ template "_internal/disqus.html" . }}
-                 {{ end }}
-          {{ end }}
+
     </div>
 </article>
 {{- end }}

layouts/partials/comments.html

@@ -0,0 +1,59 @@
+{{ if and .IsPage (ne .Params.comment false) }}
+<div class="comments-container">
+  {{- if and .Site.Params.disqus.name .Site.Params.disqus.lazy -}}
+    <div onclick="showDisqus();" id="disqus_title" class="disqus_title">显示 Disqus 评论</div>
+  {{- end -}}
+
+  <!-- gitalk -->
+  {{- if .Site.Params.gitalk.owner -}}
+    <div id="gitalk-container" class="gitalk-container"></div>
+    <link rel="stylesheet" href="{{ "lib/gitalk/gitalk-1.2.2.min.css" | relURL }}">
+    <script src="{{ "lib/gitalk/gitalk-1.2.2.min.js" | relURL }}"></script>
+    <script type="text/javascript">
+      var gitalk = new Gitalk({
+        id: '{{md5 .URL}}',
+        title: '{{ .Title }}',
+        clientID: '{{ .Site.Params.gitalk.clientId }}',
+        clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
+        repo: '{{ .Site.Params.gitalk.repo }}',
+        owner: '{{ .Site.Params.gitalk.owner }}',
+        admin: ['{{ .Site.Params.gitalk.owner }}'],
+        body: decodeURI(location.href)
+      });
+      gitalk.render('gitalk-container');
+    </script>
+    <noscript>Please enable JavaScript to view the
+      <a href="https://github.com/gitalk/gitalk">comments powered by gitalk.</a>
+    </noscript>
+  {{- end -}}
+
+  <!-- Disqus -->
+  {{- if .Site.Params.disqus.name -}}
+    <div id="disqus_thread"></div>
+    <script type="text/javascript">
+    function showDisqus() {
+      $("#disqus_title").attr("style", "display:none");
+
+      // Don't ever inject Disqus on localhost--it creates unwanted
+      // discussions from 'localhost:1313' on your Disqus account...
+      // if (window.location.hostname === 'localhost') return;
+      // setTimeout("checkDisqus()", 20000);
+
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
+      var disqus_shortname = '{{ .Site.Params.disqus.name }}';
+      dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+
+      window.location.hash = "#disqus_thread";
+    }
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+
+    {{- if not .Site.Params.disqus.lazy -}}
+      <script type="text/javascript">
+          showDisqus();
+      </script>
+    {{- end -}}
+  {{- end -}}
+</div>
+{{- end }}

layouts/partials/toc.html

@@ -0,0 +1,8 @@
+
+<div class="post-toc" id="post-toc">
+  <h2 class="post-toc-title">{{ T "toc" }}</h2>
+  {{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
+  <div class="post-toc-content{{ if not (or .Params.autoCollapseToc (and $globalAutoCollapseToc (ne .Params.autoCollapseToc false))) }} always-active{{ end }}">
+    {{.TableOfContents}}
+  </div>
+</div>