Disqus 评论在聚合物自定义元素中不起作用

Disqus comments don't work in a polymer custom element

我不知道如何使 disqus 评论代码在我的自定义元素中工作。

我网站的结构：

| index.html
--------\ my-app.html（自定义元素）
--------------\ my-testView1.html（自定义元素）
--------------\ my-testView2.html（自定义元素）

我需要在 my-testView1.html 和 my-testView2.html

中添加 disqus 评论

index.html 的结构：

 <body>
   <my-app>
      <div class="disqusClass1" id="disqus_thread"></div>
      <div class="disqusClass2" id="disqus_thread"></div>
   <my-app>
</body>

my-app.html 的结构：

 <iron-pages>
      <my-testView1 name="testView"><content select=".disqusClass1"></content></my-testView1>
      <my-testView2 name="testView2"><content select=".disqusClass2"></content></div></my-testView2>
    </iron-page‌​s>

my-testView1.html 的结构：

<template>
  <content select=".disqusClass1"></content>
</template>

my-testView2.html 的结构：

<template>
  <content select=".disqusClass2"></content>
</template>

讨论div

我把disqus评论的div放在<my-app>里面，放在index.html上，这样chrome就可以找到了。如果我像这样把它放在 <my-testView1> 里面， 找不到它:

第my-app.html

页 
<iron-pages>
  <my-testView1 name="testView"><div id="disqus_thread"></div></my-testView1>
  <my-testView2 name="testView2"><div id="disqus_thread"></div></my-testView2>
</iron-page‌​s>

因为 my-app.html 本身就是一个自定义元素，它不会让 chrome 找到它。所以我不得不把它放在阴影 dom 之外（index.html 页面）

my-testView1.html 和 my-testView2.html 页面上的 Javacript 代码如下所示：

<dom-module id="my-testView1">
  <template>
   ...
        <content></content>
   ...
 </template>

  <script>
    Polymer({
      is: 'my-testView1',

      ready: function () 
          {    
             // DEFAULT DISQUS CODE (I changed real URLs though):        
             var disqus_config = function () {
             this.page.url = 'https://www.example.com/testView1'; // Replace PAGE_URL with your page's canonical URL variable
             this.page.identifier = '/testView1'; 
             // this.page.title = 'Test View';
             };

            (function() { 
            var d = document, s = d.createElement('script');
            s.src = '//myChannelName.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
            })();
        }
     });
  </script>
</dom-module>

结果

评论仅出现在其中一个 my-testView1.html my-testView2.html 上。我在 my-testView1.html 上需要 1 个 disqus 线程，在 my-testView2.html

上需要另一个 disqus 线程

可能是路由的问题。 Disqus 控制台消息说我需要使用 ajax 方法 https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites 不幸的是，当我用示例中的代码替换上面的 javascript 代码时，我无法使其工作：

  <script>
    Polymer({
      is: 'my-testView1',

      ready: function () 
          {    
                 var disqus_shortname = 'myDisqusChannelId';
                 var disqus_identifier = '/testView1';
                 var disqus_url = 'http://example.com/testView1';
                 var disqus_config = function () { 
                   this.language = "en";
                 };

                 (function() {
                     var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                     dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
                     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                 })();

                 var reset = function (newIdentifier, newUrl) {
                     DISQUS.reset({
                         reload: true,
                         config: function () {
                             this.page.identifier = newIdentifier;
                             this.page.url = newUrl;
                         }
                     });
                 };
        }
     });
  </script>
</dom-module>

在两个自定义元素中（为每个自定义元素相应地更改 disqus_identifier 和 disqus_url）

错误是由于 disqus 库找不到 <div id="disqus_thread"> 元素。

这是因为这个元素在 Shadow DOM 中（这就是为什么它在没有实现真正 Shadow DOM 的 Firefox 中运行良好的原因）。

3 种可能的解决方案：

  1. 不要对您的 Polymer 元素使用阴影 DOM。
  2. 不要将 #disqus_thread 元素放入 Polymer 元素中（将其插入正常的 DOM）。
  3. 在您的 <template> 中使用 <content>，并在聚合物标签中使用 #disqus_thread 元素使其对库可用：

自定义元素中：

<template>
   //HTML code here
   <content></content>
</template>

在您插入自定义元素的 HTML 页面中：

<my-app>
   <my-testView>
      <div id="disqus_thread"></div>
   </my-testView>
</my-app>

<div> 将在放置（嵌套）<content> 标签的地方显示。

我想提供另一种在 Polymer 中使用 Disqus 评论的可能解决方案。主要问题是无法将 Disqus 与阴影 dom 中的元素一起使用，因为它们是隐藏的。那么我们怎样才能让阴影 dom 元素可见呢？我们可以将它从应用程序的 index.html 向下传递到组件层次结构。

要公开元素结构，您的 html 如下所示：

index.html
<polymer-app>
  <div id="disqus_thread">
</polymer-app>

在 Polymer 应用程序中：

<dom-module id="polymer-app">
  <template>
      <slot></slot>
  <template>
</dom-module>

插槽是#disqus_thread 将显示的位置。您可以将它进一步向下传递给 polymer-app 内的其他组件。 

<dom-module id="polymer-app">
  <template>
    <my-page>
      <slot></slot>
    </my-page>
  <template>
</dom-module>

注意：此代码只是示例。不要尝试复制和粘贴，它不会 运行。