twikoo-component
Version:
A simple comment system.
117 lines (113 loc) • 4.83 kB
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" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.min.css" integrity="sha384-ot6RguV46OXVI/scORL3MF0W76aCi4XLFeX3mRArMs/+rNzCpVaOFDtfitKy47nn" crossorigin="anonymous">
<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/twikoojs/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="zh-CN">
</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/frontend.html" 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>