给博客添加 Webmention

🎶 The Great Escape Of Our Time - 椅子乐团 The Chairs

(这是一篇编辑中的文章，我拿它来测试 Webmention 的发送，你也可以用它测试 Webmention 的发送，这样我也可以测试 Webmention 的接收。)

什么是 Webmention

Webmention 是一种通知，表明一个 URL 链接到另一个 URL。

例如，Alice 在她的博客上写了一篇有趣的帖子。随后 Bob 在自己的网站上写了一篇回复她的帖子，并链接回 Alice 的原始帖子。 Bob 的发布软件向 Alice 发送一个 Webmention，通知她的文章被回复了， Alice 的软件可以将该回复显示为原始帖子上的评论。

Source

Webmention 和评论差不多，只是它的门槛相对高一点，需要你写一篇文章¹，并链接到你想评论的文章。

如果对方支持了 Webmention，你发送 Webmention 通知后，对方就会将你的内容显示出来。

Webmention 的大致流程

为什么接入 Webmention

实现跨站点的对话。当你链接到某个网站时，你可以发送一个 Webmention 来通知它。如果该网站支持 Webmention，那么该网站可能会将你的帖子显示为评论、赞或其他回应，就这样，你就实现了从一个站点到另一个站点的对话！

Source

我觉得 Webmention 和集成在博客中的评论系统做的事情都差不多。

如果你要回应一篇文章，通过 Webmention，你需要写一篇文章链接到这篇文章，并发送一个 Webmention 通知。通过如 Bridgy 之类的服务，也可以收集社交网络上（Blusky、Mastodon 等）关于文章的回应，例如点赞、转发等。

但我觉得并没有比集成于博客的评论系统更方便。

从数据层面看，除非自己买服务器搭建 Webmention，否则用第三方提供的服务，数据依然不在自己的手上。

所以我为什么要接入 Webmention？

最开始是在我想让自己说话不那么“端着” | Owen Young 中了解到 Webmention，当时觉得有些麻烦。

最近网上冲浪的时候，看到不少博客都有集成 Webmention，然后了解了一下 webmention.io 的使用，看起来不麻烦，就想着集成看看。

非要找个理由的话，就是折腾一下，好玩吧。

如何接入 Webmention

如果是自己搭建的话，可以参照 Webmention 规范实现，或者找现成的工具，Webmention | IndieWeb 里罗列了很多工具和服务。

我目前实现很简单，主要依赖 webmention.io 提供的服务。

作为接收方

接收我使用 webmention.io 提供的服务，按照 How to Set Up Your Website for IndieLogin.com 的说明进行设置。

我用 GitHub 进行验证，需要在 GitHub Profile 中包含我的网站，同时在网站添加一个链接。

图2 我的 GitHub Profile 页面，我把网站的地址添加到了 Profile 中

<head>
  <!-- 省略其他内容 -->
  <link href="https://github.com/spike-leung" rel="me">
  <!-- 省略其他内容 -->
</head>

这样就能通过 webmention.io 的验证了。

接下来按照 webmention.io 提供的 API 获取 Webmentions 的数量和内容，需要在页面上添加 HTML 元素，写一些 JS 代码调用 API 渲染数据²，再写点 CSS 优化一下样式。

搭建好之后，可以用 Webmention Rocks! 提供的服务进行测试。

作为发送方

作为发送方，需要通过 microformats 标记网站信息，如用户名、头像、链接的标题、内容等，从而让 Webmention 解析展示。

最主要的标记是 h-card 和 h-entry，前者标记用户信息；后者标记内容信息，标记的部分会作为 Webmention 的内容呈现。

设置好之后就可以向集成了 Webmention 的网站发送通知了，需要构建一个 POST 请求，可以用第三方服务，如 Telegraph 手动发送，或者考虑集成 webmention.app 自动发送。

可以向 Sending your First Webmention from Scratch 发送 Webmention 进行测试，这篇文章也是一篇 Webmention 的入门教程。

一些问题

大部分疑惑 Webmention-faq | IndieWeb 中都有解答。

一些我还没完全明白的问题：

Webmention 有很多类，有的表示评论，有的表示点赞，我目前只支持了评论，点赞怎么做还要看看
如何实现自动发送 Webmention
Webmention.io 的数据迁移

其他参考文章

脚注:

或者在社交媒体如 BlueSky、Mastodon 上发一个帖子，引用文章的链接。

也可以用别人封装好的 webmention.js。