date
May 8, 2022
summary
通过开源工具 utterances为github.io的静态博客增加评论功能
status
Published
type
Post
slug
blog-comment
icon
tags
notablog
utterances
python
1、如何白嫖一个静态博客系统
众所周知，在github中可以创建自己的静态博客，其原理是用户自行上传自己的静态博客资源到：
你的github名称/github.io，即可实现静态博客的访问。为了实现优美的排版，开源作者 @dragonman225实现了Notion排版自动生成静态资源，上传到github.io项目中就可以访问了。具体操作方法我的第一个博客（搬运上面作者的）详见：
但是静态博客（也就是静态页面）存在一个问题：阅读者无法留下痕迹，实现与作者的沟通交流。
那么，我们如何为这个静态博客增加评论功能呢？
2、如何白嫖一个评论系统
开源的世界里不乏各种奇人，只有你想不到，没有他们做不到！
开源作者@jdanyow提出了一个清奇的想法：
github的每个项目都有一个 Issues 栏目，只要是github用户都可以在该栏目提issues（提bug或提建议），该区域作者与读者之间可以进行交流。因此这个栏目本质上就是一个评论系统，如果将Issues 评论的API接口拉取并集成到静态页面中，不就白嫖一个评论系统！？
于是，一个名叫utterances的开源项目就问世了。
2.1 utterances的特点
- 没有跟踪，没有广告，永远免费
- 没有锁定。存储在 GitHub Issues中的所有数据。
- 使用Primer进行样式化，这是为 GitHub 提供支持的 css 工具包。
- dark主题。
- 轻量级。不需要字体下载、JavaScript 框架或 polyfill。
2.2 工作机制
当utterances加载的时候，github的issue搜索API用于寻找基于页面的URL、路径名或标题的相关问题。如果没有搜到问题也没关系，作者提供了一个工具utterance-bot来为第一个评论的人自动创建一个issue，反映到博客视觉上就是有一个评论输入框，因为没有issue是不会有评论交互的。
用户要评论的话，必须先授权 utterances app 代替用户发布，使用的是github的授权OAuth应用程序。授权时会跳转到时授权页面，授权完成即可评论。
2.3 怎么来创建这个issue
通常的做法是直接使用github.io项目的issue栏目，比如我的是：
issue所在项目repo的选择有三点要求：
- 必须是public的项目，不能是私有项目的。
- 必须要先将 utterances app 安装到到该repo上，进入该链接后点击 install，可以全部repo都授权安装，也可以只授权要使用issue栏目所在的repo。安装完成用户才能正常评论。
- 如果你的 repo 是一个 fork项目，请到设置中确认issue功能是打开的。
以上操作完成后，将下面代码拷贝到你的html文件中，通常放到文章末尾的地方，就能在你的页面中出现评论的交互。由于这个是一个固定的代码，因此我将它放在文件
comment.script中，其中代码为：其中
repo="gendlee/gendlee.github.io"为你的issue所在的repo地址。详细设置步骤进入以下地址：
2.4 自动化为静态博客加评论功能代码
如果是用notablog开源工具生成的博客，每次生成都会覆盖式更新，手动添加的评论脚本就会丢失（notablog作者尚未实现这一功能，将来应该会有，可关注我给作者提的issue：
）。
Add comment function code of utterances
Github
Add comment function code of utterances
Updated
Jun 22, 2022为了自动为每个博客的html文件加评论代码，我写了一个Python工具
addComment.py自动化实现这一步骤供参考使用：文件存放路径：
comment.script是需要添加的评论代码所在文件，放置在notablog开源项目的notablog-starter目录下。
addComment.py同样放置在notablog-starter目录下。
这个脚本使用时需要注意特殊性：
- 由于我的博客html文件名（标题名）目前都是以0开头的，所以使用了
startswith('0')，这里具体根据自己的名字规律去正则抓取。
- 使用notablog生成的博客html文件，在关键字
</article>之后插入评论功能的代码，注意其他博客系统的区别。
3、关于Notablog的补充
在
Notion中写好博客后，我发布的步骤如下：- 在
notablog-starter/打开config.json，将url替换为你的Notion博客主页（列表）url（这一步通常一劳永逸，第一次添加完后边就不会再变了，除非你的Notion主页变化）
- 在
notablog-starter/内执行：notablog generate .或 win + R打开cmd（以下是我的路径）：notablog generate D:\code\gendlee.io\notablog-starter\.
- 自动为所有博客添加评论功能代码：在
notablog-starter/内打开Power Shell执行：python addComment.py
- 进入
notablog-starter/public/打开index.html预览生成的页面
- 在
notablog-starter/public/中用push所有文件到你的github.io项目中，博客发布即完成。
4、效果展示
如下。
- 作者:zion
- 链接:https://gendlee.github.io/blog-comment
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
