博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手把手教你使用issue作为博客评论系统
阅读量:7180 次
发布时间:2019-06-29

本文共 1168 字,大约阅读时间需要 3 分钟。

自从上周在阮一峰的 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——。我就对此“魂牵梦绕”。个人博客使用的是。

TLDR (不多废话,先看效果)

之前是使用了 Valine 作为博客的评论系统。

下图是改为 utterances 风格。

utterances 介绍及使用

utterances 是基于github issue,拥有多种主题的开源免费小组件。

1.首先我们所需要的 github 存储库必须是公开的,而不是私有的,这样我们的读者才可以查看以及发表评论。

2.我们必须在 github 上进行安装 utterances,首先我们访问 然后点击 Install 按钮进行安装。

3.在这里可以选择可以关联的存储库,可以选择我们所拥有的库(也包括未来建立的库)或者某一个仓库,这里我们只选择某一个需要进行评论的库,这样比较好。

4.安装完成即可,随后我们访问就不再是安装而是是执行配置项目。

5.此时服务端配置已经完成,现在我们可以进行客户端的操作,也就是 blog 端。在blog端我们只需要添加以下这段脚本就可以直接运行。

复制代码

6.因为我的博客是采用 ,所以在 markdown 中是无法使用 script 脚本的。我们就需要编写写一个 vue 组件。(组件的文件路径为 [blog name]/.vuepress/components/)

// Utterances 组件
复制代码

7.最后。在 md 文档中直接使用上面编写的组件

## 参考资料[高性能JS-DOM](https://www.cnblogs.com/libin-1/p/6376026.html)   [imba 性能篇](http://imba.io/guides/advanced/performance)// 可以在 md 文档中直接使用组件
复制代码

utterances其他配置项

主题 Theme 选项如下,我们可以选择各色主题:

  • Github Light
  • Github Dark
  • Github Dark Orange
  • Icy Dark
  • Dark Blue
  • Photon Dark

评论 issue-term 映射配置选项如下:

  • pathname
  • url
  • title
  • og:title
  • issue-number
    issue-term="1"
    特定number的issue,不会自动创建,个人使用该方案
  • specific-term

鼓励一下

如果你觉得这篇文章不错,希望可以给与我一些鼓励,在我的 github 博客下帮忙 star 一下。

参考文档

转载于:https://juejin.im/post/5d0907a9f265da1b94214c71

你可能感兴趣的文章
Codeforces Round #346 (Div. 2) - D Bicycle Race
查看>>
nginx php上传大小设置
查看>>
spring原理机制
查看>>
Oracle分析函数-nulls first/nulls last
查看>>
Python中时间类解决类似朋友圈时间显示的小问题
查看>>
NodeJs针对Express框架配置Mysql进行数据库操作
查看>>
基于MNIST数据集使用TensorFlow训练一个没有隐含层的浅层神经网络
查看>>
Hive修改表
查看>>
Leetcode刷题记录:编码并解码短网址
查看>>
【数据分析】Superset 之四 直接安装
查看>>
Swift - what's the difference between metatype .Type and .self?
查看>>
Matroid[转]
查看>>
Android 实现歌词同步
查看>>
c#设计模式-观察者模式
查看>>
如何使用cocos2d制作基于tile地图的游戏教程:第一部分
查看>>
SVN的版本日期
查看>>
圆满完成性能测试诊断分析与优化周末班培训课程!
查看>>
C# 通过消息捕获处理窗体最大化/最小化
查看>>
metabase docker-compose 运行说明
查看>>
C# ToShortDateString() ToString() 设置日期格式的区别
查看>>