1

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

我的网站结构：

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

我需要在里面放上disqusmy-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>

disqus 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 找到它。所以我不得不把它放在shadow dom（index.html页面）之外

my-testView1.html页面上的 Javacript 代码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.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相应地为每个元素）

4

2 回答 2

1

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

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

3种可能的解决方案：

  1. 不要将 Shadow DOM 与 Polymer 元素一起使用。
  2. 不要将#disqus_thread元素放在 Polymer 元素中（将其插入到普通 DOM 中）。
  3. <content>在您的<template>, 和聚合物标签内的元素中使用#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>

于 2016-09-29T12:42:28.777 回答
0

我想为在 Polymer 中使用 Disqus 注释提供另一种可能的解决方案。主要问题是无法将 Disqus 与 shadow dom 中的元素一起使用，因为它们是隐藏的。那么我们如何才能让 shadow dom 元素可见呢？我们可以将它从应用程序的 index.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>

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

于 2018-04-08T15:45:56.297 回答