hugo-theme-stack-stars/layouts/partials/comments/provider/disqusjs.html
SSpirits 9f734a0647
feat(comments): DisqusJS integration (#307)
* add comment provider: DisqusJS

* Simplify `if` condition, and format code

* Load disqusjs.scss only when it's enabled

* Use `let` instead of `var`

Co-authored-by: sspirits <admin@lv5.moe>
Co-authored-by: Jimmy Cai <github@jimmycai.com>
2021-08-15 19:19:51 +02:00

61 lines
No EOL
2.6 KiB
HTML

{{- $pc := .Site.Config.Privacy.Disqus -}}
{{- $disqusjs := .Site.Params.Comments.disqusjs -}}
{{- if and (not $pc.Disable) (and $disqusjs.Shortname $disqusjs.ApiKey) -}}
{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | resources.ToCSS | minify -}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<div class="disqus-container">
<div id="disqus_thread"></div>
<script type="application/javascript">
let disqusjs;
function loadDisqusJS() {
disqusjs = new DisqusJS({
shortname: {{ $disqusjs.Shortname }},
siteName: {{ .Site.Title }},
apikey: {{ $disqusjs.ApiKey }},
{{ with $disqusjs.ApiUrl }}api: {{ . }},{{ end }}
{{ with $disqusjs.Admin }}admin: {{ . }},{{ end }}
{{ with $disqusjs.AdminLabel }}adminLabel: {{ . }}{{ end }}
});
}
function lazyLoadDisqusJS() {
if (["localhost", "127.0.0.1"].indexOf(window.location.hostname) != -1) {
document.getElementById('disqus_thread').innerHTML = 'Disqus comments not available by default when the website is previewed locally.';
return;
}
let d = document.createElement('script');
d.src = 'https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js';
d.async = false;
document.body.appendChild(d);
d.onload = () => {
loadDisqusJS();
window.addEventListener('onColorSchemeChange', (e) => {
if (disqusjs) {
loadDisqusJS();
}
})
}
}
let runningOnBrowser = typeof window !== "undefined";
let isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
let supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
if (!isBot && supportsIntersectionObserver) {
let disqus_observer = new IntersectionObserver(function(entries) {
if (entries[0].isIntersecting) {
lazyLoadDisqusJS();
disqus_observer.disconnect();
}
});
disqus_observer.observe(document.getElementById('disqus_thread'));
} else {
lazyLoadDisqusJS();
}
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
{{- end -}}