- 综合排序
- 最热优先
- 最新优先
- <script> const gitalk = new Gitalk({来自专栏快乐阿超
gitalk
——莎士比亚 https://github.com/gitalk/gitalk https://gitalk.github.io/ 用 Gitalk 给博客添加评论系统：优雅、开源、无后端依赖 在搭建个人博客时 于是我选择了一个更极客、更自由的方式：Gitalk —— 一个基于 GitHub Issues 的评论系统。 什么是 Gitalk？ Gitalk 是一个利用 GitHub Issues 构建的评论系统，由 gitalk 开发者团队 创建。 引入 Gitalk 脚本和样式 在页面 HTML 中加入： <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<em>gitalk</em>/dist/<em>gitalk</em>.css 初始化 <em>Gitalk</em> 在你的页面中加入如下代码： <div id="gitalk-container">
21200编辑于 2025-03-28
【Gitalk】网站中加入Gitalk评论系统
-- 引入gittalk评论插件 start --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<em>gitalk</em>@1/dist /<em>gitalk</em>.css"> <script src="https://cdn.jsdelivr.net/npm/<em>gitalk</em>@1/dist/<em>gitalk</em>.min.js"></script> -- 引入gittalk评论插件 end --> 4.2 添加容器 <-- 添加一个容器-->
4.3 添加js代码来生成 gitalk 插件： //生成 gitalk 插件 var gitalk = new Gitalk({ clientID: 'f53240a793ca5b295f', //Client ID ('gitalk-container'); 参数配置： clientID String 必须.Docusaurus配置Gitalk评论插件
无意间发现有一个插件Gitalk，基于 Github Issue 的，而我平常又经常刷 github，加上需要 github 账号才能评论，所以就使用Gitalk 来作为博客的评论（注：Gitalk 是基于 > <script src="https://cdn.jsdelivr.net/npm/<em>gitalk</em>@1/dist/<em>gitalk</em>.min.js"></script> <! ://unpkg.com/gitalk/dist/gitalk.min.js"></script> npm 安装 npm i --save gitalk import 'gitalk/dist/gitalk.css ' import Gitalk from 'gitalk' 6、使用
用下面的 Javascript 代码来生成 gitalk 插件 ('gitalk-container') react 中使用 导入 Gitalk 组件与样式 import 'gitalk/dist/gitalk.css' import GitalkComponentgitalk 自动初始化
前面有篇文章介绍了使用hexo的评论系统gitalk,但是使用过程中有一些小问题,每一篇文章都需要初始化一下issues,不然是无法评论的,如果文章太多,一个一个初始化就太浪费时间和精力,所以借鉴了网上的一些资料完成一个自动化初始评论的需求 首先在根目录下新建一个gitalk.init.js文件 需要一些node的依赖包,可以自己安装 npm install cheerio --save npm install request --save /public/sitemap.xml"), kind: "Gitalk", // "Gitalk" or "Gitment" }; let issuesUrl = `https://api.github.com /gitalk.init.js 注意事项: 因为涉及到了token在push后会警告,所以将仓库设置为了私有,token如果不可用就在生成一个token在个人设置里的开发设置里 所以在每次添加新文章时都要运行脚本 /gitalk.init.js 如图: ? 时间,脚本根据自己的意愿进行设置,可以频繁也可以时间跨度大些,我们只需要写文档,然后push到github,也算是实现了自动化吧
Gitalk Network Error问题处理
gitalk network error 个人博客问题兼容近日突然发现个人博客的gitalk评论必现授权失败，于是查看了下原因，分析并记录问题解决办法gitalk Network问题打开个人博客页面，发现 gitalk出现网络异常，F12看控制台，发现https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token 因此要解决这个问题，可以自行搭建一个代理gitalk 添加代理 const gitalk = new Gitalk({ proxy: 'https://proxy' })上述proxy 是gitalk暴露出来的代理，通过这个代理可以访问github accesstoken，从而绕过gitalk自由代理。 并且gitalk的初始化不需要client_secret了，密钥可以放到代理服务器上，更安全了。
为hexo增加gitalk评论系统
所有操作再hexo next主题的基础上完成 准备工作: 新建一个github仓库,使用issues作为评论容器 注册gitalk,获取id,secret 给页面增加gitalk元素及引入gitalk 为了加速css及js文件的加速并且防止cdn链接出现问题而导致评论无法使用的情况,将cdn的css,js文件下载到本地使用 # Gitalk # gitalk_js: //cdn.jsdelivr.net /npm/gitalk@1/dist/gitalk.min.js # gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css 修改布局文件中的gitalk,修改资源的加载路径 ? 最后一步,修改配置文件 ?
为博客添加 Gitalk 评论插件
正文 Gitalk 评论插件 gitalk 使用 Github 帐号登录，界面干净整洁，最喜欢的一点是支持 MarkDown语法。 可以看到在 gitalk 的评论框进行评论时，其实就是在对应的 issue 上提问题。 集成 Gitalk 到这里，你应该对 Gitalk 有个大致的了解了，现在，开始集成 gitalk 插件吧。 -- Gitalk 评论 start --> {% if site.gitalk.enable %} <! src="https://unpkg.com/<em>gitalk</em>@latest/dist/<em>gitalk</em>.min.js"></script>
<script type="text/javascript"> var gitalk = new Gitalk({ // gitalk的主要参数 clientID: `在hexo-next配置gitalk
如何在hexo-next配置gitalk评论 你是否也想在你的博客里面添加这样的评论区？ # Available values: changyan | disqus | disqusjs | gitalk | livere | valine active: gitalk # Setting nav: gitalk: order: -1 #disqus: # text: Load Disqus # order: -1 #gitalk: # order: -2 下面的也是配置，记得把用户名改一下 # Gitalk # For more information: https://gitalk.github.io, https://github.com /gitalk/gitalk gitalk: enable: true github_id: xingwangzhe repo: xingwangzhe.github.io client_id
hexo博客中添加gitalk评论插件
%>"> <link rel="stylesheet" href="/css/my-<em>gitalk</em>.css">
Hexo使用Gitalk设置评论区
Hexo 有很多留言板的第三方插件（多说、disqus、Gitment、Gitalk 等等），但是这里主要讲解怎么使用 Gitalk， 因为它比较好看。 -- gitalk.swig --> <link href="https://cdn.bootcss.com/<em>gitalk</em>/1.4.0/<em>gitalk</em>.min.css" rel="stylesheet" repo: '{{ theme.gitalk.repo }}', owner: '{{ theme.gitalk.owner }}', admin: ['{{ theme.gitalk.adminUser }}, distractionFreeMode: {{ theme.gitalk.distractionFreeMode }} }) gitalk.render('gitalk-container ') </script> 把 gitalk.swig 引用进来。
gitalk（评论系统）样式修改（颜色修改）
active:before { background: #10D07A; } </style> # 未登录效果 # 登录后效果 改 css 文件方法 把 gitalk
为博客添加 Gitalk 评论插件结语
正文 Gitalk 评论插件 首先来看看 Gitalk 的界面和功能： Gitalk gitalk 使用 Github 帐号登录，界面干净整洁，最喜欢的一点是支持 MarkDown语法。 gitalk评论框 Github issue 集成 Gitalk 到这里，你应该对 Gitalk 有个大致的了解了，现在，开始集成 gitalk 插件吧。 将这段代码插入到你的网站： <! -- Gitalk 评论 start --> {% if site.gitalk.enable %} <! -- Link Gitalk 的支持文件 --> <link rel="stylesheet" href="https://unpkg.com/<em>gitalk</em>/dist/<em>gitalk</em>.css"> <script src="https://unpkg.com/<em>gitalk</em>@latest/dist/<em>gitalk</em>.min.js"></script>
jekyll-theme-H2O 配置 gitalk
1 配置 _config.yml 在 comments 那添加 gitalk: true gitalk_clientID: 'Client ID' gitalk_Secret: 'Client Secret' gitalk_repo: '用户名.github.io' gitalk_owner: '用户名' gitalk_admin: '用户名' distractionFreeMode @1/dist/gitalk.css"> <script src="https://cdn.jsdelivr.net/npm/<em>gitalk</em>@1/dist/<em>gitalk</em>.min.js"></script> 2.1 在 {% include footer.html %} 里添加 <script src="https://cdn.jsdelivr.net/npm/<em>gitalk</em>@1/dist/<em>gitalk</em>.min.js 2.2 在 {% if site.comments.disqus %}后添加 {% if site.comments.<em>gitalk</em> %} <script> var <em>gitalk</em>
jekyll-theme-H2O的gitalk相关配置
jekyll-theme-H2O的gitalk配置 gitalk 01.注册GitHub Application 注册GitHub Application Application name:项目名称 : true gitalk_clientID: 'clientID' gitalk_Secret: 'Secret' gitalk_repo: '用户名.github.io' gitalk_owner: 'github用户名' gitalk_admin: 'github用户名' distractionFreeMode: true 03.修改post.html post.html var gitalk = new Gitalk({ clientID: '{{ site.comments.gitalk_clientID }}', clientSecret: '{{ site.comments.gitalk_Secret }}', repo: '{{ site.comments.gitalk_repo }}', owner: '{{ site.comments.gitalk_owner }}',
Gitalk-基于Github项目issue的评论系统在博客系统中实践
/gitalk 帮助文档：https://github.com/gitalk/gitalk/blob/master/readme-cn.md 温馨提示: 当前 Gitalk 最新版本为 1.7.2 (Mar 3, 2021), 如后续随着时间推移，可能会有些许变化，建议参考官网（https://github.com/gitalk/gitalk/tags） 2.安装部署 描述：安装引用Gitalk评论系统的两种方式 # 模块安装 npm i --save gitalk # 项目导入 import 'gitalk/dist/gitalk.css' import Gitalk from 'gitalk' 配置实践 首先 > </head> <body>
<script> const gitalk = new Gitalk -- themes\mellow\source\js\custom\gitalk.init.js --> var gitalk = new Gitalk({ clientID: '<%- theme.gitalk.oauth.client_id如何在 VitePress 站点中集成 Gitalk 评论插件及其关键注意事项
本文将介绍如何在 Vitepress 站点中集成 Gitalk 插件，Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。 在 Vitepress 项目中集成 Gitalk在配置 Gitalk 之前，确保你已经创建了一个 vitepress 项目。 index.ts│ │ └── MyLayout.vue│ └── gitalk.ts1、在 .vitepress 目录下创建 gitalk.ts 文件，添加以下内容：import Gitalk from 'gitalk';import 'gitalk/dist/gitalk.css';export default function createGitalk(path: string) { 查阅 Gitalk 的说明文档后，我了解了具体原因。首先，createIssueManually 是创建 Gitalk 实例时的一个可选属性。
个人博客支持留言评论，来看看 Hexo Diversity 主题如何实现的！
容器准备 ：调用 Diversity.utils.loadComments('.gitalk-container') 初始化 Gitalk 评论容器（.gitalk-container 元素）。 脚本加载 ：动态加载 Gitalk 脚本（gitalk.js），通过 Diversity.utils.getScript() 注入，并检查全局变量 window.Gitalk 是否已存在（避免重复加载） 创建 Gitalk 实例并渲染到容器：const gitalk = new Gitalk(confgObj);gitalk.render(document.querySelector('.gitalk-container Gitalk 布局<%- css('https://unpkg.com/gitalk/dist/gitalk.css') %><style>.gt-container .gt-comment-body /gitalk.min.js'}) %><%- js('js/third-party/comments/gitalk') %>这里加载三部分内容：Gitalk 的 CSS 样式文件和自定义样式部分Gitalk
搭建独立博客，这款评论插件不能错过
微信公众号因为申请的时间晚，一直到现在都无法开通评论功能，之前博客一直使用的多说作为评论系统，自从多说关闭后，好多年都处于无评论状态，最近发现 gitalk 还不错，所以在博客中进行了对 gitalk （图4） 安装 gitalk 在现有的hexo项目中安装 gitalk，执行命令 cnpm i --save gitalk 如下图： ? （图6） gitalk: enable: true ## 设置true为开启gitalk owner: oec2003 ## github的登录名 repo: hexo-comments v=' + theme.version) script(type='text/javascript' src='//unpkg.com/gitalk/dist/gitalk.min.js? var gitalk = new Gitalk({ clientID: '#{theme.gitalk.client_id}', clientSecret: '#{theme.gitalk.client_secret
Github 博客评论插件：Gitalk/gitment 集成
://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css" script src="https://cdn.jsdelivr.net/npm/gitalk@1 /dist/gitalk.min.js" 或者 link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css" script src="https://unpkg.com/gitalk/dist/gitalk.min.js" npm安装就不说了，作者项目有写。 然后就是使用方式： 添加一个容器： div id="gitalk-container"> 在需要显示评论的页面添加以下js：（注意代码注释） var gitalk = new Gitalk({ ('gitalk-container'); //渲染html
记录一次 Bug 排查过程并分享一些经验
接着下面的评论第一个就更滑稽了： 这个人直接艾特了 gitalk，哈哈哈，因为 Gitalk 就如刚才所说的那样，也用了这个。 那就顺便去 Gitalk https://github.com/gitalk/gitalk，逛一下 issue，看看是不是也有人遇到了同样的问题，果不其然了： 最近几个 issue 都是关于 403 的 看文档，Gitalk 调用方式如下： const gitalk = new Gitalk({ clientID: 'GitHub Application Client ID', clientSecret ('gitalk-container') 看来这个在声明的时候是有参数的，那刚才 URL 配置没看到在哪里配啊，既然如此，那就看看 Gitalk 这个对象支持多少参数吧。 既然要用 Gitalk，那一定有刚才初始化的调用，那就搜 Gitalk 这个关键字就行了。另外还需要缩小一下搜索范围。 于是我就把范围限定到了 next 主题目录，搜索 Gitalk。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号