Question

我看到的Disqus注释只会显示在项目页面上，因此如何在Blogger.com上托管的博客主页上显示Disqus注释。这样任何人都可以在主页上写评论。不一定在项目页面中。因此，如果我博客的主页上有7篇文章，则Disqus评论表单将出现在每篇文章的底部。我可以这样做吗？

这是代码

$(document).ready(function()
{

    $('body').on("click",'#heart',function()
    {
        var videoId = "<?php echo $video_id; ?>";


        var A=$(this).attr("id");
        var B=A.split("like");
        var messageID=B[1];
        var C=parseInt($("#likeCount"+messageID).html());


           $.ajax({
        method: 'POST',
        url: 'like.php',
        data: {videoId: videoId},
        cache: false,
            success: function(result){
                likeInfo = JSON.parse(result);
                        $("#likeCount1").html("Likes:" + likeInfo.likeCount);

            //document.getElementById("likeCount1").value = likeInfo.likeCount;
            //$("#likeCount1").html(likeCount);
            }
        }); 
    });
});

Answer 1

首先，您应该知道 Disqus默认情况下不支持每页显示多个表单。

因此，您发送的给定代码将无济于事。您必须将显示Disqus表单附加到事件（单击，滚动...等）。我为单击和滚动事件编写了简单的代码。

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

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）： 检查结果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>

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

在博客的首页上显示Disqus评论

1 个答案: