返回

手把手教你使用issue作为博客评论系统

前端

前言

自从上周在阮一峰的《每周分享第 60 期》看到了可以将 GitHub 的 issue 当作评论系统，插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。之前是使用了 Valine 作为博客的评论系统。下图是改为 utterances 后的效果：

使用方法

1. 创建 GitHub issue

首先，你需要创建一个 GitHub issue。这个 issue 将用作你博客文章的评论部分。

  1. 打开 GitHub 并登录你的账户。
  2. 单击右上角的加号 (+) 按钮，然后选择“New Issue”。
  3. 在“Title”字段中，输入你博客文章的标题。
  4. 在“Body”字段中，输入你想要在 issue 中显示的任何其他信息。
  5. 单击“Submit new issue”按钮。

2. 安装 utterances

接下来，你需要安装 utterances 库。这个库将允许你在你的博客中嵌入 GitHub issue。

  1. 打开你的博客项目的根目录。
  2. 运行以下命令：
npm install utterances --save

3. 配置 utterances

现在，你需要配置 utterances 库。

  1. 在你的博客项目的根目录中，创建一个名为.utterancesrc.json的文件。
  2. 将以下内容复制到.utterancesrc.json文件中：
{
  "repo": "your-github-username/your-github-repo",
  "issue-term": "title"
}

将 your-github-username 替换为你自己的 GitHub 用户名，将 your-github-repo 替换为你的 GitHub 仓库名称。

4. 添加 utterances 代码

最后，你需要将 utterances 代码添加到你的博客中。

  1. 在你的博客项目的根目录中，创建一个名为.vuepress/components/Utterances.vue的文件。
  2. 将以下内容复制到.vuepress/components/Utterances.vue文件中：
<template>
  <div>
    <script src="https://utteranc.es/client.js" repo="{{ repo }}" issue-term="{{ issueTerm }}" theme="github-light" crossorigin="anonymous" async></script>
  </div>
</template>

<script>
export default {
  name: 'Utterances',
  props: {
    repo: {
      type: String,
      required: true
    },
    issueTerm: {
      type: String,
      required: true
    }
  }
}
</script>

将 repo 和 issueTerm 替换为你自己的 GitHub 用户名和仓库名称。

5. 使用 utterances 组件

现在，你可以使用 utterances 组件在你的博客中嵌入 GitHub issue。

<Utterances repo="your-github-username/your-github-repo" issue-term="title" />

将 your-github-username 和 your-github-repo 替换为你自己的 GitHub 用户名和仓库名称。

结语

以上就是如何使用 GitHub 的 issue 作为博客评论系统的方法。希望这篇文章对你有帮助。如果你有任何问题，请随时留言。