我在单个博客页面上应用了disqus注释,该页面由一页上的许多帖子组成。
<div>
<article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
.............
</article>
<div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>
<div>
<article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
.............
</article>
<div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>
<div>
<article class='post hentry' expr:data-id='data:post.id' expr:data-url='data:post.url'>
.............
</article>
<div class='showDisqus' data-title='MyTitle' expr:data-id='data:post.id' expr:data-url='data:post.url'>Show Comments</div>
</div>
我使用以下代码。
$('.showDisqus').on('click', function(){ // click event of the show comments button
var this_ = $(this);
disqus_shortname = 'example',
title = $(this).attr('data-title'),
identifier = parseFloat($(this).attr('data-id')),
url = $(this).attr('data-url');
if (window.DISQUS) {
DISQUS.reset({ // Remove the old call
reload: false,
config: function () {
this.page.identifier = window.old_identifier;
this.page.url = window.old_url;
this.page.title = window.old_title;
}
});
$('.showDisqus').show();
$('#disqus_thread').remove();
$('<div id="disqus_thread"></div>').insertAfter(this_);
setTimeout( function() { // Creates a new call DISQUS, with the new ID
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = identifier;
this.page.url = url;
this.page.title = title;
}
});
window.old_identifier = identifier;
window.old_url = url;
window.old_title = title;
});
} else {
var disqus_identifier = parseFloat(identifier),
disqus_title = title,
disqus_url = url;
$('<div id="disqus_thread"></div>').insertAfter(this_);
(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);
})();
setTimeout( function() { // Sorry, there must be a better way to force the ID called correctly
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = identifier;
this.page.url = url;
this.page.title = title;
}
});
},500);
window.old_identifier = identifier;
window.old_url = url;
window.old_title = title;
}
$(this).fadeOut(); // remove the show comments button
});
单击按钮,disqus评论将显示在帖子下方,但是我想更简单一些,因此当访问者将屏幕滚动到帖子底部时,disqus评论将自动显示。我该怎么办?