Permalink
Browse files

feat: load comment section dynamically 动态加载评论模块

  • Loading branch information...
1 parent ce31c7e commit cc7eff47d0368f94fc9541d9d70154be500e8b6d @MOxFIVE committed Jun 8, 2016
View
@@ -48,6 +48,7 @@ git pull
| 6 | 网站计数 | Site counter |
| 7 | 多语言支持 | i18n, multi-language |
| 8 | 本地站内搜索 | Local Site Search |
+| 9 | 动态加载评论 | Load Comment dynamically |
![feature](http://moxfive.github.io/resources/yelee-features.jpg)
View
@@ -75,6 +75,10 @@ subnav:
# Chose ONE as your comment system and keep others disable.
# 选一个作为网站评论系统,其他保持禁用。
+preload_comment: true
+## false: 当点击评论条等区域时再加载评论模块
+## false: load comment's section until u click/hover on the bar/icon
+
disqus:
#on: true
shortname:
@@ -0,0 +1,28 @@
+<% if (!theme.preload_comment) { %>
+ <aside class="comment-bar">
+ <a href="javascript:void(0);">
+ <i class="fa fa-commenting-o animated infinite pulse"></i>
+ <i class="fa fa-spinner fa-pulse"></i>
+ <span class="count-comment"></span>
+ </a>
+ </aside>
+ <script>
+ var $commentBar = $("#comments aside.comment-bar");
+ var load$hide = function(){
+ $commentBar.find("a > i").toggle();
+ loadComment();
+ $commentBar.fadeOut(800);
+ }
+ $commentBar.click(function(){
+ load$hide();
+ })
+ $commentBar.children("a").hover(function(){
+ load$hide();
+ })
+ if (window.location.hash === "#comments") {
+ load$hide();
+ }
+ </script>
+<% } else { %>
+ <script> loadComment(); </script>
+<% } %>
@@ -1,15 +1,34 @@
<section id="comments">
- <div id="disqus_thread"></div>
- <script type="text/javascript">
- /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
- var disqus_shortname = '<%= shortname%>'; // required: replace example with your forum shortname
+ <style> aside.comment-bar { margin: auto 30px; }</style>
+ <div id="disqus_thread"></div>
+ <script>
+ var disqus_config = function(){
+ this.page.url = '<%= page.permalink %>';
+ this.page.identifier = '<%= page.path %>';
+ };
+ var loadComment = function(){
+ var d = document, s = d.createElement('script');
+ s.src = '//<%= shortname%>.disqus.com/embed.js';
+ s.setAttribute('data-timestamp', +new Date());
+ (d.head || d.body).appendChild(s);
+ }
+ </script>
+ <%- partial('click2show') %>
+</section>
- /* * * DON'T EDIT BELOW THIS LINE * * */
- (function() {
- var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
- dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
- (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
- })();
- </script>
- <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
-</section>
+<% if (!theme.preload_comment) { %>
+ // Add comment count
+ <script id="dsq-count-scr" src="//<%= shortname%>.disqus.com/count.js" async></script>
+ <span class="disqus-comment-count" data-disqus-identifier="<%= page.path %>"></span>
+ <span class="disqus-comment-count" data-disqus-url="<%= page.permalink %>"></span>
+ <script>
+ $(".disqus-comment-count").hide();
+ var $disqusCount = $(".disqus-comment-count");
+ $disqusCount.bind("DOMNodeInserted", function(e) {
+ $(".count-comment").text(
+ $(this).text().replace(/[^0-9]/ig,"")
+ )
+ DISQUSWIDGETS.getCount({reset: true});
+ })
+ </script>
+<% } %>
@@ -1,18 +1,30 @@
<div class="duoshuo" id="comments">
- <!-- 多说评论框 start -->
+ <div id="comment-box" ></div>
<div class="ds-thread" data-thread-key="<%=key%>" data-title="<%=title%>" data-url="<%=url%>"></div>
- <!-- 多说评论框 end -->
- <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
- <script type="text/javascript">
- var duoshuoQuery = {short_name:"<%=theme.duoshuo.domain%>"};
- (function() {
- var ds = document.createElement('script');
- ds.type = 'text/javascript';ds.async = true;
- ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
- ds.charset = 'UTF-8';
- (document.getElementsByTagName('head')[0]
- || document.getElementsByTagName('body')[0]).appendChild(ds);
- })();
+ <script>
+ var duoshuoQuery = {short_name:"<%=theme.duoshuo.domain%>"};
+ var loadComment = function(){
+ var d = document, s = d.createElement('script');
+ s.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
+ s.async = true; s.charset = 'UTF-8';
+ (d.head || d.body).appendChild(s);
+ }
+
+ <% if (!theme.preload_comment) { %>
+ // Add comment count
+ $(function(){
+ var jsonUrl = "http://api.duoshuo.com/threads/counts.jsonp?short_name=<%=theme.duoshuo.domain%>&threads=<%=key%>&callback=?";
+ $.getJSON(jsonUrl, function(result){
+ $.each(result.response, function(i, field){
+ var value = field.comments;
+ if (value > 0) {
+ $(".count-comment").text(value);
+ return;
+ }
+ })
+ })
+ })
+ <% } %>
</script>
- <!-- 多说公共JS代码 end -->
-</div>
+ <%- partial('click2show') %>
+</div>
@@ -1,4 +1,11 @@
<section class="youyan" id="comments">
- <div id="uyan_frame"></div>
- <script src="http://v2.uyan.cc/code/uyan.js?uid=<%= theme.youyan.id%>"></script>
-</section>
+ <script>
+ var loadComment = function(){
+ var d = document, s = d.createElement('script');
+ s.src = 'http://v2.uyan.cc/code/uyan.js?uid=<%= theme.youyan.id%>';
+ (d.head || d.body).appendChild(s);
+ }
+ </script>
+ <%- partial('click2show') %>
+ <div id="uyan_frame"></div>
+</section>
@@ -1,5 +1,5 @@
<div class="scroll" id="scroll">
<a href="#" title="<%= __('tooltip.back2top') %>"><i class="fa fa-arrow-up"></i></a>
- <a href="#comments" title="<%= __('tooltip.jump2comments') %>"><i class="fa fa-comments-o"></i></a>
+ <a href="#comments" onclick="load$hide();" title="<%= __('tooltip.jump2comments') %>"><i class="fa fa-comments-o"></i></a>
<a href="#footer" title="<%= __('tooltip.go2bottom') %>"><i class="fa fa-arrow-down"></i></a>
</div>
@@ -384,4 +384,22 @@ li:hover {
cursor: pointer;
}
}
-}
+}
+
+aside.comment-bar
+ display block
+ cursor pointer
+ background rgba(white, .3)
+ padding .5rem
+ box-shadow 3px 2px 8px rgba(black, .07)
+ text-align center
+ font-size 2rem
+ i.fa-spinner
+ display none
+ a
+ display inline-block
+ width 3em
+ span
+ font-size 1.5rem
+ &:active
+ background none

1 comment on commit cc7eff4

Please sign in to comment.