什么是Webmention
Webmention 是一种用于网站之间“相互通知”的开放协议。简单说,当你引用别人时,对方可以自动收到通知,并在自己网站上显示你的引用。科普就这么多, 你如果有兴趣可以在网络上找到很多相关的内容.
前言
这段时间又开始在网络上随机游走, 在V站的VXNA发现了很多不错的博客, 在極客死亡計劃下面发现了1年前我在Benji博客下面见到的WebMention. 趁着这段时间没有任何的ddl, 于是打算实施一下.
前期准备和具体流程
由于现在各类LLM过于强大, 我也成为了cursor的拥护者, 因此难以逐步提供信息, 但考虑到我的语言表达能力并没有在人类中属于出类拔萃的程度, 我想这或许是好事, 具体的方式如下:
- 通过
SITE_URL + 当前路径生成标准目标地址,作为Webmention 的target。 - 页面加载后, 向
https://webmention.io/api/mentions.jf2?target=当前文章URL发送请求,从 webmention.io 拉取所有指向该文章的 Webmention 数据 - 在文章底部展示
接下来是你在实施前需要做的准备: 注册webmention.io并验证, 验证的方法因人而异, 我使用了github, 目的是双向确认网页属于你.

进入Sites->Get Setup Code, 添加这行code到你网页的header中, 接下来就是在前端进行webmention的GET和渲染了, 就和上述的实施方式一致.
实施过程中遇到的问题
在实际场景中, 例如我所使用的Astro, 会根据自己的设置在访问的网页url后加上一个/, 以及在对webmention.io发送当前文章的url的时候会携带一个.html. 传过去的url和别人复制的url/本地的url等url不一致, 也会导致webmention无法正常显示, 因此值得注意.
(可选)采集Mastodon互动的额外配置
我的主要目的是展示在Mastodon上的互动, 但Mastodon本身并不具备webmention的相关功能, 因此需要引入一个额外的工具Bridgy, 用来拉取所有在联邦宇宙中产生的互动, 并递交给webmention.io.
下面是我的后台展示, 你可以清晰看到各种访问成功和异常(Sent即为发送webmention成功, 你可以通过点击刷新按钮左侧的时间来查看当前条目的日志, 从而进一步确定问题所在):

(可选) 添加手动提交表带
考虑到一些网络友邻没有在webmention.io进行链接提交, 这也意味着没有办法进行双向的信息展示, 即我作为A的文章被B引用了, 但B的博客没有办法告诉A我引用了你的文章, 因此我额外添加了一个手动提交的button. 当B在文章中提及了我的这篇博文, 那么ta可以在我这里手动提交表单给webmention.io, 进而收录.

下面则是我简单设计的webmention的展示, 兼顾了日夜模式/分离了点赞和回复
