目录

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

多说代码

  • 引入多说JS
  • 点击按钮,展示多说评论
<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 样式

#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;
}