嗨，我有安装了Disqus的静态网站(用雨果制作(。我的网站加载时间确实受到~30%的负面影响。所以，我希望我可以阻止它加载它，直到有人到达该部分，或者更好的方法是会有"显示评论"按钮，完全留给访问者决定。
我已经在使用 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
});
> Zachary为Hugo网站写了一个教程，介绍如何显示">显示评论"按钮，并且仅在读者单击按钮时显示Disqus评论。
作为奖励，嵌入的Disqus Javascript文件.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;
}
源
您可以使用IntersectionObserver API仅在用户滚动到页面的特定部分时延迟加载和初始化Disqus。IO API 在现代浏览器中得到了很好的支持，因此您无需加载任何其他延迟加载包(或自定义 JS(，这会进一步使您的网站陷入困境。
这是我开始工作的一个例子。它使用 Disqus 用来挂载其注释的div作为页面上触发所有内容加载和初始化的点。请注意，其中很大一部分(已注释(是直接从他们的文档中复制的。
<script>
let mountNode = document.querySelector("#disqus_thread");
let options = {
rootMargin: "0px",
threshold: 0,
};
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log("Initialize Disqus!");
//-- Copied from their documentation: START
var disqus_config = function () {
this.page.url = "https://whatever.com";
this.page.identifier = "whatever!";
};
var d = document,
s = d.createElement("script");
s.src = "https://your-shortname.disqus.com/embed.js";
s.setAttribute("data-timestamp", +new Date());
(d.head || d.body).appendChild(s);
//-- Copied from their documentation: END
// After initializing, we don't need this observer anymore.
observer.unobserve(mountNode);
return;
}
});
}, options);
observer.observe(mountNode);
</script>
综上所述，即使是这种方法也会让你走到这一步。在客户端构建注释和表单本质上是一组昂贵的任务，因此您仍然会看到对页面性能的一些不利影响。如果不是加载时间，则 Disqus 在启动时在页面上执行的所有内容都会阻塞主线程。您还将错过在您的页面上具有状态HTML注释的SEO好处。
所有这些都代表了我在自己的网站上放弃disqus并为其构建自己的服务的大部分原因，我最终向公众开放了该服务。它与不同的平台集成(还不是 Hugo，但希望它正在路上(，并吐出静态渲染的评论并避免侧面膨胀等。请记住，对于您未来经历的任何重建：
https://jamcomments.com/
它可以通过纯HTML和JavaScript来实现
但是由于我真的很喜欢Alpine.js这就是可以做到的
<button
x-data="disqusComponent()"
x-show="!loaded"
@click="toggle()"
>Show/Post Comments
</button>
<div id="disqus_thread"></div>
请参阅按需加载评论