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

assets/css/_custom.scss

@@ -3,7 +3,7 @@
 // ==============================
 // You can override the variables in _variables.scss to customize the style
 
-.comments-container {
+.post-comment {
     position: relative;
     width: 100%;
     max-width: 780px;

layouts/_default/single.html

@@ -4,7 +4,7 @@
     <header class="post-header">
         <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
         <div class="post-meta">
-                Written by <a itemprop="name" href="{{.Site.BaseURL }}" rel="author">{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}</a> with ♥ 
+                Written by <a itemprop="name" href="{{.Site.BaseURL }}" rel="author">{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}</a> with ♥
                 <span class="post-time">
                 on <time datetime={{.Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} itemprop="datePublished">{{ .Date.Format (.Site.Params.dateFormatToUse | default "January 2, 2006") }}</time>
                 </span>
@@ -23,7 +23,7 @@
 
                 |
                 <a href="#gitalk-container" itemprop="discussionUrl">
-                    <span class="post-comments-count gitalk-comment-count" itemprop="commentCount"></span>
+                    <span class="gitalk-comment-count" itemprop="commentCount"></span>
                 </a>
                 {{ .Site.Params.gitalk.countSign }}
         </div>
@@ -44,7 +44,7 @@
           <img src="{{ printf "%s%s" $cdn_url $img }}" class="featured_image">
         {{ end }}
         <!-- end featured_image-->
-     
+
           {{ $reAltIn := "<img src=\"([^\"]+)\" alt=\"([^\"]+)?\" />" }}
           {{ $reAltOut :=  ( printf "<figure><img src=\"/images/ring.svg\" data-sizes=\"auto\" data-src=\"%s$1\" alt=\"$2\" class=\"lazyload\"><figcaption class=\"image-caption\">$2</figcaption></figure>" $cdn_url ) }}
           {{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}
@@ -57,31 +57,31 @@
     </div>
 
     <div class="post-copyright">
-            {{ with .Site.Params.author }} 
+            {{ with .Site.Params.author }}
             <p class="copyright-item">
                 <span>Author:</span>
                 <span>{{ . }} </span>
                 </p>
             {{ end }}
-           
+
-            {{ with .Permalink }} 
+            {{ with .Permalink }}
             <p class="copyright-item">
                     <span>Link:</span>
                     <a href={{ . }}>{{ . }}</span>
             </p>
             {{ end }}
-            {{ with .Site.Params.license }} 
+            {{ with .Site.Params.license }}
             <p class="copyright-item lincese">
                 {{ . | safeHTML}}
             </p>
             {{ end }}
     </div>
 
-  
+
     <div class="post-tags">
         {{ with .Params.tags }}
             <section>
-            <i class="iconfont icon-tag"></i>Tag(s): 
+            <i class="iconfont icon-tag"></i>Tag(s):
             {{ range . }}
             <span class="tag"><a href="{{ "tags/" | absURL }}{{ . | urlize }}/">
                     #{{.}}</a></span>
@@ -89,7 +89,7 @@
             </section>
         {{ end }}
         <section>
-                <a href="javascript:window.history.back();">back</a></span> · 
+                <a href="javascript:window.history.back();">back</a></span> ·
                 <span><a href="{{ .Site.BaseURL }}">home</a></span>
         </section>
     </div>
@@ -97,14 +97,10 @@
     <div class="post-nav">
         {{ if .PrevInSection }}
         <a href="{{.PrevInSection.Permalink}}" class="prev" rel="prev" title="{{ .PrevInSection.Title}}"><i class="iconfont icon-left"></i>&nbsp;{{ .PrevInSection.Title}}</a>
-        {{ end }} 
+        {{ end }}
         {{ if .NextInSection }}
         <a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="iconfont icon-right"></i></a>
         {{ end }}
     </div>
-
-    <div class="post-comment">
-
-    </div>
 </article>
 {{- end }}

layouts/partials/comments.html

@@ -1,5 +1,5 @@
 {{ if and .IsPage (ne .Params.comment false) }}
-<div class="comments-container">
+<div class="post-comment">
   {{- if and .Site.Params.disqus.name .Site.Params.disqus.lazy -}}
     <div onclick="showDisqus();" id="disqus_title" class="disqus_title">显示 Disqus 评论</div>
   {{- end -}}
@@ -17,7 +17,7 @@
         clientSecret: '{{ .Site.Params.gitalk.clientSecret }}',
         repo: '{{ .Site.Params.gitalk.repo }}',
         owner: '{{ .Site.Params.gitalk.owner }}',
-        admin: ['{{ .Site.Params.gitalk.owner }}'],
+        admin: ['{{ .Site.Params.gitalk.admin }}'],
         body: decodeURI(location.href)
       });
       gitalk.render('gitalk-container');

layouts/partials/footer.html

@@ -5,16 +5,16 @@
         <span itemprop="copyrightYear">{{.}} - {{ now.Year }}</span>
         {{ end }}
         <span class="with-love">
-    	 <i class="iconfont icon-love"></i> 
+    	 <i class="iconfont icon-love"></i>
          </span>
          {{ if .Site.Params.author }}
-            <span class="author" itemprop="copyrightHolder"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.author  }}</a> | </span> 
+            <span class="author" itemprop="copyrightHolder"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.author  }}</a> | </span>
          {{ end }}
 
          {{ with .Site.Params.beian }}
             <a href="http://www.miibeian.gov.cn/" target="_blank" rel="external nofollow">{{ . }} </a> |
          {{ end }}
-		  <span>Powered by <a href="https://gohugo.io/" target="_blank" rel="external nofollow">Hugo</a> & <a href="https://github.com/liuzc/leaveit" target="_blank" rel="external nofollow">LeaveIt</a></span> 
+		  <span>Powered by <a href="https://gohugo.io/" target="_blank" rel="external nofollow">Hugo</a> & <a href="https://github.com/liuzc/leaveit" target="_blank" rel="external nofollow">LeaveIt</a></span>
     </div>
 </footer>
 

layouts/partials/head.html

@@ -39,6 +39,6 @@
   {{ if eq ( getenv "HUGO_ENV" ) "production" }}
           {{ with .Site.Params.cdn_url }}
               {{ $cdn_url = .}}
-           {{ end }}   
+           {{ end }}
   {{ end  }}
 {{ .Scratch.Set "cdn_url" $cdn_url }}

layouts/partials/toc.html

@@ -1,4 +1,3 @@
-
 <div class="post-toc" id="post-toc">
   <h2 class="post-toc-title">{{ T "toc" }}</h2>
   {{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
@@ -6,3 +5,34 @@
     {{.TableOfContents}}
   </div>
 </div>
+
+<script type="text/javascript">
+  window.onload = function () {
+    var fix = $('.post-toc');
+    var end = $('.post-comment');
+    var fixTop = fix.offset().top, fixHeight = fix.height();
+    var endTop, miss;
+    var offsetTop = fix[0].offsetTop;
+
+    $(window).scroll(function () {
+      var docTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
+
+      if (end.length > 0) {
+        endTop = end.offset().top;
+        miss = endTop - docTop - fixHeight;
+      }
+
+      if (fixTop < docTop) {
+        fix.css({ 'position': 'fixed' });
+        if ((end.length > 0) && (endTop < (docTop + fixHeight))) {
+          fix.css({ top: miss });
+        } else {
+          fix.css({ top: 0 });
+        }
+      } else {
+        fix.css({ 'position': 'absolute' });
+        fix.css({ top: offsetTop });
+      }
+    })
+  }
+</script>