技术2023 年 3 月 15 日
如何部署gitalk作为评论系统
给自己的博客添加第三方的评论系统
Gitalk:
本来搭建好了博客,但是总觉的少了一些功能,没错,博客怎么能少了评论功能!(虽然可能没什么人评论)
但本着我可以不用但不能没有的精神,刚好也有大大推荐了gitalk,就研究了下,发现集成第三方评论系统gitalk集成非常简单,只需要申请github账号的Secret然后前端里加下面一段代码就好了
<script>
import 'gitalk/dist/gitalk.css';
import Gitalk from 'gitalk';
const gitalk = new Gitalk({
clientID: myclientID,
clientSecret: mySecret,
repo: 'myrepo',
owner: 'myusername',
admin: ['myusername'],
id: window.location.pathname,
distractionFreeMode: false
});
gitalk.render('gitalk-container');
</script>
<div id="gitalk-container"></div>
就搞定了!但是又有一个问题,就是ClientID和Secret是明文的,放到github上太危险了,那有什么好方法呢,查了下,vercel是支持环境变量的,astro也支持,那就好办了。
查了一番官方文档,然后进行了以下操作,成功把vercel关联到项目,然后生成了.env文件。
npm i -g vercel
vercel --version
vercel login
vercel link --yes
vercel env ls
vercel env pull
接下来就简单了,只需要在Vercel的项目
Setting
中把Environment Variables添加下myclientID
和mySecret
,然后在代码里替换成import.meta.env.CLIENT_ID
和import.meta.env.CLIENT_Secret
就搞定!现在再push到github仓库里,就没有安全隐患了~ <script>
import 'gitalk/dist/gitalk.css';
import Gitalk from 'gitalk';
const gitalk = new Gitalk({
clientID: import.meta.env.CLIENT_ID,
clientSecret: import.meta.env.CLIENT_Secret,
repo: 'myrepo',
owner: 'myusername',
admin: ['myusername'],
id: window.location.pathname,
distractionFreeMode: false
});
gitalk.render('gitalk-container');
</script>
<div id="gitalk-container"></div>
Twikoo
astro也支持twikoo的评论系统,后端参考官网Twikoo文档,前端只需要
npm i twikoo
然后配置<script>
import twikoo from "twikoo";
twikoo({
envId: "https://your vercel site", // your environment ID or url
el: "#tcomment", // the container ID which will show the comment
//lang: "en-GB", // language for the comment template. for the full list, refer to https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
}).then(() => {
console.log("comment loading success");
});
</script>
<div id="tcomment"></div>
就可以了,当然别忘了再env.d.ts里吧
declare module "twikoo";
加上,声明下twikoo就不会报声明类型错误了。Analytics
velcel还支持查看流量访问,只需要
npm i -g vercel
安装完velcel后在官网项目里启动Analytics
里的Audiences
,然后创建完目录后在页面里引入下面的代码就搞定了~<script defer src="/_vercel/insights/script.js"></script>
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
作者: ike 发表日期:2023 年 3 月 15 日