为博客集成utterances 评论组件
date
Mar 21, 2025
AI 摘要
slug
integrate-utterances-comment-component-in-blog
status
Published
tags
github
blog
open-source
front-end
summary
utterances 是一个轻量级的评论插件 Utterances，基于 GitHub Issues 构建，无广告、无跟踪、开源且永久免费。它通过 GitHub OAuth 流程授权用户发表评论，所有数据存储在 GitHub 中，支持多种页面与 Issue 的映射方式，并提供多种主题自定义选项。
type
Post
utterances 是一个轻量级的评论插件 Utterances，基于 GitHub Issues 构建，无广告、无跟踪、开源且永久免费。它通过 GitHub OAuth 流程授权用户发表评论，所有数据存储在 GitHub 中，支持多种页面与 Issue 的映射方式，并提供多种主题自定义选项。
1、utterances工作原理
utterances 是基于 GitHub issues 构建的轻量级评论小部件，所有的评论信息也即是存储在 Github issues 中的，使用 GitHub issues管理博客的评论等。
当博客页面中 utterances 的组件加载时，GitHub issues搜索API将根据
url，pathname或title找到与页面关联的 issues。如果我们找不到与该页面匹配的issue，那么utterances 机器人会在第一次发表评论时自动创建 issue。用户要发表评论，必须使用Github Oauth授权登录，用户在博客下面发布评论，实质上是在对应的GitHub issue上发表评论。
2、utterances 优点
最主要的优点还是轻量接入，utterances插件通过 GitHub OAuth 授权用户发表评论，或者用户可以直接在 GitHub Issue 上评论。
另外，还有如下特点：
- 支持多种页面与 Issue 的映射方式，如根据页面路径名、URL、标题或 Open Graph 标题等自动匹配或创建 Issue。
- 可配置特定 Issue 编号或自定义标题关键词以匹配 Issue，同时支持为创建的 Issue 添加标签。
- 提供多种主题选项，可以定制样式，并通过简单的 script 标签将 Utterances 集成到博客中。
3、utterances 接入步骤
3.1、创建仓库并安装 utterances
1、然后需要创建一个公开的 github repo，接入utterances之后该仓库的 issues 用于存储博客的评论。
2、在你 github repo 中安装 ，点击左边的链接安装到你 账号中，安装之后可以在用
户设置的 Application 中查看已经安装。
然后点击 Configure 配置按钮，确保第一步中的 github repo打开了对 utterances 的操作权限。
3.2、代码配置到 blog 文件中
打开 ‣，在configuration 中配置 github repo 地址。
注意配置的格式是 owner/repo，其中 owner 是 account name，也就是你 github url中的name。
然后会得到要嵌入到 blog 系统中的一段代码，根据blog 不同的技术实现，粘贴到相应的博客模板位置即可。
使用
.utterances和 .utterances-frame选择器自定义布局和样式。