第三方主题几乎很少见到有集成多评论系统任用户切换的,可能是觉得鸡肋吧,但对于做大的网站就很需要了,可以满足不同人群的,随意切换的评论系统
先来个gif动图,让你们直观体验体验

比如你现在用Valine评论系统,先复制一份重命名为 valine2.ejs ,打开原文件替换所有内容为以下代码即可
其中的 <%- partial('../plugins/xxxx') %>
为你的其它评论系统路径,或者你将主要代码替换也行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| <style> .comments-mode { display:none } .comments-type.active { background-color:#ff0 } .show { display:block } </style>
<p style="float:right;border: 1px solid #ccc!important;border-radius: 20px!important;"> 点击切换到:<a class="comments-type active">Valine</a> | <a class="comments-type">Gitee</a> | <a class="comments-type">Gitalk</a> 评论系统 </p>
<div class="comments-mode show"> <%- partial('../plugins/valine') %> </div>
<div class="comments-mode"> <%- partial('../plugins/gitee') %> </div>
<div class="comments-mode"> <%- partial('../plugins/gitalk') %> </div>
<script> var comments_type = document.getElementsByClassName("comments-type"); var comments_mode = document.getElementsByClassName("comments-mode"); for(var i=0;i<comments_type.length;i++){ comments_type[i].index = i; comments_type[i].onclick = function(){ for(var j=0;j<comments_type.length;j++){ comments_type[j].className = comments_type[j].className.replace(' active', '').trim(); comments_mode[j].className = comments_mode[j].className.replace(' show', '').trim(); } this.className = this.className + ' active'; comments_mode[this.index].className = comments_mode[this.index].className + ' show'; }; } </script>
|
此代码是实现3合一评论的,如需要集成更多,可以照葫芦画瓢