1

カスタム要素内で動作するように disqus コメント コードを作成する方法がわかりません。

私のサイトの構造:

| | index.html
--------\ my-app.html(カスタム要素)
----------------\ my-testView1.html(カスタム要素)
---------------- \ my-testView2.html(カスタム要素)

内部にdisqusコメントを入れる必要があり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-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>chromeindex.htmlが見つけられるようにしました。そのように中に入れると、それを見つけることができませ<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 がそれを見つけられないためです。そのため、シャドウ 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 (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>

結果

コメントは、一度にこれらの 1 つにのみ表示され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上記のコードと例のコード:

  <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

0

私は、Polymer で Disqus コメントを使用するための別の解決策を提供したいと考えました。主な問題は、Shadow DOM 内の要素が隠されているため、それらの要素で Disqus を使用できないことです。では、shadow 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>

注: このコードは単なる例です。コピーして貼り付けようとしないでください。実行されません。

于 2018-04-08T15:45:56.297 に答える