Disqus 评论影响我的页面速度。我怎样才能延迟加载或点击显示评论？

Question

您好，我已经安装了 Disqus 静态网站（使用 Hugo 制作）。我的网站加载时间确实受到了约 30% 的负面影响。所以，我希望我可以阻止它加载它，直到有人到达那个部分，或者更好的方法是会有 'show comments' 按钮，完全由访问者决定。

我已经在使用 lazyload（lozad js 库），但它无法与 disqus 一起使用，即使我也尝试了以下代码

var iframes = doc.querySelectorAll('iframe');

iframes.forEach(function (e){

  e.classList.add('lozad'); // adds required 'lozad' class
  var iframeAttr = e.getAttribute('src'); 
  e.setAttribute('data-src', iframeAttr); // lozad needs source data in data-src attribute
  e.setAttribute('src', ''); // empty src attribute so that library use it at right time
});

Answer 1

Zachary 为 Hugo 网站编写了一个教程，介绍如何显示 显示评论 按钮，以及如何仅在 reader 单击时显示 Disqus 评论按钮。

作为奖励，Disqus Javascript 文件 embed.js 只会在单击按钮时加载。

要将其添加到您的站点，首先，创建一个部分并将其命名为 disqus.html。在此文件中，放入以下代码：

<div id="disqus-container">
  {{ with .Site.DisqusShortname }}
    <button id="disqus-button" onclick="showComments()">Show comments</button>
    <div id="disqus-comments">
      {{ $isDummyName := eq . "yourdiscussshortname" }}
      {{ $isServer := $.Site.IsServer }}
      {{ if or $isDummyName $isServer }}
        <p>Disqus comments are disabled.</p>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ else }}
        <div id="disqus_thread">
        </div>
        <script type="application/javascript">
          function showComments() {
            {{ partial "disqus-js-main.js" . | safeJS }}
            {{ partial "disqus-js-common.js" . | safeJS }}
          }
        </script>
      {{ end }}
      <noscript>Enable JavaScript to view Disqus comments.</noscript>
    </div>
  {{ end }}
</div>

然后，创建两个 Javascript 文件。第一个叫它 disqus-js-common.js。在此文件中，添加以下代码：

// Remove button
var disqusButton = document.getElementById('disqus-button');
disqusButton.parentNode.removeChild(disqusButton); 
// Un-hide comments
var disqusComments = document.getElementById('disqus-comments');
disqusComments.style.display = 'block';

第二个 Javascript 文件调用它 disqus-js-main.js。在这个里面，添加以下代码：

// Config
var disqus_config = function () {
};
// Build and append comments 
var d = document;
var s = d.createElement('script');
s.async = true;
s.src = '//' + "{{ . }}" + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', + new Date());
(d.head || d.body).appendChild(s);

最后，添加一点 CSS 让一切看起来更好：

#disqus-container {
  font-size: 0.85rem;
  border: 1px solid;
  padding: 1.5rem;
}
#disqus-button {
  width: 100%;
}
#disqus-comments {
  display: none; 
}
#disqus-comments,
#disqus-comments iframe {
  max-height: 65vh !important;
  overflow-y: auto; 
}

Source

Answer 2

可以用纯HTML和JavaScript

来实现

但是因为我真的很喜欢Alpine.js这就是可以做到的

<button
  x-data="disqusComponent()"
  x-show="!loaded"
  @click="toggle()"
>Show/Post Comments
</button>

<div id="disqus_thread"></div>

见Load Disqus Comments on demand

Disqus 评论影响我的页面速度。我怎样才能延迟加载或点击显示评论？

Disqus Comments affecting my pagespeed. How can I either lazy load or click to show comments?

disqus

pagespeed