动态加载多说评论

由于博客使用了异步加载,本来想用angularjs,但angularjs对于一个小博客来说有点重了,所以还是使用了pushState + Ajax(pjax),于是多说也需要实现动态加载。

多说代码

  • 引入多说JS
  • 点击按钮,展示多说评论
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span id="expandComments" onclick="toggleDuoshuoComments('#comment-box');">展开评论</span>
<div id="comment-box" ></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"misray"};
function toggleDuoshuoComments(container){
$("#expandComments").hide();
var el = document.createElement('div');//该div不需要设置class="ds-thread"
el.setAttribute('data-thread-key', '<?php echo $post_id ;?>');//必选参数
el.setAttribute('data-url', '<?php the_url(); ?>');//必选参数
el.setAttribute('data-author-key', 'misray');//可选参数
el.setAttribute('data-title', '<?php the_title(); ?>');//可选参数
DUOSHUO.EmbedThread(el);
jQuery(container).append(el);
}
(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>

CSS 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#expandComments{
padding: 8px 15px;
border: 1px solid #ff5e52;
text-decoration: none;
cursor: hand;
border-color: #ff5e52;
color:#fff;
border-radius: 10px;
background-color: #ff5e52;
}
#expandComments:hover{
color:#ff5e52;
border: 1px solid #ddd;
background-color: #fff;
}