demo/demo.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>Twikoo Demo</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/bulma/0.8.2/css/bulma.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="./twikoo.all.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    function init() {
      twikoo.init({
        envId: document.getElementById('envId').value,
        el: '#tcomment',
        region: document.getElementById('region').value,
        path: document.getElementById('path').value,
        lang: document.getElementById('lang').value,
        onCommentLoaded: function () {
          console.log('评论加载完成')
        }
      }).then(function () {
        console.log('Twikoo 加载完成');
      });
    }
  </script>
  <navbar>
    <div class="container">
      <nav class="navbar">
        <div class="navbar-brand">
          <a class="navbar-item" href="#"><strong>Twikoo</strong></a>
        </div>
        <div class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item" href="#">Demo</a>
          </div>
          <div class="navbar-end">
            <div class="navbar-item">
              <a class="button is-light" href="https://github.com/imaegoo/twikoo">View on Github</a>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </navbar>
  <section class="section">
    <div class="container">
      <div class="columns">
        <div class="configs column">
          <div class="field">
            <label class="label">环境 ID | Environment ID: <code>envId</code></label>
            <div class="control">
              <input class="input" id="envId" type="text" placeholder="e.g imaegoo-16fe3d" value="http://localhost:8080">
            </div>
          </div>
          <div class="field">
            <label class="label">环境地域 | Region: <code>region</code></label>
            <div class="control">
              <input class="input" id="region" type="text" placeholder="e.g ap-guangzhou" value="ap-shanghai">
            </div>
          </div>
          <div class="field">
            <label class="label">文章路径 | Path: <code>path</code></label>
            <div class="control">
              <input class="input" id="path" type="text" placeholder="e.g window.location.pathname" value="window.location.pathname">
            </div>
          </div>
          <div class="field">
            <label class="label">语言 | Language:  <code>lang</code></label>
            <div class="control">
              <input class="input" id="lang" type="text" placeholder="e.g en-US" value="en-US">
            </div>
          </div>
          <div class="field">
            <label class="label">访问量:</label>
            <div class="control">
              <span id="twikoo_visitors">N/A</span>
            </div>
          </div>
          <div class="control">
            <button class="button is-info" onclick="init()">加载 | Init</button>
          </div>
          <div class="field">
            <a href="https://twikoo.js.org/quick-start.html#%E5%89%8D%E7%AB%AF%E9%83%A8%E7%BD%B2" target="_blank">如何集成到博客中？</a>
          </div>
        </div>
        <div class="column">
          <div class="card">
            <div class="card-content">
              <div class="twikoo" id="tcomment"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="container">
      <div class="content has-text-centered">
        <p>
          <strong>Twikoo</strong> by <a href="https://www.imaegoo.com">imaegoo</a>. The source code is licensed
          <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
          is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
        </p>
      </div>
    </div>
  </footer>
</body>

</html>