LOGO

写bug的代码人的博客

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.gq/article/004.html

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