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-pages>
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-pages>
因为 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 种可能的解决方案:
- 不要对您的 Polymer 元素使用阴影 DOM。
- 不要将
#disqus_thread
元素放入 Polymer 元素中(将其插入正常的 DOM)。
- 在您的
<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>
注意:此代码只是示例。不要尝试复制和粘贴,它不会 运行。
我不知道如何使 disqus 评论代码在我的自定义元素中工作。
我网站的结构:
| index.html
--------\ my-app.html
(自定义元素)
--------------\ my-testView1.html
(自定义元素)
--------------\ my-testView2.html
(自定义元素)
我需要在 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-pages>
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-pages>
因为 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 控制台消息说我需要使用 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 种可能的解决方案:
- 不要对您的 Polymer 元素使用阴影 DOM。
- 不要将
#disqus_thread
元素放入 Polymer 元素中(将其插入正常的 DOM)。 - 在您的
<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>
注意:此代码只是示例。不要尝试复制和粘贴,它不会 运行。