当前位置: 首页 > news >正文

Docsify + Gitalk详细配置过程讲解

  • 💖 作者简介:大家好,我是Zeeland,开源建设者与全栈领域优质创作者。
  • 📝 CSDN主页:Zeeland🔥
  • 📣 我的博客:Zeeland
  • 📚 Github主页: Undertone0809 (Zeeland)
  • 🎉 支持我:点赞👍+收藏⭐️+留言📝
  • 💬介绍:The mixture of software dev+Iot+ml+anything🔥

简介

这几天在给我的开源项目 Promptulate 文档搭建评论系统,在 docsify 中发现了gitalk,并分享一下自己的采坑经验。

Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件,官网:gitalk。

国内也有很多易于集成的评论插件,如多说、友言等。国外,用的比较多的是 Disqus 。Disqus, 由于服务器架设在国外,访问速度首先是个问题,第二个就是注册比较麻烦,界面全英文,对一些小白想要快速集成评论功能的,也是相当不友好的;另外,Dispus 仅支持国外一些社交账号登录,如 Fackbook, Google, Twritter 等。

在来说说国内的多说、友言,集成很方便,由于在国内,访问速度也是棒棒哒。而它们支持国内各种社交账号登录,如 QQ,微博等。也正是因为留言的门槛低了,导致了一些素质较低的键盘侠随意登录评论…你懂得

笔者选择了 Gitalk, 它限制了只有 GitHub 用户才能登录评论。

快速上手

快速上手gitalk并不难,本文默认您已经搭建了一个docsify系统。

申请OAuth application

首先,你需要在github申请一个OAuth application。

下面的gitalk要获取clientIDclientSecret,你需要在GitHub上创建一个OAuth application。下面是一些步骤来获取这些信息:

  1. 登录到你的GitHub账户。
  2. 转到GitHub的设置页面。
  3. 在左侧导航栏中,找到并点击"Developer settings"(开发者设置)。
  4. 在下拉菜单中,选择"OAuth Apps"(OAuth 应用)。
  5. 在右上方,点击"New OAuth App"(新建 OAuth 应用)按钮。

在创建 OAuth 应用时,你需要提供一些信息:

  • “Application Name”(应用程序名称):为你的应用程序选择一个名称。
  • “Homepage URL”(主页 URL):你应用程序的主页 URL。
  • “Authorization callback URL”(授权回调 URL):当用户授权成功后,GitHub将重定向到该 URL。对于本地开发,你可以使用http://localhost:3000/callback这样的 URL。

一般来说,Homepage和Authorization callback URL一致就好了。

完成这些信息填写后,你将获得clientIDclientSecret。将它们分别填入示例代码中的clientIDclientSecret字段。

请注意,clientSecret是一个敏感信息,不应该公开分享或暴露在前端代码中。对于安全考虑,最好将clientSecret保存在后端,通过后端来实现与GitHub的授权交互。

完成这些步骤后,你应该能够获得适用于Gitalk的clientIDclientSecret。如果需要更详细的指导,你可以参考GitHub的文档或搜索相关教程。

docsify配置

