0008 如何为静态博客添加评论功能？

Posted on Sun, May 8, 2022 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的特点

2.2 工作机制

当utterances加载的时候，github的issue搜索API用于寻找基于页面的URL、路径名或标题的相关问题。如果没有搜到问题也没关系，作者提供了一个工具utterance-bot来为第一个评论的人自动创建一个issue，反映到博客视觉上就是有一个评论输入框，因为没有issue是不会有评论交互的。

用户要评论的话，必须先授权 utterances app 代替用户发布，使用的是github的授权OAuth应用程序。授权时会跳转到时授权页面，授权完成即可评论。

2.3 怎么来创建这个issue

通常的做法是直接使用github.io项目的issue栏目，比如我的是：

Issues · gendlee/gendlee.github.io

New issue Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. By clicking "Sign up for GitHub", you agree to our terms of service and privacy statement. We'll occasionally send you account related emails.

https://github.com/gendlee/gendlee.github.io/issues

issue所在项目repo的选择有三点要求：

以上操作完成后，将下面代码拷贝到你的html文件中，通常放到文章末尾的地方，就能在你的页面中出现评论的交互。由于这个是一个固定的代码，因此我将它放在文件comment.script中，其中代码为：

<script src="https://utteranc.es/client.js"
        repo="gendlee/gendlee.github.io"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

其中 repo="gendlee/gendlee.github.io"为你的issue所在的repo地址。

详细设置步骤进入以下地址：

utterances

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more! Open source. 🙌 No tracking, no ads, always free. 📡🚫 No lock-in. All data stored in GitHub issues. 🔓 Styled with Primer, the css toolkit that powers GitHub. 💅 Dark theme. 🌘 Lightweight.

https://utteranc.es/

2.4 自动化为静态博客加评论功能代码

如果是用notablog开源工具生成的博客，每次生成都会覆盖式更新，手动添加的评论脚本就会丢失（notablog作者尚未实现这一功能，将来应该会有，可关注我给作者提的issue：‣）。

为了自动为每个博客的html文件加评论代码，我写了一个Python工具addComment.py自动化实现这一步骤供参考使用：

import os

comment_scrpit = open('comment.script','r')
comment_scrpit_str = comment_scrpit.read()
keyword = '</article>'
keyword_before = '<span>Home</span>'
keyword_after_replace = '<span>回到主页</span>'

file_dir = '.\\public\\'


def file_name(file_dir):   
    my_blog_files=[]   
    for root, dirs, files in os.walk(file_dir):  
        for file in files:  
            if os.path.splitext(file)[1] == '.html' and os.path.splitext(file)[0].startswith('0'):  
                my_blog_files.append(file)  
    return my_blog_files;


my_blog_files = file_name(file_dir)

print(my_blog_files)


def replace(file, old_content, new_content):
    content = read_file(file)
    content = content.replace(old_content, new_content)
    rewrite_file(file, content)

# 读文件内容
def read_file(file):
    with open(file, 'r', encoding='UTF-8') as f:
        read_all = f.read()
        f.close()

    return read_all

# 写内容到文件
def rewrite_file(file, data):
    with open(file, 'w', encoding='UTF-8') as f:
        f.write(data)
        f.close()

# 将Home换成回到主页
for blog_file_name in my_blog_files:
    file_path = file_dir+blog_file_name
    replace(file_path, keyword_before, keyword_after_replace)

# 文章尾部添加评论脚本
for blog_file_name in my_blog_files:
    file_path = file_dir+blog_file_name
    file = open(file_path,'r', encoding='utf-8')
    content = file.read()
    post = content.find(keyword)
    if post != -1:
        content = content[:post+len(keyword)]+comment_scrpit_str+content[post+len(keyword):]
        file = open(file_path,'w', encoding='utf-8')
        file.write(content)
        file.close()

文件存放路径：

这个脚本使用时需要注意特殊性：

3、关于Notablog的补充

在Notion中写好博客后，我发布的步骤如下：

4、效果展示

如下。