在 timeline 中展示 Github Discussion 最新评论

本文详细记录了如何通过Vercel托管服务获取GitHub Discussions评论数据，并将其展示在博客的timeline组件中。文章分步骤介绍了完整实现流程：从Vercel部署服务、启用GitHub仓库的Discussion功能、配置Giscus应用，到设置必要的环境变量、测试API接口，最后集成到Stellar主题中。通过这个项目，作者不仅实现了显示最新评论的功能，还分享了使用Vercel部署Serverless函数的实用经验，为想要增强博客互动性的开发者提供了完整解决方案。

文档来源

https://weekdaycare.cn/posts/twikoo-new/#giscus

为了加入这个功能，费了点时间，不过最重要的是解锁了使用 Vercel 部署项目的经验。

操作步骤

1. 在 Vercel 上部署服务

点击一键部署的链接

进入后先以 GitHub 的账号登录，然后要做的是在上面创建一个仓库。

取消勾选：

在左侧栏可以看到这个仓库其实是从星日语大佬的仓库 fork 出来的:

在这个仓库中大佬对 GitHub 的 Discussion API 返回数据增加了评论回复的数据。

选择 Create 创建仓库后，会马上进入 Deploy 阶段，这个先不用管，反正会部署失败 😂

2. 打开 GitHub 公开仓库的 Discussion 功能

回到 GitHub，可以看到已经新建了一个仓库首先仓库检查下仓库是不是公开的。其实在第一步已经取消私有化仓库了，但如果忘记了，现在可以设置为公开。然后在设置里面打开 Discussion 功能。在 Settings -> General 页面往下翻页，找到 Features ，打开 Discussions 开关就 👌

3. 进入 Giscus 页面进行配置

地址在这：https://giscus.app/zh-CN

这一步的目的是在 GitHub 中安装 #giscus 这个 APP，然后获取相关配置项。

这里的第一、第三步前面已经完成，那么关键是第二步。点击第 2 步的 giscus 然后进入安装 GitHub App 步骤。安装步骤里面需要注意两点：一是要在里面选择一个仓库，即刚才创建的仓库，仓库的权限选择 repo 就行。二是 **Read** and **write** access to discussions，即赋予 app 读写 discussion 的权限（好像这个默认给了）。

完成之后将仓库的 用户名/仓库名 填入上面的输入框进行检测。检测通过后，后面的几项设置如 页面 ↔️ discussion 映射关系, Discussion 分类, 特性, 主题 都可以随便选，因为这些后面都还可以再改。最重要的是获取下面的数据：

记住这里的 data-category-id 后面要用。需要提醒一点的是，Discussion 分类可以随便选，但是它选了会使 data-category-id 变化。所以改了 Discussion 分类，就要更新 data-category-id。

4. 回到 Vercel

先进入 Dashboard

选择 Settings --> Environment Variables 设置环境变量。需要添加的环境变量为:

设置完成后，回到 Deployments 进行重新部署(Redeploy)
部署成功后，出现下面的界面就是成功了：

左边的方框里面返回一个空的数组 []，说明函数执行成功了。只不过返回的数据为空。原因很简单，我们还没有在 GitHub Discussion 里面进行评论。回到 Discussion，在刚才 Discussion 分类 时选中的分类下面创建一个新的评论。稍等一会儿，或者马上重新部署，就能看到返回的评论数据了：

至此，获取 GitHub Discussions 的服务部署成功了。接下来是在本地应用里面接入该服务。

5. Stellar 应用里接入服务

代码在 [这里](https://weekdaycare.cn/posts/twikoo-new/#新建立 giscus_new.js)
如果代码有报错，请这样修改：

1
2
3
4
5
6
7
8
9
10
11
12
13

diff --git a/test.js b/test.js
index f3ad33f..500c379 100644
--- a/test.js
+++ b/test.js
@@ -19,7 +19,7 @@ utils.jq(() => {
             var cell = '<div class="timenode" index="' + i + '">';
             cell += '<div class="header">';
             cell += '<div class="user-info">';
-            cell += '<img src="' + (item.author.avatarUrl || default_avatar) + '" onerror="javascript:this.src=\\'' + default_avatar + '\\';">';
+            cell += '<img src="' + (item.author.avatarUrl || default_avatar) + '" onerror="this.src=\'' + default_avatar + '\'">';
             cell += '<span>' + item.author.login + '</span>';
             cell += '</div>';
             cell += '<span>' + new Date(item.createdAt).toLocaleString() + '</span>';

然后是在主题配置文件 _config.stellar.yml 加入配置，安装原文里面配置即可。配置完成后在 _data/widgets.yml 中可以自定义一个 widget:

1
2
3
4
5
6

latest_discussion:
  layout: timeline
  title: 💬 最新评论
  api: https://your-vercel-app-path # 你的 vercel 函数地址
  type: giscus
  limit: 16 # 限制获取数量，这是客户端，刚刚是服务端

最后看下 timeline 的效果：

🎉🎉🎉

总结

由于 GitHub 的 Discussions API 与 Issue 的 API 使用方式不同，所以这里不能像以前那样直接通过标准的 RESTful API 接口来获取评论数据，而是使用了 GraphQL。有大佬写了一个函数来拉取指定仓库的 Discussions 中的评论数据，并且将这个功能做为一个 function 部署在 Vercel 上托管。其他人如果想要获得同样的功能，在 Vercel 上 fork 出自己的仓库，并配置好环境变量即可部署自己的 API（服务）。部署完成后，在其他应用里调用托管/运行在 Vercel 上对应的接口，就可以获取数据了。

整个过程是 Github Discussions --> Vercel --> Giscus --> App。