docs: bring up demo

7 years ago · 2fb701a2e0
parent 40676e55c2
commit 2fb701a2e0
2 changed files with 80 additions and 22 deletions
--- a/docs/example.html
+++ b/docs/example.html
@ -1,22 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <title>Demo Page |DisqusJS</title>
    <meta http-equiv="x-dns-prefetch-control " content="on">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link href="https://cdn.jsdelivr.net/npm/skx@0.0.1/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
    <link href="https://cdn.jsdelivr.net/npm/skx@0.0.1/favicon/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
    <link href="https://cdn.jsdelivr.net/npm/skx@0.0.1" rel="shortcut icon" type="image/ico">
    <link rel="stylesheet" href="./test/style.css">
    <link rel="stylesheet" href="./style/default.css">
 </head>
 <body>
 </body>
 </html>
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1,80 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="UTF-8">
    <title>Demo Page | DisqusJS</title>
    <meta http-equiv="x-dns-prefetch-control " content="on">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <link href="https://cdn.jsdelivr.net/npm/skx@0.0.1/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32">
    <link href="https://cdn.jsdelivr.net/npm/skx@0.0.1/favicon/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16">
    <link href="https://cdn.jsdelivr.net/npm/skx@0.0.1" rel="shortcut icon" type="image/ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/disqusjs@0.1.4/dist/disqusjs.css">
    <style>
        #disqus_thread {
            max-width: 600px;
            margin: 20px auto;
            padding: 10px
        }
        .dsqjs-demo-descr {
            max-width: 600px;
            padding: 20px;
            margin: 20px auto 0;
            text-align: center
        }
    </style>
 </head>
 <body>
    <div class="dsqjs-demo-descr">
        <h1>DisqusJS Demo</h1>
        <p>Disqus 替代方案 - 使用 Disqus API 渲染评论列表</p>
        <p>
            <a href="https://github.com/SukkaW/DisqusJS" target="_blank" rel="noopenner">GitHub</a>
        </p>
    </div>
    <div id="disqus_thread">
        <div id="dsqjs">
            <section class="dsqjs-action"></section>
            <header></header>
            <section class="dsqjs-info">
                <p id="dsqjs-load-disqus" class="dsqjs-message dsqjs-hide">评论完整模式加载中...如果长时间无法加载，请针对 disq.us |
                    disquscdn.com | disqus.com 启用代理，或使用<a href="#disqus_thread" id="dsqjs-force-dsqjs">评论基础模式</a></p>
                <p id="dsqjs-loading-dsqjs" class="dsqjs-message dsqjs-hide">你可能无法访问 Disqus，已启用评论基础模式。如需完整体验请针对
                    disq.us | disquscdn.com | disqus.com 启用代理并<a href="#disqus_thread" id="dsqjs-reload-disqus">尝试使用完整
                        Disqus 模式</a> | <a href="#disqus_thread" id="dsqjs-force-disqus">强制完整 Disqus 模式</a>。</p>
                <p id="dsqjs-load-error" class="dsqjs-message">评论基础模式出现错误，是否<a href="#disqus_thread" id="dsqjs-reload">重载</a>？</p>
                <p id="dsqjs-no-comment" class="dsqjs-no-comment dsqjs-hide">这里冷冷清清的，一条评论都没有</p>
            </section>
            <section class="dsqjs-container" id="dsqjs-container">
                <ul id="dsqjs-list" class="dsqjs-list"></ul>
                <div class="dsqjs-footer">
                    <div class="dsqjs-footer-right">Powered by <a href="https://disqus.com" rel="nofollow noopener noreferrer"
                            target="_blank">DISQUS</a> & <a href="https://github.com/SukkaW/DisqusJS">DisqusJS</a></div>
                </div>
            </section>
        </div>
    </div>
    <script>
        var disqusjs = [];
        disqusjs.config = {
            shortname: 'sukas-blog',
            identifier: "https://suka.js.org/DisqusJS/",
            url: "https://suka.js.org/DisqusJS/",
            api: "https://cors-anywhere.herokuapp.com/disqus.com/api/",
            apikey: 'G2amHmorq3wJVjaviRo3YNWPgsKkAm7IolUWQKLeyQNd7lb3GtgWNnh6RgFFIwO9',
            admin: 'SukkaW',
            adminLabel: '苏卡卡~'
        };
    </script>
    <script>
        console.log()
    </script>
    <script src="https://cdn.jsdelivr.net/npm/disqusjs@0.1.4/dist/disqus.js"></script>
 </body>
 </html>