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

assets/css/_custom.scss

@@ -1,4 +1,101 @@
 // ==============================
 // 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
+
+.post-comment {
+    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;
+    }
+}
+
+@media only screen and (max-width: 1224px) {
+    .post-toc {
+        display: none;
+    }
+}

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

@@ -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>
@@ -20,8 +20,17 @@ <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
                         {{ end }}
                 </span>
                 {{- end }}
+
+                |
+                <a href="#gitalk-container" itemprop="discussionUrl">
+                    <span class="gitalk-comment-count" itemprop="commentCount"></span>
+                </a>
+                {{ .Site.Params.gitalk.countSign }}
         </div>
     </header>
+
+        {{ partial "toc.html" . }}
+
     <div class="post-content">
         <!--featured_image-->
 
@@ -35,7 +44,7 @@ <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
           <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 }}
@@ -48,58 +57,54 @@ <h1 class="post-title" itemprop="name headline">{{ .Title }}</h1>
     </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>
+                    <a href={{ . }}>
+                        <script>
+                            document.write(decodeURI(location.origin + location.pathname))
+                        </script>
+                    </a>
             </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>
             {{ end }}
             </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>
 
     <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">
-          {{ 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="post-comment">
+  {{- 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.admin }}'],
+        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/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

@@ -0,0 +1,38 @@
+<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>
+
+<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>