社会化评论系统《多说》- 优化JS加载方式

1

多说是一款追求极致体验的社会化评论框,可以用微博、QQ、人人、豆瓣等帐号登录并评论。

多说默认放在HEAD中的一坨JS代码实在恶心,而且Head中的JS必须加载完毕之后,页面才会继续执行,会影响网站打开速度。

优化JS加载方式

编辑主题 functions.php 加入以下代码

1
2
3
4
//精简HEAD
remove_action( 'wp_head', 'wp_print_scripts' );
remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );

在主题载入的任意JS文件底部中加入代码 xiumu需要修改成自己的二级域名前缀

1
var duoshuoQuery = {"short_name":"xiumu"};

页面加载完毕执行

1
2
3
//多说
if($('.ds-thread')[0])
	$.getScript('http://static.duoshuo.com/embed.js'); //载入embed.js


自定义调用多说最新评论

官方提供的调用方法加载了很多无用的JS/CSS等,而且没有办法自定义代码,我们可以通过下面的调用方式来自定义“模板”。

1
2
3
4
5
6
7
8
9
	//json-p加载多说最新评论
	if($('#widget-themater_tabs-2-id2')[0]&&duoshuoQuery) //如果存在 #side-cmt 和多说的设置参数
		$.getJSON('http://'+duoshuoQuery.short_name+'.duoshuo.com/api/sites/listRecentPosts.jsonp?num_items=8&callback=?',function(json){ //以json-p的方式载入
			var cmts=json.response,html='';
			for(var i in cmts) //拼接列表内容
				html+='<li class="clearfix"><a href="'+cmts[i].thread.url+'#!'+cmts[i].post_id+'" title="'+cmts[i].author_name+'"><img class="comments-widget-avatar alignleft" src="'+(cmts[i].author.avatar_url||'http://ds.cdncache.org/avatar-50/291/15722.jpg')+'" onerror="this.src=\'http://ds.cdncache.org/avatar-50/291/15722.jpg\'" /></a><div class="comments-widget-entry"><a href="'+cmts[i].thread.url+'#!'+cmts[i].post_id+'" class="comments-widget-author">'+cmts[i].author_name+'</a>: '+cmts[i].message+'</div></li>';
 
			$('#widget-themater_tabs-2-id2 .comments-widget ul').html(html); //修改innerHTML
		});

共 1 条评论

  1. 回复

    谢谢分享

发表评论

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...