JavaScript实现双评论系统

前几天在bill的小站上发现了一个叫做commento的评论系统，我就在网站的留言板上用了用，相较于gitalk来说，不用登录就能评论，免去了通过在半墙状态的GitHub登录的麻烦。之后呢，就一直在琢磨怎样在网站上实行gitalk与commento双评论系统。于是各种百度加必应JavaScript和div的乱七八糟的操作，最终在我坚持不懈的debug中，成功实现了双评论系统。

实现双评论系统有好几种思路，例如更改id,添加新的div,但是我都没有采用。我采用的是通过javascript实现div的隐藏。

核心代码如下

function gitalk(){
  var gitalk = document.getElementById('gitalk-container');  //选取
  var commento = document.getElementById('commento');
  commento.style.display = 'none';  //隐藏
  gitalk.style.display = 'block';  //显示
  }

function commento(){
  var gitalk = document.getElementById('gitalk-container');
  var commento = document.getElementById('commento');
  gitalk.style.display = 'none';
  commento.style.display = 'block';
  }

来，运行一下，看看效果

出问题了！这两个按钮只能点一次，第二次就失效，直到我看到了

gitalk.render('gitalk-container')

原来如此，在gitalk后面也有javascript，里面有gitalk.render('gitalk-container')，那我们再修改修改

JavaScript

function gitalk(){
  var gitalk = document.getElementById('gitalk-container');
  var commento = document.getElementById('commento');
  commento.style.display = 'none';  //隐藏
  gitalk.style.display = 'block';  //显示
  var gitalk = new Gitalk({
        clientID: '', //clientID 
        clientSecret: '', //clientSecret
        repo: 'gitalk-comments', // 评论仓库名
        owner: '1stbugcoder',
        admin: ['1stbugcoder'], //管理人
        id: '',
        language:'zh-CN', //语言
        distractionFreeMode: false  // 无干扰模式
    })
  gitalk.render('gitalk-container')
  }

function commento(){
  var gitalk = document.getElementById('gitalk-container');
  var commento = document.getElementById('commento');
  gitalk.style.display = 'none';
  commento.style.display = 'block';
  }

HTML

<p>点击选择评论系统
<a onclick="gitalk();"><strong>gitalk</strong></a>
<a onclick="commento();"><strong>commento</strong></a>
</p>
<script defer src="https://commento.net/js/commento.js"></script>
<div id="commento"></div>
<div id="gitalk-container"></div>

再试试，效果不错

本博客所有文章与留言板均采用此方法实现双评论系统*╭︎( ˙º˙)╯︎*（已取消双评论系统）

Posted 2023-01-12 14:28 写bug的代码人

本文标签：

本文总阅读量?次

文章作者 写bug的代码人

文章链接 https://bugcoder.asia/article/004.html

声明本博客中的所有文章均使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权，所有代码均使用MIT开源协议

写bug的代码人的博客

JavaScript实现双评论系统