XiaBee's Studio.

utteranc 搭建评论系统

字数统计: 414阅读时长: 1 min
2021/11/03

简介

  • 官网
  • 利用github issue做静态博客的评论系统

image.png

关于Gitalk

gitalk曾经(包括现在)也是很火的博客评论插件,但是它出现过安全事故:v2ex论坛黑客派骗star,就不推荐使用。

这里给不能科学上网的同学简述一下:这个项目要的权限太多了,最坏情况下,恶意的使用者可以直接修改你的项目……黑客派就曾利用你登录评论区的token,偷偷的给自己仓库标star……

image.png

image.png

关于utteranc

image.png
  • 仅用于登录Github,如果网页内已经登录了Github则无需重复授权
  • 只对相关issue有读写权限,没有整个仓库读写权限,不存在直接利用token修改仓库的情况

搭建

手动搭建

官网写的很详细了,我简述一下(x)

  • 创建一个仓库
  • 给仓库安装 utterances APP
  • 配置一下读写权限
image.png
  • 插入代码中:

    1
    2
    3
    4
    5
    6
    7
    <script src="https://utteranc.es/client.js"
    repo="[ENTER REPO HERE]"
    issue-term="pathname"
    theme="github-light"
    crossorigin="anonymous"
    async>
    </script>

Archer主题集成

  • 创建仓库和安装APP和手动搭建相同
  • 找到主题目录的_config.yml中的comment字段:
1
2
3
4
5
comment:
utteranc_repo: "[ENTER REPO HERE]" # 这里填你的repo
utteranc_label: "Comment"
utteranc_theme: "github-light"
utteranc_issue_term: "title"

允许/禁止comment

md文件首部YAML Front Matter部分添加comments字段,例如:

1
2
3
4
5
6
7
title: utteranc 搭建评论系统
date: 2021-11-3 22:46:18
tags:
- hexo
- utteranc
categories:
- coding

测试

评论测试

发布评论:

image.png

邮件提醒:

image.png

ISSUE

image.png

修改提醒

如果想修改邮件提醒可以在右上角Notifications里面改:

image.png

image.png

CATALOG
  1. 1. 简介
  2. 2. 关于Gitalk
  3. 3. 关于utteranc
  4. 4. 搭建
    1. 4.1. 手动搭建
    2. 4.2. Archer主题集成
  5. 5. 允许/禁止comment
  6. 6. 测试
    1. 6.1. 评论测试
    2. 6.2. 修改提醒