Astro-blog记录(9) - 添加Webmention

2026-02-25

什么是Webmention

Webmention 是一种用于网站之间“相互通知”的开放协议。简单说,当你引用别人时,对方可以自动收到通知,并在自己网站上显示你的引用。科普就这么多, 你如果有兴趣可以在网络上找到很多相关的内容.

前言

这段时间又开始在网络上随机游走, 在V站的VXNA发现了很多不错的博客, 在極客死亡計劃下面发现了1年前我在Benji博客下面见到的WebMention. 趁着这段时间没有任何的ddl, 于是打算实施一下.

前期准备和具体流程

由于现在各类LLM过于强大, 我也成为了cursor的拥护者, 因此难以逐步提供信息, 但考虑到我的语言表达能力并没有在人类中属于出类拔萃的程度, 我想这或许是好事, 具体的方式如下:

  1. 通过 SITE_URL + 当前路径 生成标准目标地址,作为Webmention 的 target
  2. 页面加载后, 向https://webmention.io/api/mentions.jf2?target=当前文章URL发送请求,从 webmention.io 拉取所有指向该文章的 Webmention 数据
  3. 在文章底部展示

接下来是你在实施前需要做的准备: 注册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的展示, 兼顾了日夜模式/分离了点赞和回复

参考

给博客添加 Webmention

透過 webmention 來搜集 blog 的社群迴響

Random Read

Webmention

手动提交
如果你在自己的博客或社交网络中提到了这篇文章,并发送 Webmention,这里会自动展示那些回复、喜欢和转发。