Disqus评论不适用于聚合物定制元素

编程入门行业动态更新时间:2024-10-10 03:26:50

本文介绍了Disqus评论不适用于聚合物定制元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

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

我网站的结构：

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

我需要将disqus注释放在 my-testView1.html 和中-testView2.html

的结构index.html ：

< body> < my-app> < div class =disqusClass1id =disqus_thread>< / div> < div class =disqusClass2id =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

我把在 index.html 上的< my-app> 内的disqus注释的div，以便chrome可以找到它。 b $ b

页 my-app.html

<铁 - 页面> < 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（我改变了真实）但网址： var disqus_config = function（）{ this.page.url ='www.example/testView1'; //将PAGE_URL替换为您网页的规范网址变量 this.page.identifier ='/ testView1'; // this.page.title ='Test View'; }; （function（）{ var d = document，s = d.createElement（'script'）; s.src ='// myChannelName.disqus/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方法 help.disqus/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 ='example/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 / embed.js'; （document.getElementsByTagName（'head'）[0] || document .getElementsByTagName（'body'）[0]）。appendChild（dsq）; }）（）; var reset = function（newIdentifier，newUrl）{ DISQUS。重置（{ 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种可能的解决方案：

不要将Shadow DOM与Polymer元素一起使用。

Don不要将 #disqus_thread 元素放在Polymer元素中（将其插入普通DOM中）。

使用< content> 在< template> 中，以及 #disqus_thread 元素在聚合物标签内部使其可用于库：

在自定义元素中：

< template> //这里的HTML代码< content>< / content> < / template>

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

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

< div> 将在<嵌套的< content> 标签的位置显示。

I don't know how to make a disqus comments code to work inside of my custom elements.

Structure of my site:

| index.html --------\ my-app.html (custom element) ----------------\ my-testView1.html (custom element) ----------------\ my-testView2.html (custom element)

I need to put disqus comments inside my-testView1.html and my-testView2.html

Structure of index.html:

Structure of 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>

Structure of my-testView1.html :

Structure of my-testView2.html :

The disqus div

I put the div of the disqus comments inside <my-app> on the index.html so that chrome could find it. It can't find it if I put it inside <my-testView1> like that:

page 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>

because the my-app.html is a custom element itself and it won't let chrome to find it. So I had to put it outside of the shadow dom (the index.html page)

Javacript code on the pages my-testView1.html and my-testView2.htmllook like this:

<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 = 'www.example/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/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); } }); </script> </dom-module>

Result

Comments appears only on one of these my-testView1.html my-testView2.html at the time. I need 1 disqus thread on my-testView1.html and another disqus thread on my-testView2.html

Maybe it's because of routing. Disqus console message says that I need to use ajax method help.disqus/customer/portal/articles/472107-using-disqus-on-ajax-sites Unfortunately I could not make it work when I replaced the javascript code above with the code from the example:

inside both custom elements (changing disqus_identifier and disqus_url correspondingly for each of them)

解决方案

The error is due to the fact that the disqus library can't find the <div id="disqus_thread"> element.

It's because this element is inside a Shadow DOM (and that's why it works fine in Firefox which doesn't implement real Shadow DOM).

3 possible solutions:

Don't use Shadow DOM with your Polymer elements.

Don't put the #disqus_thread element in a Polymer element (insert it in the normal DOM).

Use <content> in your <template>, and the #disqus_thread element inside the polymer tag to make it availabe to the library:

In the custom elements:

In the HTML page where you insert the custom element:

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

The <div> will be revealed at the place where the (nested) <content> tags are placed.