在 Astro Cactus 中添加 Webmentions

TL;DR

按照 IndieLogin 的说明，在主页添加指向你的 GitHub 或邮箱的链接。可以通过 src/components/SocialList.astro 完成，记得为相关链接添加 isWebmention。
前往 Webmention.io 使用你的网站地址创建账户。
将获得的 feed 链接和 API key 写入 .env 文件，键名分别为 WEBMENTION_URL 与 WEBMENTION_API_KEY（本模板提供 .env.example 可直接改名）。如果需要，也可添加可选的 WEBMENTION_PINGBACK。
打开 brid.gy 登录并连接你想要的社交账号。
构建并发布你的网站，记得配置环境变量，现在即可接收 webmentions！

什么是 Webmentions

简单来说，它是一种在你的网站页面上展示来自社交媒体的点赞、评论、转发等互动的方式。

本主题会展示每篇文章的点赞、提及与回复数量。还有一些类型（如转发）目前被过滤掉了，后续也可以加入。

首先，你需要在站点上添加一个链接以证明所有权。参考 IndieLogin 的说明，有两种方式：邮箱地址或 GitHub 账号。你可以在 src/components/SocialList.astro 的 socialLinks 数组中填写你的信息，并为相关链接添加 isWebmention（会添加 rel="me authn" 属性）。无论使用哪种方式，都要确保你的页面标记里有对应的链接。

<a href="https://github.com/your-username" rel="me">GitHub</a>

注册 Webmention.io

接着前往 Webmention.io，使用你的域名登录创建账号，例如 https://astro-cactus.chriswilliams.dev/。注意：.app 顶级域存在兼容性问题。成功后它会给你若干链接以便接收 webmentions。记录这些链接并创建 .env 文件（本模板包含 .env.example 可改名）。将 feed 和 api key 分别写入 WEBMENTION_URL、WEBMENTION_API_KEY，如需也可写入 WEBMENTION_PINGBACK。请不要将这些信息提交到仓库！

注册 Brid.gy

现在使用 brid.gy，它会把你的网站与社交媒体账号关联起来。对每一个你想连接的账号（例如 Mastodon），点击对应按钮进行授权连接。再次提醒，.app 顶级域当前存在问题。

测试是否生效

完成所有配置后，构建并发布你的网站。务必在托管平台上设置 WEBMENTION_API_KEY 和 WEBMENTION_URL 环境变量。

可以通过 webmentions.rocks 发送测试 webmention 来检查是否工作。使用你的域名登录，输入授权码，再输入想要测试的页面地址。例如测试此页面可输入 https://astro-cactus.chriswilliams.dev/posts/webmentions/。构建或重新启动本地开发后，你应能在页面底部看到结果。

你也可以通过它们的 API 在浏览器中查看测试数据。

后续改进与注意事项

目前仅在重新构建或重启开发模式时拉取新的 webmentions。如果你不常更新站点，新内容就会较少。可以考虑用定时任务调用 src/utils/webmentions.ts 中的 getAndCacheWebmentions() 来填充内容，这也许可以作为下一步的 GitHub Action。
有些提及存在重复，但由于 ID 不同，过滤起来较困难。
我并不太喜欢用于链接评论/回复的小外链图标，尤其在移动端体验一般，之后可能会替换。

致谢

非常感谢 Kieran McGuire 的分享与相关文章。在此之前我并不了解 webmentions，希望这次更新也能帮助到其他人。此外，kld 与 ryanmulligan.dev 的文章和示例对集成帮助很大，值得参考！