简介
本文将手摸手地教会你如何使用 gitalk 在自己的静态页面中加入评论功能,无需服务器,无需管理后台,仅仅通过 github 的 issues 就能实现评论留言、点赞回复、markdown评论等功能
保姆级教程,有手就行,没手也行
准备工作
安装
首先用你喜欢的方式安装 gitalk
yarn add gitalk
<!-- or -->
npm i --save gitalk
<!-- or -->
<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>
此仓库将用来存储issues,也就是你静态网站的评论数据
仓库名称随意,仓库权限选择Public
创建完毕后到仓库里为其打开issues功能
设置issues模板并提交
Application name 随意
Homepage URL 填写你的网站域名
Application description 随意
Authorization callback URL是Github用来oauth登录后的回调地址
本例中我在文章详情页面使用了评论功能 其路由为 oldtucson.github.io/#/articleDe… (文章的id)
如果我想登录后跳回文章详情,那么我就要将此项设置为 oldtucson.github.io/#/articleDe… 注意是精准域名
如果设置为 oldtucson.github.io 那么登录后将跳回首页
点击Register application创建应用后在跳转的页面可以看到你的Client ID,点击 Generate a client secret 来创建一个 Client secrets,你也可以在这里添加一个你喜欢的logo图片
至此我们的准备工作已经完成,接下来就是在代码中集成Gitalk
集成Gitalk
如果你是通过npm或yarn来安装的Gitalk,除了要引入组件还要引入其样式
可能会出现样式在本地环境正常,生产环境失效的问题
修改引用路径即可
import '../node_modules/gitalk/dist/gitalk.css'
如果你使用的是typescript可能会报"找不到模块xxx"等错误 在项目中的 typings.d.ts 文件中声明一下即可
//typings.d.ts
declare module 'gitalk/dist/gitalk-component'
另一种写法
至此我们已经大功告成,如果你按照我的步骤这样一步步走下来,页面将展示如下效果
登录前
登录并评论后
支持国际化 Gitalk官方文档 中给出了language的配置项,如果未填则根据用户当前位置进行自适应
当你评论后到github仓库中会发现多了几条issues正是你评论的内容
写在最后
好了,这就是本文的全部内容
希望对你有所帮助
如果你觉得还不错可以给我点赞和关注
你的支持其实对我并没啥用(误)
随缘更新,peace yo.
