{{ if eq (getenv "HUGO_ENV") "production" | and .IsPage | and (ne .Params.comment false) -}}
    <!-- Disqus Comment System-->
    {{- if .Site.DisqusShortname -}}
        <div id="disqus_thread"></div>
        <script type="text/javascript">
            (function() {
                // Don't ever inject Disqus on localhost--it creates unwanted
                // discussions from "localhost:1313" on your Disqus account...
                if (window.location.hostname == "localhost")
                    return;

                var dsq = document.createElement("script"); dsq.type = "text/javascript"; dsq.async = true;
                var disqus_shortname = "{{ .Site.DisqusShortname }}";
                dsq.src = "//" + disqus_shortname + ".disqus.com/embed.js";
                (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(dsq);
            })();
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
        <a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    {{- end -}}

    <!-- gitalk Comment System-->
    {{- if .Site.Params.gitalk.owner -}}
        <div id="gitalk-container"></div>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js" crossorigin="anonymous"></script>
        <script type="text/javascript">
            var gitalk = new Gitalk({
                id: "{{ .Date }}",
                title: "{{ .Title }}",
                clientID: "{{ .Site.Params.gitalk.clientId }}",
                clientSecret: "{{ .Site.Params.gitalk.clientSecret }}",
                repo: "{{ .Site.Params.gitalk.repo }}",
                owner: "{{ .Site.Params.gitalk.owner }}",
                admin: ["{{ .Site.Params.gitalk.owner }}"],
                body: decodeURI(location.href)
            });
            gitalk.render("gitalk-container");
        </script>
        <noscript>Please enable JavaScript to view the <a href="https://github.com/gitalk/gitalk">comments powered by gitalk.</a></noscript>
    {{- end -}}

    <!-- valine -->
    {{- if .Site.Params.valine.enable -}}
        <div id="vcomments"></div>
        <script src="https://cdn.jsdelivr.net/npm/valine@1.3.9/dist/Valine.min.js" integrity="sha256-CE75dgk/gvtViCxLFAPDiz2mQC6jvytsjETgypmFdDU=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            new Valine({
                el: "#vcomments",
                appId: "{{ .Site.Params.valine.appId }}",
                appKey: "{{ .Site.Params.valine.appKey }}",
                meta: ["nick", "mail"],
                notify: "{{ .Site.Params.valine.notify }}",
                verify: "{{ .Site.Params.valine.verify }}",
                avatar: "{{ .Site.Params.valine.avatar }}",
                placeholder: "{{ .Site.Params.valine.placeholder }}",
                visitor: "{{ .Site.Params.valine.visitor }}",
                recordIP: "{{ .Site.Params.valine.recordIP }}",
            });
        </script>
    {{- end -}}
{{- end }}