Disqus 注释在聚合物自定义元素中不起作用

Disqus comments don't work in a polymer custom element

本文关键字：元素 不起作用 自定义 聚合物 注释 Disqus      更新时间：2023-09-26

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

我的网站结构：

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

我需要将disqus评论放在my-testView1.html和my-testView2.html

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>

Disqusdiv

我将disqus评论的div放在index.html <my-app>内，以便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页面(之外

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

<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 上的 1 个 disqus 线程.html在 my-testView2 上需要另一个 disqus 线程.html

也许是因为路由。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 中(这就是为什么它在 Firefox 中工作正常，因为它没有实现真正的 Shadow DOM(。

3 种可能的解决方案：

  1. 不要将 Shadow DOM 与 Polymer 元素一起使用。
  2. 不要将#disqus_thread元素放在聚合物元素中(将其插入普通 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>标签的位置显示。

我想

给出另一种在聚合物中使用Disqus注释的可能解决方案。主要问题是无法将Disqus与阴影dom中的元素一起使用，因为它们是隐藏的。那么我们如何使阴影 dom 元素可见呢？我们可以将其从应用程序的索引.html向下传递组件层次结构。

要像这样公开 html 的元素结构： 

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

在聚合物应用中：

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

插槽是 #disqus_thread 将显示的位置。你可以把它进一步传递给聚合物应用程序内的其他组件。

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

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

相关文章：