Disqus 评论加载模式

disqus.ejs

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

<style>
    .disqus_click_btn {
        line-height: 30px;
        margin: 0;
        min-width: 50px;
        padding: 0 14px;
        display: inline-block;
        font-family: <%= theme.font.family %>;
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0;
        overflow: hidden;
        will-change: box-shadow;
        transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
        outline: 0;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        vertical-align: middle;
        border: 0;
        background: rgba(158, 158, 158, .2);
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        color: #fff;
        background-color: <%= theme.uiux.button_color %>;
        text-shadow: 0
    }
    
    .disqus-float-left {
        float: left
    }
    
    .disqus-avatar {
        margin-right: 12px;
        float: left
    }
    
    .disqus-avatar img {
        width: 48px;
        height: 48px
    }
    
    .disqus-avatar .disqus-user {
        position: relative;
        z-index: 100;
        background: #dbdfe4;
        padding: 0
    }
    
    .disqus-post-message {
        overflow: hidden
    }
</style>
<script type="text/javascript">
    function setLocalStorage(s, e) {
        try {
            localStorage.setItem(s, e)
        } catch (o) {
            console.log(o), console.log("Failed to set localStorage item")
        }
    }

    function proxyMode() {
        setLocalStorage("disqusMode", "proxy"), $("#disqus_thread").empty(), $("#disqus-switch").remove(), $("#comments").prepend('<div id="disqus-switch" class="text-center"><button class="disqus-switch-button disqus_click_btn" id="disqus-switch-to-direct" data-current-mode="proxy">切换至完整模式「请确保 disq.us & disquscdn.com & disqus.com 可正常访问」</button></div>'), $("#disqus_thread").append('<h3 class="disqus-loading text-center">Loading...</h3>'), $.ajax({
            type: "GET",
            url: disqus_proxy_url + "/api/3.0/threads/list.json?forum=" + disqus_shortname + "&thread=ident:" + disqus_identifier + "&api_key=" + disqus_api_key,
            contentType: "application/json; charset=utf-8",
            async: !0,
            success: function(s) {
                if (1 != s.response.length) return !1;
                var e = s.response[0].id;
                $.ajax({
                    type: "GET",
                    url: disqus_proxy_url + "/api/3.0/posts/list.json?forum=" + disqus_shortname + "&thread=" + e + "&api_key=" + disqus_api_key,
                    contentType: "application/json; charset=utf-8",
                    async: !0,
                    success: function(s) {
                        if (console.log(s), 0 != s.response.length && "undefined" != typeof s.response) {
                            var e = '<ul id="disqus-post-list">';
                            for (var o in s.response) {
                                if (s.response[o].media.length > 0)
                                    for (var t in s.response[o].media) s.response[o].message += '<a href="' + s.response[o].media[t].location + '" target="_blank" rel="nofollow"><img src="' + s.response[o].media[t].location + '" alt="图片"></a>';
                                e += '<li class="disqus-post"><div class="disqus-post-content"><div class="indicator"></div><div class="disqus-avatar"><a href="' + s.response[o].author.profileUrl + '" class="disqus-user" target="_blank" rel="nofollow"><img src="' + s.response[o].author.avatar.cache + '" alt="Avatar"/></a></div><div class="disqus-post-body"><header class="comment__header"><span class="disqus-post-byline"><span class="disqus-author publisher-anchor-color"><a href="' + s.response[o].author.profileUrl + '" target="_blank" rel="nofollow">' + s.response[o].author.name + '</a></span></span><span class="disqus-post-meta"><span class="bullet time-ago-bullet" aria-hidden="true">•</span><a href="" class="time-ago" target="_blank" rel="nofollow">' + s.response[o].createdAt + '</a></span></header><div class="disqus-post-body-inner"><div class="disqus-post-message-container" data-role="message-container"><div class="publisher-anchor-color" data-role="message-content"><div class="disqus-post-message " data-role="message" dir="auto">' + s.response[o].message + '</div><span class="disqus-post-media"><ul data-role="post-media-list"></ul></span></div></div></div></div></div></li>'
                            }
                            e += "</ul>", $("#disqus_thread").empty(), $("#disqus_thread").append(e), s.cursor.more && $("#comments").append('<div id="disqus-loadmore" class="text-center"><button id="disqus-loadmore-button" class="disqus_click_btn">Load more</button></div>')
                        } else $(".disqus-loading").text("Um...Nothing yet")
                    },
                    error: function(s) {
                        console.log(s)
                    }
                })
            },
            error: function(s) {
                console.log(s)
            }
        })
    }

    function directMode(s) {
        $("#disqus_thread").empty(), $("#disqus-switch").remove(), $("#disqus-loadmore").remove(), $("#comments").prepend('<div id="disqus-switch" class="text-center"><button class="disqus-switch-button disqus_click_btn" id="disqus-switch-to-proxy" data-current-mode="direct">切换至评论浏览模式</button></div>');
        var e = document.createElement("script");
        e.type = "text/javascript", e.async = !0, e.src = "//" + disqus_shortname + ".disqus.com/" + s, (document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(e), setLocalStorage("disqusMode", "direct")
    }

    var disqus_shortname = "<%= theme.comment.shortname %>",
        disqus_identifier = "<%= page.permalink %>",
        disqus_title = "<%= page.title %>",
        disqus_url = "<%= page.permalink %>",
        disqus_api_key = "",
        disqus_proxy_url = "";

    $("body").on("click", "#disqus-switch-to-proxy", function() {
        proxyMode()
    }), $("body").on("click", "#disqus-switch-to-direct", function() {
        directMode("embed.js")
    }), $(window).on("scroll.comments", function() {
        if ($(window).scrollTop() + $(window).height() > .7 * $(document).height()) {
            try {
                "proxy" == localStorage.getItem("disqusMode") ? proxyMode() : directMode("embed.js")
            } catch (s) {
                console.log(s), console.log("Failed to get localStorage item"), proxyMode()
            }
            $(window).off("scroll.comments")
        }
    })
</script>