如何使disqus注释javascript代码在聚合物自定义元素中工作

How to make a disqus comments javascript code to work in a polymer custom element

本文关键字:自定义 聚合物 元素 工作 代码 何使 disqus 注释 javascript      更新时间:2023-09-26

我使用的是聚合物入门工具包2.0

嵌套自定义元素结构:

(意思是<my-app></my-app>在index.html等里面):

| index . html
--------' my-app.html (自定义元素)
----------------' my-testView1.html (自定义元素)
----------------' my-testView2.html (自定义元素)

我需要在my-testView1.html和my-testView2.html页面上放置disqus注释(每个页面单独的线程)

我试图使其工作,并在某一点chrome的控制台消息告诉我,我必须使用ajax方法(因为两者my-testView1.html和my-testView2.html都在<iron-pages>所以有路由,我想这就是为什么),它也给了我这个链接https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

my-testView1.html的结构:

(我将example.com和myChannelID更改为实名)

       ...
         <content select=".disqus1"></content>
      </template>
      <script>
        Polymer({
          is: 'my-testView1',
      )};
    </script>
    <script>
      var disqus_config = function () {
        this.page.url = 'https://www.example.com/testView1'; 
        this.page.identifier = '/testView1'; 
        this.page.title = 'Test View1';
        };

     (function() { 
        var d = document, s = d.createElement('script');
        s.src = 'https://MyChannelId.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
      DISQUS.reset({
          reload: true,
          config: function () {
            this.page.identifier = "/testView1";
            this.page.url = "https://www.example.com/#!testView1";
        }
        });
    </script>
</dom-module>

my-testView2.html的结构(与第一个相同):

   ...
      <content select=".disqus2"></content>
  </template>
  <script>
    Polymer({
      is: 'my-testView2',
    });
  </script>
  <script>
     var disqus_config = function () {
        this.page.url = 'https://www.example.com/testView2'; 
        this.page.identifier = '/testView2'; 
        this.page.title = 'Test View2';
        };

     (function() { 
        var d = document, s = d.createElement('script');
        s.src = 'https://MyChannelId.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
        })();
      DISQUS.reset({
          reload: true,
          config: function () {
            this.page.identifier = "/testView2";
            this.page.url = "https://www.example.com/#!testView2";
        }
        });
    </script>

把我带到这一点的问题已经在这里问过了:Disqus注释不能在聚合物自定义元素中工作在一些帮助和指导下,我设法达到了这一点。但是我仍然不能使它与ajax一起工作,这样它就可以将单独的磁盘线程加载到每个页面。

也许它与#!有关,或者我必须将它插入ready: function() {}中,但如果我这样做,它只是破坏了布局,所以我把它放在一个单独的标签中,现在它显示为DISQUS is not defined。我不知道我错过了什么。

我只有50个声望赏金来分享,但是如果你知道如何使它工作,你可以告诉我如何修复它

<div id="disqus_thread">元素在页面中必须是唯一的,因为它是磁盘库将插入下载线程的地方。所以你应该把它添加到<iron-pages>标签之后。

<div>
  <iron-pages>
    <view-1></view-1>
    <view-2></view-2>
  </iron-page‌​s>
</div>
<div id="disqus_thread"></div>

那么您必须在每次显示子页面时调用DISQUS.reset()。您可以知道它,因为类iron-selected被添加到所选元素中。因此,您可以监听Polymer元素的attributeChange()回调,并检查它是否包含iron-selected类。如果它是真的,你可以用你想要加载的线程的标识符调用DISQUS.reset()

Polymer( {
    is: 'view-1',
    attributeChanged: function ( name, old, value )
    {
        if ( name == 'class' && this.classList.contains( 'iron-selected' ) )
        {   
            //call DISQUS.reset() here
            DISQUS.reset( {
                reload: true,
                config: function () 
                {
                    this.page.identifier = "/testView1"
                    this.page.url = "https://www.example.com/testView1"
                }
            } )
        }
    }
} ) 

同样,因为你使用DISQUS.reset(),你可以删除var disqus_config = ...


解决<div id=disqus_thread>元素的唯一性问题:

如果你想把它插入到右页里面,你可以在调用DISQUS.reset()之前使用appendChild()来移动它。例如,把它放在<div id='container'>元素中。

Inside attributeChange() method:

this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )

view-1 <template> :

<template>
  //Page content
  <div id=container></div>
  //Page footer
</template>

另一个可能的解决方案是:

创建一个html文件,并将diss代码放入其中:

<div id="disqus_thread"></div>
<script>
    var disqus_shortname = 'YourDisqusId';
    var disqus_identifier = '/view1';
    var disqus_url = 'https://example.com/view1/';
    var disqus_config = function () {
    };
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
     })();
</script>

然后将iframe添加到链接该代码的自定义元素页面

 <iframe src="../src/page1_disqus.html" style="width:100%; min-height:400px; border:0 none;"></iframe>

如果它只是显示你的应用程序在这个iframe中也许这是一个好主意把这个html文件不放在你的src目录中,而是放在一个单独的服务器上使用共享链接,而不是本地存储../src/

如果你需要在多个页面上放置磁盘,只需创建另一个html文件,然后将其链接到需要使用iframe的页面