如何给你的博客集成Gittalk or Gitment 第三方评论插件

发表于 |

Gittalk or Gitment都是基于的GitHub Issues作为评论系统 它们的配置方式基本差不多

开始配置

第一步 ：

首先需要到GitHub上去新建一个仓库用于存放评论的内容：

第二步:

在设置中打开isue功能, 默认是开启状态:

第三步:

需要注册一个Github Application:

注意两个URL就是你网站的域名。应用名称和描述和之前仓库的保持一致就行, 方便以后归类查找。

注册成功后接下来到了以下页面:

其中Client ID 和 Client Secret是我们需要的东西

第四步

gitalk评论插件配置

只需要将如下代码引入你想添加评论的 html 或者 jsp 页面中就可以使用了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<-- 引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
  <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>

<-- 添加一个容器-->
<div id="gitalk-container"></div>

<-- 生成 gitalk 插件-->
var gitalk = new Gitalk({
  clientID: '56f73fbc5e79a466ea62', //Client ID

  clientSecret: '26d8eb4f3b0de9ce02382103ffc32ba34c4671f4', //Client Secret

  repo: 'newban_comment',//仓库名称
  owner: 'songjianzaina',//仓库拥有者
  admin: ['songjianzaina'],
  id: location.href,      // Ensure uniqueness and length less than 50
  distractionFreeMode: false  // Facebook-like distraction free mode
})

gitalk.render('gitalk-container')

如果你的博客使用的也是Next主题可以直接配置gitment评论插件

找到自己主题文件下的配置文件_config.yml中配置gitment即可

1
2
3
4
5
6
7
8
9
10
11
12
13
gitment:
  enable: true
  mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
  count: true # Show comments count in post meta area
  lazy: false # Comments lazy loading with a button
  cleanly: false # Hide 'Powered by ...' on footer, and more
  language: # Force language, or auto switch by theme
  github_user: 自己账号的用户名 
  github_repo: 刚刚创建仓库的名 
  client_id: xxx 刚刚得到的值
  client_secret:  xxx 刚刚得到的值
  proxy_gateway: 
  redirect_protocol:

其他评论系统

image-20220708110541293

还有在线聊天系统

image-20220708110639326

详细介绍参见《Butterfly 安装文档(四) 主题配置》

本文为作者原创 转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%