共有 0 条评论

wordpress全站ajax下异步加载多说js – 小冉的博客

wordpress全站ajax下异步加载多说js

小站最近全站ajax无刷新化,各种捣鼓,终于OK后,却发现无刷新打开的页面没有多说评论框以及内容,而直接打开对应的网址则正常显示多说评论框,分析原因后ajax下点开其他页面只加载了HTML部分,却不会加载js等文件,百度一番ajax动态加载js的放法,发现各种情况都有,奈何功底不足,也不会变通,用不了,偶然翻到多说社区发现了一遍动态加载多说评论的放法,经测试后可以使用。

多说原教程

动态加载多说评论框的方法
不少站长来询问,希望在首页的文章列表中实现,“点击一个按钮展开该文章的评论”的功能。

其实现在的多说就已经支持这样的模式,实现方法并不复杂:

1.首先加载多说embed.js基础代码,并设置duoshuoQuery,在head内加入:

<script>var duoshuoQuery = {short_name:"你的多说二级域名"};</script>
<script src="http://static.duoshuo.com/embed.js"></script>

多说二级域名是指你注册多说时,填写的abc.duoshuo.com中的abc部分,

2.编写一个javascript函数,以下函数为示例:

function toggleDuoshuoComments(container){
    var el = document.createElement('div');//该div不需要设置class="ds-thread"
    el.setAttribute('data-thread-key', '文章的本地ID');//必选参数
    el.setAttribute('data-url', '你网页的网址');//必选参数
    el.setAttribute('data-author-key', '作者的本地用户ID');//可选参数
    DUOSHUO.EmbedThread(el);
    jQuery(container).append(el);
}

3.在按钮上增加onclick事件:

<a href="javascript:void(0);" onclick="toggleDuoshuoComments('#comment-box');">展开评论</a>
<div id="comment-box" ></div>

类似的,如果需要在页面加载外之后,动态调用评论数刷新,请调用DUOSHUO.ThreadCount函数。

------------------------------------------------------------
官方讲的不清不楚的,经过测试后才发现这个方法可用——只需要点击按钮,多说评论框就会弹出来。但是,官博提供的方法只能弹出,不能缩回,有些恼人。于是自己又各种折腾,终于解决了这个问题。

详细步骤

首先,我们需要加载多说的 embed.js 基础代码,并设置 duoshuoQuery。多说官博希望我们把这段代码放在网页的 head 中,我不推荐这样做。因为我们使用异步加载的原因,就是希望提高速度,而如果将多说的代码放在 head 中,又拖慢了速度。所以我们将代码放在多说评论框加载之前就可以了。

1.首先加载多说embed.js基础代码,并设置duoshuoQuery,在head内加入:

<script>// <![CDATA[
var duoshuoQuery = {short_name:"你的多说二级域名"};
// ]]></script><script src="http://static.duoshuo.com/embed.js"></script>

多说二级域名是指你注册多说时,填写的abc.duoshuo.com中的abc部分,
这部和官方一样,唯一注意的就是多说的二级域名,只填写注册域名的前部分abc即可,如果你的embed.js已经本地化,就填写本地地址即可
紧接其后之后,我们要写入 JavaScript 函数,实现多说评论框的缩放功能。

<script type="text/javascript">
    function toggleDuoshuoComments(container, id, url){
      if(jQuery(container).has("div").length>0){
        jQuery(container).empty();
        return;
      }
      var el = document.createElement('div');
      el.setAttribute('class', 'ranlingqi.com');//网站地址-必选参数
      el.setAttribute('data-thread-key', id);//文章本地必选参数
      el.setAttribute('data-url', url);//必选参数
      el.setAttribute('data-title', id);//可选参数
      DUOSHUO.EmbedThread(el);
      jQuery(container).append(el);
    }
  </script>

这点很多同学不知到怎填写里面的参数,其实对于wordpress博客来说,可以只更换第一个网址即可,其他不变,这个可以填写在需要加载的位置,不管有多少个文章列表评论,只添加一遍即可。

在需要插入按钮的地方,我们建立一个 click 事件。

<a href="javascript:void(0);" onclick="toggleDuoshuoComments('#<?php the_ID(); ?>',<?php the_ID(); ?>);">点击展开评论<?php echo inlo_comts_count( $post->ID ); ?></a>

对于wordpress博客来说,直接替换即可,其他网站请修改里面的参数,第一个是div容器的ID名,为什么要弄成动态的,因为如果DIV ID相同会导致每篇文章的评论点击展开都会在同一个位置而不是在每个文章列表的下面,第二个参数是文章的ID,以获取文章ID的评论,第三个参数是获取评论数。
最后,在需要弹出评论框的地方,插入一个 div 标签。

<div id="<?php the_ID(); ?>"></div>

这里的需要注意的是 DIV ID=的值要和前面点击命令的#值相同才可以。
好了 大体说这么多,有不明白的可以给我留言。

  • 用支付宝打我
  • 用微信打我

你可以像猪一样的生活,但你永远不会像猪一样快乐!!!

25条回应:“wordpress全站ajax下异步加载多说js”

  1. 包布丁说道:

    监听事件用jQuery的click函数会更好看些。

  2. 包布丁说道:

    还有我这是移动版IE,又一次骗过了UA检测。UA如下:Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; Microsoft; RM-1113) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

  3. 大米网说道:

    感谢 很好的教程

  4. 小日向美咲说道:

    [bobo纠结][gbz真穿越][了不起爱]双11购物必备~省钱良方→ http://20151111.xyz

发表评论

电子邮件地址不会被公开。 必填项已用*标注