在博主首页显示disqus评论

Question

我看到的是disqus评论只会显示在项目页面，那么如何在我托管在blogger.com上的博客首页显示disqus评论。所以任何人都可以在主页上发表评论。不一定在项目页面中。所以如果我博客的主页有 7 post 篇文章，那么 Disqus 评论表单将出现在每篇 post 的底部。我可以这样做吗？

这是代码

     <script type='text/javascript'>
        var disqus_shortname = &quot;nameorid&quot;;
        var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
        if (!disqus_blogger_current_url.length) {
            disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
        }
        var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
        var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
     (function() {
                var bloggerjs = document.createElement(&quot;script&quot;);
                bloggerjs.type = &quot;text/javascript&quot;;
                bloggerjs.async = true;
                bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
            })();
        (function() {
            var bloggerjs = document.createElement(&quot;script&quot;);
            bloggerjs.type = &quot;text/javascript&quot;;
            bloggerjs.async = true;
            bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
            (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
        })();
        </script>

Answer 1

首先你应该知道 Disqus 默认不支持每页显示多个表单。

所以您发送的给定代码对您没有帮助。您必须将显示 disqus 表单附加到事件（单击、滚动...等）。我已经为点击和滚动事件制作了简单的代码。

方法一（点击事件）： 检查结果 here

1- 在 Blog1 小部件内的 posts 循环中放置一个按钮以传递每个 post 数据以显示 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）： 检查结果 here

1- 您必须使用 <article> 标签的属性传递每个 post 数据，因此您应该添加 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>

！！请记住这是一个示例代码，您必须对其进行编辑以方便您的模板标签。

在博主首页显示disqus评论

display disqus comment on the homepage of blogger

blogger

disqus