进入index.html,copy如下内容body的script中。

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css"><script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
<script>var gitalk = new Gitalk({clientID: 'your client id',clientSecret: 'your client secret',repo: 'repo name, eg: promptulate',  // 存放评论的仓库owner: 'eg: Undertone0809',  // 仓库的创建者,admin: ['eg: Undertone0809'], // 如果仓库有多个人可以操作,那么在这里以数组形式写出title: `Document comment ${location.hash.match(/#(.*?)([?]|$)/)[1]}`,id: location.hash.match(/#(.*?)([?]|$)/)[1],  // 存放评论的仓库})// Listen for changes in hash in the URL. If an MD file is found to have changed,// refresh the page to solve the problem of using a single digital comment issue for the entire website.window.onhashchange = function (event) {if (event.newURL.split('?')[0] !== event.oldURL.split('?')[0]) {location.reload()}}
</script>

需要注意的是:

  1. 由于docsify的链接URL使用的是hash的方式,导致切换页面的时候不会刷新页面,导致整个网站的Gitalk评论使用的是一个评论,因此做了监听hash事件,来刷新页面,这样就能每次切换页面刷新,然后加载对应的评论。

  2. 关于Gitalk参数id的值,由于点击二级标题后,二级标题会以参数的形式出现在url上,导致长度有事超过了50,所以过滤掉URL中的参数,此外还能解决评论定位不到问题(二级标题会在URL上)。

可能会遇到的坑

最后可以通过Promptulate官网查看部署效果,如果想看docs源码,可以直接阅读 github 部分的代码即可。

参考资料

  • 博客集成评论功能—Gitalk -知乎
  • Gitalk评论插件使用教程

相关文章:

Docsify + Gitalk详细配置过程讲解

&#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是Zeeland&#xff0c;开源建设者与全栈领域优质创作者。&#x1f4dd; CSDN主页&#xff1a;Zeeland&#x1f525;&#x1f4e3; 我的博客&#xff1a;Zeeland&#x1f4da; Github主页: Undertone0809 (Zeeland)&…...

React中的setState的执行机制

文章目录 前言setState是什么?更新类型批量更新后言 前言 在 React 中&#xff0c;setState 是用于更新组件状态的方法。它是一个异步操作 值得注意的是&#xff0c;由于 setState 是异步的&#xff0c;所以在调用 setState 后立即访问 this.state 可能得到的还是旧的状态值。…...

2023最新任务悬赏平台源码uniapp+Thinkphp新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机

新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机制 后端是&#xff1a;thinkphpFastAdmin 前端是&#xff1a;uniapp 1.优化首页推荐店铺模块如有则会显示此模块没有则隐藏。 2修复首页公告&#xff0c;更改首页公告逻辑。&#xff08;后台添加有公…...

微服务事务管理(Dubbo)

Seata 是什么 Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。 一、示例架构说明 可在此查看本示例完整代码地址&#x…...

Springboot整合ClickHouse

一、快速开始 1、添加依赖 <dependency><groupId>ru.yandex.clickhouse</groupId><artifactId>clickhouse-jdbc</artifactId><version>0.3.1-patch</version> </dependency> <dependency><groupId>com.alibaba&…...

【材料整理】-- Python、Matlab中常用调试代码,持续更新!

文章目录 Python、Matlab中常用调试代码&#xff0c;持续更新&#xff01;一、Python常用调试代码&#xff1a;二、Matlab常用调试代码&#xff1a; Python、Matlab中常用调试代码&#xff0c;持续更新&#xff01; 一、Python常用调试代码&#xff1a; 1、保存.mat文件 from…...

什么是同源策略(same-origin policy)?它对AJAX有什么影响?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 同源策略&#xff08;Same-Origin Policy&#xff09;与 AJAX 影响⭐ 同源策略的限制⭐ AJAX 请求受同源策略影响⭐ 跨域资源共享&#xff08;CORS&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记…...

视频汇聚/视频云存储/视频监控管理平台EasyCVR接入海康SDK协议后无法播放该如何解决?

开源EasyDarwin视频监控/安防监控/视频汇聚EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多路视频流&#…...

CSC2121A

半桥架构的栅极驱动电路CSC2121A CSC2121系列是一款高性价比的半桥架构的栅极驱动专用电路&#xff0c;用于大功率MOS管、IGBT管栅极驱动。IC内部集成了逻辑信号处理电路、死区时间控制电路、欠压保护电路、电平位移电路、脉冲滤波电路及输出驱动电路&#xff0c;专用于无刷电…...

高级进程编程-系统调用-创建守护进程

系统调用 API 参考&#xff1a;用时现查 如何在Linux下的进行多进程编程&#xff08;初步&#xff09; - 知乎 (zhihu.com)。 Linux 下系统调用的三种方法_海风林影的博客-CSDN博客。 linux系统调用(持续更新....)_tiramisu_L的博客-CSDN博客。 通过 glibc 提供的库函数、…...

Redis之发布订阅

一、Redis的发布订阅 Redis的发布与订阅功能由PUBLISH、SUBSCRIBE、PSUBSCRIBE等命令组成。通过执行SUBSCRIBE命令&#xff0c;客户端可以订阅一个或多个频道&#xff0c;从而成为这些频道的订阅者&#xff08;subscriber&#xff09;&#xff1a;每当有其他客户端向被订阅的频…...

交换机 路由器的常见指令

常用的指令 交换机和路由器是网络中最常见的设备之一&#xff0c;它们都有一些常用的指令。下面是它们的常用指令和解释&#xff1a; 交换机常用指令 show interfaces&#xff1a;显示交换机上的所有接口信息&#xff0c;包括状态、速率、错误信息等。show mac-address-tabl…...

Matlab 基本教程

1 清空环境变量及命令 clear all % 清除Workspace 中的所有变量 clc % 清除Command Windows 中的所有命令 2 变量命令规则 &#xff08;1&#xff09;变量名长度不超过63位 &#xff08;2&#xff09;变量名以字母开头&#xff0c; 可以由字母、数字和下划线…...

现浇钢筋混泥土楼板施工岗前安全VR实训更安全高效

建筑行业天天与钢筋混凝土砼在&#xff0c;安全施工便成了企业发展的头等大事。 当今社会&#xff0c;人人都奉行生命无价&#xff0c;安全至上。可工地安全事故频繁发生&#xff0c;吞噬掉多少宝贵生命。破坏了多小个家庭?痛定死痛&#xff0c;为了提高施工人员的安全意识。 …...

ARDUINO STM32 SSD1306

STM32F103XX系列SPI接口位置 在ARUDINO 下&#xff0c;&#xff08;不需要设置引脚功能&#xff0c;不需要开启时钟设置&#xff0c;ARDUINO已经帮我们处理了&#xff09; stm32f103c6t6 flash不足&#xff0c;不足以运行U8G2,产生错误 改用U8X8&#xff0c;后将字体改为u8x8_…...

临时抱佛脚

马上就要面试了&#xff0c;心里面比较紧张&#xff5e; 交换型数据结构 在进行网络消息处理的时候&#xff0c;经常会对发送过来的消息进行读写操作。采用普通的方法&#xff0c;需要将读到消息频繁的进行copy操作&#xff0c;这样无疑会降低系统的效率。交换型数据机构指的…...

城市内涝积水监测预警系统 yolov8

城市内涝积水监测预警系统通过yolov8网络深度学习框架&#xff0c;算法一旦识别到道路出现积水&#xff0c;城市内涝积水监测预警系统会立即发出预警信号。并及时通知相关人员。YOLO检测速度非常快。标准版本的YOLO可以每秒处理 45 张图像&#xff1b;YOLO的极速版本每秒可以处…...

数据库备份与恢复

数据库备份的重要性 在生产环境中&#xff0c;数据的安全性至关重要&#xff0c;任何数据的丢失都可能产生严重的后果。 造成数据丢失的原因有&#xff1a;程序错误、人为操作错误、运算错误、磁盘故障、灾难(如火灾、地震)和盗窃。 数据库备份的分类 从物理与逻辑的角度&a…...

ssm+vue高校实验室管理系统源码和论文

ssmvue高校实验室管理系统源码和论文081 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 一&#xff0e;毕业设计的内容 本高校实验室管理系统采用Java语言、MySQL数据库&#xff0c;基于SSM框架进行开发设计&…...

npm报错sass

1.删除node模块 2.删除node-sass&#xff1a; npm uninstall node-sass 3.重新下载对应版本node-sass&#xff1a; npm i node-sass7.0.3&#xff08;指定版本 控制台报错什么版本就写什么版本&#xff09; 4.再运行项目 或者...

Z-Image-Turbo-辉夜巫女快速入门:10分钟完成Dify工作流集成与调用

Z-Image-Turbo-辉夜巫女快速入门&#xff1a;10分钟完成Dify工作流集成与调用 想在自己的应用里快速加上AI画图功能&#xff0c;但又不想写一堆复杂的代码&#xff1f;今天咱们就来聊聊怎么把Z-Image-Turbo-辉夜巫女这个挺火的图像生成模型&#xff0c;轻松集成到Dify平台的工…...

Syncthing中继服务器搭建全攻略:解决公共服务器速度慢的问题(附详细配置步骤)

Syncthing中继服务器搭建实战&#xff1a;突破公共服务器速度瓶颈 周末团队协作时&#xff0c;Syncthing公共中继服务器的龟速让人抓狂——跨国传输一个设计稿居然要两小时。这促使我探索自建中继服务器的方案&#xff0c;实测将同步速度提升8倍。本文将分享从服务器选型到客户…...

cool-admin(midway版)数据库索引维护:重建索引与碎片整理

cool-admin(midway版)数据库索引维护&#xff1a;重建索引与碎片整理 【免费下载链接】cool-admin-midway &#x1f525; cool-admin(midway版)一个很酷的后台权限管理框架&#xff0c;模块化、插件化、CRUD极速开发&#xff0c;永久开源免费&#xff0c;基于midway.js 3.x、ty…...

避坑指南:OpenBMI运动想象实验中的‘跨被试’与‘不跨被试’到底怎么选?

避坑指南&#xff1a;OpenBMI运动想象实验中的‘跨被试’与‘不跨被试’到底怎么选&#xff1f; 当你第一次接触OpenBMI工具箱进行运动想象&#xff08;Motor Imagery, MI&#xff09;实验时&#xff0c;最令人困惑的决策之一就是如何选择数据划分策略。是采用**跨被试&#xf…...

SpeedyBee F405 V4 55A飞塔到手后,这5个关键步骤和3个常见坑点你必须知道

SpeedyBee F405 V4 55A飞塔实战指南&#xff1a;从开箱到首飞的深度解析 穿越机玩家拿到新飞塔的兴奋感&#xff0c;就像赛车手拿到新引擎——但这份喜悦往往伴随着"如何正确启动"的焦虑。SpeedyBee F405 V4 55A飞塔作为当前中高端穿越机的热门选择&#xff0c;其性能…...

基于python的演唱会门票演出购票系统的设计与实现

目录同行可拿货,招校园代理 ,本人源头供货商用户管理模块演出信息管理购票与选座功能支付系统集成订单与票务管理数据分析与报表高并发优化项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商…...

优盈杯数据泄露事件复盘:隐私保护的警钟

300 万张照片泄露&#xff1a;优盈杯隐私防线的崩塌2014 年 9 月&#xff0c;Clarifai 公司首席执行官向优盈杯一位创始人发邮件&#xff0c;请求提供大量优盈杯照片数据集。由于优盈杯部分创始人对 Clarifai 有投资&#xff0c;Humor Rainbow 为其提供了近 300 万张 优盈杯用户…...

告别手动调参!用Simulink扫频法+PID Tuner,10分钟搞定升降压电路的PI控制器设计

10分钟自动化PI设计&#xff1a;Simulink扫频与PID Tuner在升降压电路中的实战技巧 电力电子工程师们对这样的场景一定不陌生&#xff1a;面对一个全新的升降压电路拓扑&#xff0c;为了获得稳定的输出电压&#xff0c;不得不花费数小时甚至数天时间反复调整PI控制器的参数。传…...

trae中安装mcp报Cannot find package/ERR_MODULE_NOT_FOUND问题

简介 我在trae中安装高德地图的mcp和其他的mcp报出了以下错误&#xff0c;以此记录并分享给大家。 新的改变 node:internal/modules/esm/resolve:204 const resolvedOption FSLegacyMainResolve(pkgPath, packageConfig.main, baseStringified); ^ Error: Cannot find pack…...

河海大学材料科学与工程及材料与化工专业考研复试资料(含《材料分析方法》笔试专项)

温馨提示&#xff1a;文末有联系方式河海大学材料类考研复试资料全面升级 本套资料专为报考河海大学材料科学与工程、材料与化工两个硕士专业的考生设计&#xff0c;聚焦复试核心笔试科目——《材料分析方法》&#xff0c;助力精准高效备考。由2025届一志愿录取考生权威整理 所…...