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

This commit is contained in:
ehlxr 2018-10-11 14:31:20 +08:00
parent b34ba759cc
commit 627b358901
6 changed files with 49 additions and 23 deletions

View File

@ -3,7 +3,7 @@
// ============================== // ==============================
// 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 { .post-comment {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 780px; max-width: 780px;

View File

@ -23,7 +23,7 @@
| |
<a href="#gitalk-container" itemprop="discussionUrl"> <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> </a>
{{ .Site.Params.gitalk.countSign }} {{ .Site.Params.gitalk.countSign }}
</div> </div>
@ -102,9 +102,5 @@
<a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="iconfont icon-right"></i></a> <a href="{{.NextInSection.Permalink}}" class="next" rel="next" title="{{.NextInSection.Title}}">{{.NextInSection.Title}}&nbsp;<i class="iconfont icon-right"></i></a>
{{ end }} {{ end }}
</div> </div>
<div class="post-comment">
</div>
</article> </article>
{{- end }} {{- end }}

View File

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

View File

@ -1,4 +1,3 @@
<div class="post-toc" id="post-toc"> <div class="post-toc" id="post-toc">
<h2 class="post-toc-title">{{ T "toc" }}</h2> <h2 class="post-toc-title">{{ T "toc" }}</h2>
{{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }} {{ $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default false }}
@ -6,3 +5,34 @@
{{.TableOfContents}} {{.TableOfContents}}
</div> </div>
</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>