javascript - 如何在 Blogger 第 3 方主题中强制加载 Disqus 评论

Question

我有一个博客，其中安装了第 3 方主题。 我的博客是博主博客 我没有计划改变主题，因为这个想法和它是如何构建的 与我的网站内容匹配。
我想问的是，有时 Disqus 评论根本无法加载。即使我刷新页面也不会加载。

我想要一个代码来强制它在检查未加载后重新加载。这种情况不仅会发生在 Disqus 上，还会发生在 AddThis 共享按钮上。我添加了async='async'到这两个脚本，让它加载得晚一点。虽然它增加了加载的可能性，但仍然没有改变它有时不加载的事实。当有时发生不加载时，是否有时会在刷新后加载，或者即使刷新后也不会加载(除非我复制链接并在浏览器中打开新选项卡或窗口并再次打开页面)。

博客主题也已通过 Bootstrap 安装。 所以我不得不把 comment_picker 包裹起来与 <div class='col-md-12 col-sm-12 col-xs-12' id='disqus_thread'>
顺便说一句，id='disqus_thread'是我随机放置的东西，但它仍然增加了加载的可能性。

这是 disqus 和 comment_picker 的代码在小部件中Blog1

评论选择器

<b:includable id='comment_picker' var='post'>
 <div class='col-md-12 col-sm-12 col-xs-12' id='disqus_thread'>
  <b:if cond='data:post.commentSource == 1'>
   <b:include data='post' name='iframe_comments'/>
    <b:elseif cond='data:post.showThreadedComments'/>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
  <b:include data='post' name='comments'/>
 </b:if>
 </div>
</b:includable>

Disqus

<b:widget id='HTML1' locked='false' title='Disqus for site' type='HTML' version='1'>
  <b:widget-settings>
   <b:widget-setting name='content'><![CDATA[<!-- Disqus Widget -->]]>
   </b:widget-setting>
  </b:widget-settings>
<b:includable id='main'>
<script asyn='async' type='text/javascript'>
 var disqus_shortname = &#39;site&#39;;
 var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
 if (!disqus_blogger_current_url.length) {
   disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
 }
 var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
 var disqus_blogger_canonical_homepage_url = &quot;
 <data:blog.canonicalHomepageUrl/>&quot;;
 </script>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style type='text/css'>
 #comments {display:none;}
 </style>
 <script type='text/javascript'>
     (function() {
      var bloggerjs = document.createElement(&#39;script&#39;);
      bloggerjs.type = &#39;text/javascript&#39;;
      bloggerjs.async = true;
      bloggerjs.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/blogger_item.js&#39;;
     (document.getElementsByTagName(&#39;head&#39;)[0] || 
    document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
   })();
</script>
</b:if>
<style type='text/css'>
.post-comment-link { visibility: hidden; }
</style>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/blogger_index.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] ||document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:includable>

链接到我的完整主题: https://pastebin.com/WDMMZFfh

您可能需要一些时间，但请尝试解决它。​​

Answer 1

Disqus 小部件必须位于 Blog1 小部件之后才能检测带有 id='comments' 的 div，并且由于您的主题在布局页面中不显示 Blog1 小部件，您可以剪切 Disqus 小部件并将其直接粘贴到 <b:widget id='Blog1'>...</b:widget> 之后