Прежде всего вы должны знать, что Disqus не поддерживает отображение более одной формы на страницу по умолчанию .
Таким образом, указанный вами код не поможет вам.
Вы должны прикрепить показную форму disqus к событию (щелчок, прокрутка и т. Д.).
Я сделал простой код для событий щелчка и прокрутки.
Первый способ (событие клика):
результат проверки здесь
1- Поместите кнопку в цикле сообщений внутри Blog1 виджета, чтобы передавать данные каждого сообщения для отображения функции формы disqus:
<button expr:onclick='"placeDisqus(this, \"" + data:post.id + "\", \"" + data:post.url + "\", \"" + data:post.title + "\")"' type='button'>Show Disqus</button>
2- Поместите этот код перед </body>:
<script type='text/javascript'>/*<![CDATA[*/
// prepare disqus holder div
var disqusContainer = document.createElement("div");
disqusContainer.setAttribute('id','disqus_thread');
function placeDisqus(button, identifier, postLink, postTitle){
// check if first time for loading disqus
if( document.body.classList.contains('disqusLoaded') ){
// remove old holder set new holder
var oldContainer = document.getElementById('disqus_thread');
oldContainer.parentNode.removeChild(oldContainer);
button.after( disqusContainer );
// reset disqus form
DISQUS.reset({
reload: true,
config: function () {
this.page.url = postLink;
this.page.identifier = identifier;
this.page.title = postTitle;
}
});
} else {
// set disqus holder
button.after( disqusContainer );
// initializing disqus for first time
window.disqus_config = function () {
this.page.url = postLink;
this.page.identifier = identifier;
this.page.title = postTitle;
};
var d = document, s = d.createElement('script');
s.src = 'https://testmultipledisqus.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
// add class to prevent re-initializing
document.body.classList.add('disqusLoaded');
}
}
/*]]>*/</script>
Метод второй (ScrollEvent):
результат проверки здесь
1 - Вы должны передавать данные каждого сообщения, используя атрибуты для тега <article>, поэтому вы должны добавить data-id и data-url в качестве атрибутов. вот так:
<article expr:data-id='data:post.id' expr:data-url='data:post.url'>
2- Разместите этот код перед </body>:
<script type='text/javascript'>/*<![CDATA[*/
// prepare disqus holder div
var disqusContainer = document.createElement("div");
disqusContainer.setAttribute('id','disqus_thread');
// attach disqus init to scroll event
document.onscroll = function(){
document.querySelectorAll('article').forEach(function(article){
var art_id = article.getAttribute('data-id');
var art_url = article.getAttribute('data-url');
var win_bottom = window.pageYOffset + window.innerHeight;
// check user scroll
if( ( window.pageYOffset >= article.offsetTop ) && (article.offsetTop + article.offsetHeight ) > win_bottom ){
// check if first time for loading disqus at on same article
if( !article.classList.contains('active-disqus-article') ){
// check if first time for loading disqus on page
if( document.body.classList.contains('disqusLoaded') ){
// remove old holder set new holder
var oldContainer = document.getElementById('disqus_thread');
oldContainer.parentNode.removeChild(oldContainer);
article.querySelector('.comments-head').after( disqusContainer );
// reset disqus form
DISQUS.reset({
reload: true,
config: function () {
this.page.url = art_url;
this.page.identifier = art_id;
}
});
} else { // first time to load disqus on page
// set disqus holder
article.querySelector('.comments-head').after( disqusContainer );
// initializing disqus for first time
window.disqus_config = function () {
this.page.url = art_url;
this.page.identifier = art_id;
};
var d = document, s = d.createElement('script');
s.src = 'https://testmultipledisqus.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
// add class to prevent re-initializing on same page
document.body.classList.add('disqusLoaded');
}
// add class to prevent re-initializing on same article
if( document.querySelector('.active-disqus-article') ){
document.querySelector('.active-disqus-article').classList.remove('active-disqus-article');
}
article.classList.add('active-disqus-article');
}
}
});
}
/*]]>*/</script>
!! помните, что это пример кода, вы должны отредактировать его так, чтобы он был удобен для тегов вашего шаблона.