blob: 7870fe746d2d1eb525d7b6ce83f181bbe6f3e301 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
date: '2025-12-05T17:22:22+08:00'
draft: false
title: '一次对Webmention的探索'
slug: 'exploring-webmention'
categories:
- 技术
tags:
- Webmention
- 去中心化
- 博客
---
> Webmention is a simple way to notify any URL when you link to it from your site.
>
> It is an open web standard (W3C Recommendation) for conversations and interactions across the web, a powerful building block used for a growing distributed network of peer-to-peer comments, likes, reposts, and other responses across the web.
Webmention 是一种开放网络标准（W3C推荐标准），用于在链接到某个网址时，自动向该网址发送通知。它是构成分布式网络的基础组件，支持跨网站的点对点评论、点赞、转发等多种互动。
在 [上一篇文章](https://www.glowisle.me/posts/tear-hypocrisy-apart/) 写完后，我开始寻找更合适的评论方案。Webmention这个看起来古老，但又超前的形式很快引起了我的兴趣。「去中心化」这个词貌似对我有什么魔力，就比如Mastodon，比Twitter更吸引我。
我很想试试用Go手搓一套收发系统，但时间并不充裕，正巧[webmention.io](https://webmention.io)提供现成的服务和[详细的文档](https://indielogin.com/setup)，那就跟着文档配置吧。
## 验证与接收
教程提供了多种验证方案，这里使用最简便的Github. 只要在网站的首页挂上一个链接，指向用户档案页：
```html
<a href="https://github.com/example" rel="me">github.com/example</a>
```
如果不想让它可见，也可以设置为一个`<link>：
```html
<link href="https://github.com/example" rel="me">
```
这里我部署后回退了一下网页就弹出来Github APP 认证请求了，大概需要刷新网页或打开Github？
这样，访问之后页面中提供的链接，就可以看到别人发送的Webmention了。
## 渲染
在网页中添加link
```html
<link rel="webmention" href="https://webmention.io/你的用户名/webmention" />
```
我使用[webmention.js](https://github.com/PlaidWeb/webmention.js)，根据说明文档，可以复制仓库中的`/static/webmention.min.js`到博客的`/static/js/webmention.min.js`.
在评论框下方提供一个容器`<div id="webmentions"></div>`，并引用脚本
```html
<div id="webmentions"></div>
<script src="/js/webmention.min.js"
data-id="webmentions" // 与容器id匹配
data-page-url="https://yourdomain.com/当前文章永久链接" // 建议使用
data-max-webmentions="50" // 最多显示数量
data-wordcount="30" // 回复预览最大字数
data-sort-by="published" // 按照发布时间排序
data-sort-dir="up" // 时间升序
async>
</script>
```
Hugo用户在永久链接上可以使用：
```html
data-page-url="https://yourdomain.com{{ .RelPermalink }}"
```
为了本地测试，使用相对链接的变量拼接。脚本会对API发送请求，如果拿到的数据是空的，则会把最终的HTML输出为一个空字符串，所以刚开始看不到输出是正常的。大概写点CSS就可以正常投入使用了。
## 对Webmention的看法
我认为Webmention是一种很像友情链接的互惠模式，优于在评论区下方留下链接的形式。续上上一篇文章的话题，这样不仅促成高质量的互动，也能丰富自己的写作素材，分量应该重于评论区链接的手段。就像上一篇文章的结尾所说，利人利己，何乐而不为呢？
虽然这种模式的普及程度不高，但我相信去中心化会称为互联网的新趋势。开放、互联才能称为「互联网」。
我通过一些Webmention，一条一条顺藤摸瓜也找到了很多有趣的博客。我准备有时间优化渲染格式，可能也会研究一点桥接的功能，不过还是要保持博客一贯的简洁风格。当然，要先有人回应才有数据拿来渲染，欢迎大家使用Webmention参与互动！
|
