博客使用 utterances 作为评论系统
2024-10-22 16:45:31
utterances 是一款基于 GitHub issues 的评论工具。
相比同类的工具 gitment、gitalk 以及 disqus 评论工具,优点如下:
- 极其轻量
- 加载非常快
- 配置比较简单
博之前客一直使用 disqus ,这个工具配置也比较简单,也是免费的。但是,广告多,而且加载也比较慢。
体验了一把 utterances 后,马上切换到 utterances。
安装 utterances
utterances 的安装相当简单,因为出品了一个 Github App。
首先安装这个 App ,选择要关联评论的仓库。可以选择所有仓库,也可以只选择一个仓库。选择一个仓库比较安全。
安装完成就是配置成功了,是不是非常简单。
使用 utterances
在你要使用评论的地方,插入以下代码:
<script src="https://utteranc.es/client.js"
repo="nusr/blog"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
nusr/blog 是你配置允许访问的仓库,格式为 user-name/repo-name 。
或者动态创建 script 标签:
<script type="text/javascript">
(function() {
// 匿名函数,防止污染全局变量
var utterances = document.createElement('script');
utterances.type = 'text/javascript';
utterances.async = true;
utterances.setAttribute('issue-term','pathname')
utterances.setAttribute('theme','github-light')
utterances.setAttribute('repo','nusr/blog')
utterances.crossorigin = 'anonymous';
utterances.src = 'https://utteranc.es/client.js';
// content 是要插入评论的地方
document.getElementById('content').appendChild(utterances);
})();
</script>
我的博客是使用 Hugo 搭建的,可以参考我的配置 config.toml。
配置 utterances
utterances 可以配置主题,评论映射。
主题 theme 选项如下:
- github-light
- github-dark
- github-dark-orange
- icy-dark
- dark-blue
- photon-dark
评论 issue-term 映射配置选项如下:
- pathname
- url
- title
- og:title
- issue-number
- specific-term
更多配置查看 https://utteranc.es/
最新文章
- Cocoapods 更新后 使用
- Altium Designer的PCB定位槽制作
- JQuery高性能最佳实践
- iblog语法高亮示例
- 详解Spring中的CharacterEncodingFilter--forceEncoding为true在java代码中设置失效--html设置编码无效
- 大教堂与集市(The Cathedral and the Bazaar)读书笔记
- 纯CSS3之五子棋(黑白棋)画法
- java_manual的一点体会
- C# 的Chart
- [PGM] Markov Networks
- 新一代.NET平台三大框架的定位
- indexedDB为何物
- 读书笔记(04) - 错误监控 - JavaScript高级程序设计
- Linux中磁盘分区、格式化、挂载等管理
- c++11实现异步定时器
- Python3.x:函数定义
- jwplayer视频--不兼容IE8
- vue+postcss报错: variable &#39;--primary-color&#39; is undefined and used without a fallback
- Nginx + Lua + 共享内存
- rubymine自动转义双引号
热门文章
- 20189220 余超《Linux内核原理与分析》第三周作业
- 给lol人物模型添加动画库(mixamo)中的动画
- AOP通知类型
- 剑指offer: 求1+2+...+n
- 动态BGP与静态BGP
- Android: VIVO手机setSpeakerphoneOn p无效,无法切换speaker的问题
- t420 win7 硬盘安装ubuntu 10.04 LTS 备忘
- [转]vscode 插件推荐 - 献给所有前端工程师(2019.8.7更新)
- mongo 笔记
- Redis 密码设置 及 带密码访问