Disqus评论不适用于聚合物定制元素 [英] Disqus comments don't work in a polymer custom element
问题描述
我不知道如何在我的自定义元素中使用disqus注释代码。
我网站的结构：
| index.html
-------- \ my-app.html （自定义元素）
---------------- \ my-testView1.html （自定义元素）
---------------- \ my-testView2.html （自定义元素）< br>
我需要将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
我把在 页 因为my-app.html本身就是一个自定义元素，它不会让chrome找到它。所以我不得不把它放在阴影dom之外（ 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>
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 ='https://www.example.com/testView1'; //将PAGE_URL替换为您网页的规范网址变量
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控制台消息说我需要使用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。重置（{
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:
<body>
<my-app>
<div class="disqusClass1" id="disqus_thread"></div>
<div class="disqusClass2" id="disqus_thread"></div>
<my-app>
</body>
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-pages>
Structure of my-testView1.html :
<template>
<content select=".disqusClass1"></content>
</template>
Structure of my-testView2.html :
<template>
<content select=".disqusClass2"></content>
</template>
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-pages>
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 = '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>
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 https://help.disqus.com/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:
<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>
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_threadelement in a Polymer element (insert it in the normal DOM). - Use
<content>in your<template>, and the#disqus_threadelement inside the polymer tag to make it availabe to the library:
In the custom elements:
<template>
//HTML code here
<content></content>
</template>
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.
这篇关于Disqus评论不适用于聚合物定制元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
