如何使 disqus 评论 javascript 代码在聚合物自定义元素中工作
How to make a disqus comments javascript code to work in a polymer custom element
我正在使用聚合物入门套件 2.0
嵌套自定义元素的结构：
（意思是 <my-app></my-app> 在 index.html 等里面）：
| index.html
--------\ my-app.html（自定义元素）
--------------\ my-testView1.html（自定义元素）
--------------\ my-testView2.html（自定义元素）
我需要在我的-testView1.html 和我的-testView2.html 页面上添加disqus 评论（每个单独的线程）
我试图让它工作，有一次 chrome 的控制台消息告诉我必须使用 ajax 方法（因为我的-testView1.html 和我的-testView2.html 在 <iron-pages> 里面所以路由正在进行，我想这就是原因）它也给了我这个 link https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
my-testView1.html 的结构：
(我把example.com和myChannelID改成了实名)
...
<content select=".disqus1"></content>
</template>
<script>
Polymer({
is: 'my-testView1',
)};
</script>
<script>
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView1';
this.page.identifier = '/testView1';
this.page.title = 'Test View1';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://MyChannelId.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "/testView1";
this.page.url = "https://www.example.com/#!testView1";
}
});
</script>
</dom-module>
my-testView2.html的结构（与第一个相同）：
...
<content select=".disqus2"></content>
</template>
<script>
Polymer({
is: 'my-testView2',
});
</script>
<script>
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView2';
this.page.identifier = '/testView2';
this.page.title = 'Test View2';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://MyChannelId.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "/testView2";
this.page.url = "https://www.example.com/#!testView2";
}
});
</script>
让我走到这一步的问题早先在这里被问过：
在一些帮助和指导下，我设法做到了这一点。但是我仍然不能让它与 ajax 一起工作，这样它就会将单独的 disqus 线程加载到每个页面。
也许它与 #! 有关，或者我必须将它插入到 ready: function() {} 中，但如果我这样做，它只会破坏布局，所以我将它放在一个单独的标签中并且现在它说 DISQUS is not defined。我不知道我在那里错过了什么。
我只有 50 声望赏金可以分享，但如果你知道如何让它发挥作用，能否请你解释一下如何修复它。
<div id="disqus_thread"> 元素在页面中必须是唯一的，因为它是 disqus 库将插入下载线程的地方。所以你应该在 <iron-pages> 标签之后添加它。
<div>
<iron-pages>
<view-1></view-1>
<view-2></view-2>
</iron-pages>
</div>
<div id="disqus_thread"></div>
然后每次显示子页面时都必须调用DISQUS.reset()。你能知道是因为在选中的元素上加了一个classiron-selected。所以你可以监听 Polymer 元素的 attributeChange() 回调，并检查它是否包含 iron-selected class。如果是，您可以使用要加载的线程的标识符调用 DISQUS.reset()。
Polymer( {
is: 'view-1',
attributeChanged: function ( name, old, value )
{
if ( name == 'class' && this.classList.contains( 'iron-selected' ) )
{
//call DISQUS.reset() here
DISQUS.reset( {
reload: true,
config: function ()
{
this.page.identifier = "/testView1"
this.page.url = "https://www.example.com/testView1"
}
} )
}
}
} )
此外，由于您使用 DISQUS.reset()，您可以删除 var disqus_config = ...
解决<div id=disqus_thread>元素的唯一性问题：
如果你想把它插入到右页里面，你可以在调用DISQUS.reset()之前使用appendChild()移动它。例如，将其放在 <div id='container'> 元素中。
内部attributeChange()方法：
this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )
里面view-1 <template>:
<template>
//Page content
<div id=container></div>
//Page footer
</template>
另一个可能的解决方案是：
创建一个 html 文件并将 disqus 代码放入其中：
<div id="disqus_thread"></div>
<script>
var disqus_shortname = 'YourDisqusId';
var disqus_identifier = '/view1';
var disqus_url = 'https://example.com/view1/';
var disqus_config = function () {
};
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
然后将 iframe 添加到自定义元素页面link使用该代码
<iframe src="../src/page1_disqus.html" style="width:100%; min-height:400px; border:0 none;"></iframe>
如果它只是在这个 iframe 中向您显示您的应用程序，那么最好不要将此 html 文件放在您的 src 目录中，而是放在单独的服务器上，并使用共享 link 而不是本地存储 ../src/
如果您需要将 disqus 放在多个页面上，只需创建另一个 html 文件，然后 link 将其添加到需要以相同方式使用 iframe 的页面
我正在使用聚合物入门套件 2.0
嵌套自定义元素的结构：
（意思是 <my-app></my-app> 在 index.html 等里面）：
| index.html
--------\ my-app.html（自定义元素）
--------------\ my-testView1.html（自定义元素）
--------------\ my-testView2.html（自定义元素）
我需要在我的-testView1.html 和我的-testView2.html 页面上添加disqus 评论（每个单独的线程）
我试图让它工作，有一次 chrome 的控制台消息告诉我必须使用 ajax 方法（因为我的-testView1.html 和我的-testView2.html 在 <iron-pages> 里面所以路由正在进行，我想这就是原因）它也给了我这个 link https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
my-testView1.html 的结构：
(我把example.com和myChannelID改成了实名)
...
<content select=".disqus1"></content>
</template>
<script>
Polymer({
is: 'my-testView1',
)};
</script>
<script>
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView1';
this.page.identifier = '/testView1';
this.page.title = 'Test View1';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://MyChannelId.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "/testView1";
this.page.url = "https://www.example.com/#!testView1";
}
});
</script>
</dom-module>
my-testView2.html的结构（与第一个相同）：
...
<content select=".disqus2"></content>
</template>
<script>
Polymer({
is: 'my-testView2',
});
</script>
<script>
var disqus_config = function () {
this.page.url = 'https://www.example.com/testView2';
this.page.identifier = '/testView2';
this.page.title = 'Test View2';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://MyChannelId.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = "/testView2";
this.page.url = "https://www.example.com/#!testView2";
}
});
</script>
让我走到这一步的问题早先在这里被问过：
在一些帮助和指导下，我设法做到了这一点。但是我仍然不能让它与 ajax 一起工作，这样它就会将单独的 disqus 线程加载到每个页面。
也许它与 #! 有关，或者我必须将它插入到 ready: function() {} 中，但如果我这样做，它只会破坏布局，所以我将它放在一个单独的标签中并且现在它说 DISQUS is not defined。我不知道我在那里错过了什么。
我只有 50 声望赏金可以分享，但如果你知道如何让它发挥作用，能否请你解释一下如何修复它。
<div id="disqus_thread"> 元素在页面中必须是唯一的，因为它是 disqus 库将插入下载线程的地方。所以你应该在 <iron-pages> 标签之后添加它。
<div>
<iron-pages>
<view-1></view-1>
<view-2></view-2>
</iron-pages>
</div>
<div id="disqus_thread"></div>
然后每次显示子页面时都必须调用DISQUS.reset()。你能知道是因为在选中的元素上加了一个classiron-selected。所以你可以监听 Polymer 元素的 attributeChange() 回调，并检查它是否包含 iron-selected class。如果是，您可以使用要加载的线程的标识符调用 DISQUS.reset()。
Polymer( {
is: 'view-1',
attributeChanged: function ( name, old, value )
{
if ( name == 'class' && this.classList.contains( 'iron-selected' ) )
{
//call DISQUS.reset() here
DISQUS.reset( {
reload: true,
config: function ()
{
this.page.identifier = "/testView1"
this.page.url = "https://www.example.com/testView1"
}
} )
}
}
} )
此外，由于您使用 DISQUS.reset()，您可以删除 var disqus_config = ...
解决<div id=disqus_thread>元素的唯一性问题：
如果你想把它插入到右页里面，你可以在调用DISQUS.reset()之前使用appendChild()移动它。例如，将其放在 <div id='container'> 元素中。
内部attributeChange()方法：
this.$.container.appendChild( document.getElementById( 'disqus_thread' ) )
里面view-1 <template>:
<template>
//Page content
<div id=container></div>
//Page footer
</template>
另一个可能的解决方案是：
创建一个 html 文件并将 disqus 代码放入其中：
<div id="disqus_thread"></div>
<script>
var disqus_shortname = 'YourDisqusId';
var disqus_identifier = '/view1';
var disqus_url = 'https://example.com/view1/';
var disqus_config = function () {
};
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
然后将 iframe 添加到自定义元素页面link使用该代码
<iframe src="../src/page1_disqus.html" style="width:100%; min-height:400px; border:0 none;"></iframe>
如果它只是在这个 iframe 中向您显示您的应用程序，那么最好不要将此 html 文件放在您的 src 目录中，而是放在单独的服务器上，并使用共享 link 而不是本地存储 ../src/
如果您需要将 disqus 放在多个页面上，只需创建另一个 html 文件，然后 link 将其添加到需要以相同方式使用 iframe 的页面