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评论插件使用教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/115168.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫(十七)_糗事百科案例

糗事百科实例 爬取糗事百科段子&#xff0c;假设页面的URL是: http://www.qiushibaike.com/8hr/page/1 要求&#xff1a; 使用requests获取页面信息&#xff0c;用XPath/re做数据提取获取每个帖子里的用户头像连接、用户姓名、段子内容、点赞次数和评论次数保存到json文件内…

什么是HTTPS协议?与HTTP协议区别?

一、协议科普 HTTP协议&#xff08;超文本传输协议&#xff09;是一种用于在计算机网络上传输超文本的应用层协议。它是一种客户端-服务器协议&#xff0c;允许客户端通过Web浏览器等方式向服务器发送请求&#xff0c;服务器则返回响应。HTTP协议是构建万维网&#xff08;WWW&…

详解排序算法(附带Java/Python/Js源码)

冒泡算法 依次比较两个相邻的子元素&#xff0c;如果他们的顺序错误就把他们交换过来&#xff0c;重复地进行此过程直到没有相邻元素需要交换&#xff0c;即完成整个冒泡&#xff0c;时间复杂度。 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换它们两个&#xff1b;…

Leetcode107. 二叉树的层序遍历 II

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#xff0c;逐层从左向右遍历&#xff09; 输入&#xff1a;root [3,9…

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动

由于本着只学习微信小程序的目的&#xff0c;上面的几篇博文都是跟着黑马程序的课程走的&#xff01;后面的就讲解uni-app的实验呢&#xff01;一个人的精力是有限的&#xff0c;于是换了们课程继续深造微信小程序&#xff01;&#xff01;&#xff01; 以下是在 .wxml中的一些…

音频母带制作::AAMS V4.0 Crack

自动音频母带制作简介。 使用 AAMS V4 让您的音乐听起来很美妙&#xff01; 作为从事音乐工作的音乐家&#xff0c;您在向公众发布材料时需要尽可能最好的声音&#xff0c;而为所有音频扬声器系统提供良好的商业声音是一项困难且耗时的任务。AI掌握的力量&#xff01; 掌控您…

2023.8.26-2023.9.3 周报【3D+GAN+Diffusion基础知识+训练测试】

目录 学习目标 学习内容 学习时间 学习产出 学习目标 1. 3D方向的基础知识 2. 图像生成的基础知识&#xff08;GAN \ Diffusion&#xff09; 3. 训练测试GAN和Diffusion 学习内容 1. 斯坦福cv课程-3D &#xff08;网课含PPT&#xff09; 2. sjtu生成模型课件 3. ge…

【卷积神经网络】经典网络之 LeNet-5, AlexNet 与 VGG-16

随着计算机硬件的升级与性能的提高&#xff0c;运算量已不再是阻碍深度学习发展的难题。卷积神经网络&#xff08;Convolution Neural Network&#xff0c;CNN&#xff09;是深度学习中一项代表性的工作&#xff0c;其雏形是 1998 年 LeCun 提出的 LeNet-5 模型。如今&#xff…

【Axure高保真原型】多图表动态切换

今天和大家分享多图表动态切换的原型模板&#xff0c;点击不同的图标可以动态切换对应的表&#xff0c;包括柱状图、条形图、饼图、环形图、折线图、曲线图、面积图、阶梯图、雷达图&#xff1b;而且图表数据可以在左侧表格中动态维护&#xff0c;包括增加修改和删除&#xff0…

百万级并发IM即时消息系统(2)

1.用户model type UserBasic struct {gorm.ModelName stringPassWord stringPhone string valid:"matches(^1[3-9]{1}\\d{9}$)"Email string valid:"email"Avatar string //头像Identity stringClientIp s…

docker高级(DockerFile解析)

1、构建三步骤 编写Dockerfile文件 docker build命令构建镜像 docker run依镜像运行容器实例 2、DockerFile构建过程解析 Dockerfile内容基础知识 1&#xff1a;每条保留字指令都必须为大写字母且后面要跟随至少一个参数 2&#xff1a;指令按照从上到下&#xff0c;顺序执行…

JavaScript Web APIs -03 事件流、事件委托、其他事件(加载、滚动、尺寸)

Web APIs - 03 文章目录 Web APIs - 03事件流捕获和冒泡阻止冒泡 事件委托其他事件页面加载事件元素滚动事件页面尺寸事件 元素尺寸与位置 进一步学习 事件进阶&#xff0c;实现更多交互的网页特效&#xff0c;结合事件流的特征优化事件执行的效率 掌握阻止事件冒泡的方法理解事…

爬虫逆向实战(二十八)--某税网第一步登录

一、数据接口分析 主页地址&#xff1a;某税网 1、抓包 通过抓包可以发现登录接口是factorAccountLogin 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看载荷模块可以发现有一个datagram 和 一个signature加密参数 请求头是否加密&#xff1f; 通过查看“标…

如何从ChatGPT中获得最佳聊天对话效果

从了解ChatGPT工作原理开始&#xff0c;然后从互动中学习&#xff0c;这是一位AI研究员的建议。 人们利用ChatGPT来撰写文章、论文、生成文案和计算机代码&#xff0c;或者仅仅作为学习或研究工具。然而&#xff0c;大多数人不了解它的工作原理或它能做什么&#xff0c;所以他…

excel怎么设置任意选一个单元格纵横竖横都有颜色

有时excel表格内容过多的时候&#xff0c;我们通过excel设置任意选一个单元格纵横&#xff0c;竖横背景颜色&#xff0c;这样会更加具有辨识度。设置方式截图如下 设置成功后&#xff0c;预览的效果图

如何修复 Cloudflare 错误 1015“您受到速率限制”

目录 错误 1015 您受到费率限制 如何修复错误 1015 您的速率受到限制 Cloudflare 降低用户活动速度 禁用网站的速率限制 擦除当前的速率限制设置 增加网站可以处理的请求数量 修改时间限制 增加带宽支持 网站优化 社区支持 为网站访问者提供无错误的体验 应该如何学…

无涯教程-Android - Spinner函数

Spinner允许您从下拉菜单中选择一个项目 例如。使用Gmail应用程序时,将显示如下所示的下拉菜单,您需要从下拉菜单中选择一个项目。 Spinner Example 示例 本示例演示计算机的类别,您需要从类别中选择一个类别。 以下是修改后的主要Activity文件src/com.example.spinner/Andr…

域内密码喷洒

在Kerberos阶段认证的AS-REQ阶段&#xff0c;请求包cname对应的值是用户名&#xff0c;当用户名存在时候&#xff0c;密码正确和错误两种情况下&#xff0c;AS-REP返回包不一样&#xff0c;所以可以利用这一点对域用户名进行密码喷洒攻击 域内密码喷洒工具 Kerbrute kerbrut…

顺序表链表OJ题(2)->【数据结构】

W...Y的主页 &#x1f60a; 代码仓库分享 &#x1f495; 前言&#xff1a; 单链表的结构常常不完美&#xff0c;没有双向链表那么”优秀“&#xff0c;所以繁衍出很多OJ练习题。今天我们继续来look look数据结构习题。 下面就是OJ时间&#xff01;&#xff01;&#xff01; …