在博主的主页上显示disqus评论

Question

我看到的是disqus注释只会显示在项目页面中，所以如何在blogger.com上托管的博客主页上显示disqus评论。所以任何人都可以在主页上写评论。不一定在项目页面中。所以如果我博客的主页上有7篇文章，那么Disqus评论表格会出现在每个帖子的底部。这对我有用吗？

这是代码

     <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小部件内的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>标记的属性传递每个帖子数据，因此您应该添加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>

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