Permalink
Browse files

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

  • Loading branch information...
MOxFIVE committed Jun 8, 2016
1 parent ce31c7e commit cc7eff47d0368f94fc9541d9d70154be500e8b6d
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

@MOxFIVE

This comment has been minimized.

Show comment
Hide comment
Please sign in to comment.