灵感源自StyleStar的景の域网站海报设计

来源

于是找了几个测试服务测试了一下，发现好多都卡在了之前添加的Captcha验证的部分！但是birdgy的留言却能发送过来。

所以Captcha的人机验证到底会不会影响Webmention发送？

看起来如果要保险一些，接收所有的Webmention，最好还是关掉人机验证的保护（因为Webmention确实是机器发送的……从某种程度来说）。

不过保留Antispambee这个蜜罐插件还是可行的。

但是这样一来，评论的垃圾箱也会随之爆满，影响数据库速度、增加查询的性能开销。我真的想不通这些垃圾评论是从何而来的？难道有人维护着一种清单、类似骚扰电话那样吗？好在这些垃圾评论发送的比较笨拙，有什么表就填什么，所以一般的蜜罐插件就足以应付将其拦截了。

我都想尝试一下Anubis防火墙了……好可爱的小女孩！

但是还是很担心这东西会不会影响Webmention送达率。正如Eltrac先生所说，它比较像邮件的平信或明信片，并不能够像即时通讯或者是社交媒体的挂号信形式那么准确地送达。况且，即使送达了，也不能确定对方是否能看到。

创立本域最早的时候，其实我就了解IndieWeb以及相关的技术了，但是那时候有几个问题而没有采用：

• 一来还跑在FRP穿透方式的主机上运作，因为是穿透出来的有诸多技术问题没能解决，完全不现实；
• 其次我的博客文章质量还没有那么高，我又不想混那种中文圈、更偏向避风港的作用（不过现在也有所改观了）
• 那时候的站点主要发给国内的游戏水友，网站的定位也还不允许我用作国际交流的用途，没有这样的需求。当然后来也和这些水友走散了，那是个堕落时期，有很多人也已经不配称之为水友了。

所以最后，如果想要有效的传达信息，还是得要通过RSS或者其他的方式联系呐。。WordPress自带了评论系统，也算是一种备用方式吧。我还是很乐意接受到Webmention这样的回复方式的！这就像业余无线电一样的兴趣。

至于社交媒体……等我做艺术站再说吧。

来源

随意用Drawpile画的IndieWeb Camp拟人娘化形象概念

嗯……只是用马克笔画出来的概念涂鸦，很草率也没有细化，所以比例惨不忍睹
创作灵感算是受到了Anubis和OS-tan的启发。

整体的形象设计配色采用了IWC标志的红橙黄三色。
连衣裙和发夹的设计对应IndieWeb的IWC标志中的字母「I」
罗马卷的双马尾钻头头型和蝴蝶结则对应了IWC的「W」，
说起钻头的话，也许很容易联想起 重音teto/依神女苑/豪德寺都(泡泡)
C的话大概就是头发后面的马尾？嘛……我对头型一窍不通，还是要提高自己的知识水平（）
老实说，就连这副连衣裙上半部分的领子结构也极其独特。

我想她是一位18岁的少女，其实我没有想过太多的设定，
但我想应该是那种活泼热情、勇于探险和帮助他人的漂亮女孩。

来源

IndieWeb Webring 的官网及其域名，是两个EMOJI表情「」
而Webring是一种在互联网上传递网站链接的形式。

我忽然从「Internet Explorer」与「Internet游戏系列」的图标（如Internet双陆棋）得到了灵感，因此，这次的设计，依然采用了类似于Frutiger Aero的风格。

另附对应的 88×31 尺寸的Web按钮，可供链接：

来源

域名是以ink为前缀，衍生出谐音的「印记」——印象的记录。
虽然我没用过Evernote……

这属于IndieWeb计划的一部分，使其兼容MicroPub格式的发布器。
与其说是随笔的印记，更像是一种网络收藏夹。
无论如何，以留存记忆为前提的元素不会改变。
也许以后主站的个人向记录，也会一并搬迁至此吧？

主题使用的是 Independent Publisher 这一支持Microformats格式的IndieWeb主题、并采用Post Kinds插件兼容MicroPub发布器。

背景是OneNote的竹子背景，感觉空空的于是就用了这个。我确实很想弄一个复古风格的个人博客。

以此自己一并绘制了竹筒样式的站标。
这也是受到了竹取物语的启发。我喜欢竹子。

久等了！这是88×31的按钮：

来源

之前介绍了有关类似88×31的复古按钮的研究介绍，

景の域也于 IndieWeb.org 建立了页面，
加入到IndieWeb这一项独立网络文化的运动当中。

对于现有的IndieWeb 88×31按钮的设计样式并不满意，
我想制作一种更加简约且现代化的样式。
并且，IndieWeb.org的页面上，
也表示需要有关其他IndieWeb相关技术的设计样本。

以下，便是这次制作的IndieWeb按钮样式合集：

同时，也投稿至 IndieWeb.org 上的88×31维基页面：https://indieweb.org/buttons#Community_Contributions

来源

这类按钮在Wikipedia维基百科上被称为Web Badge，又被称之为Web Button 88×31、Web Brick、88×31 Button、(Hyper)Link Button等名称、大部分日本本土网站，则常称为リンクバナー（Link Banner）这样的说法。

88×31是什么？

88×31是一种流行于上世纪互联网网页的超链接按钮尺寸，
你可以在各种BBS、个人博客和项目网站发现它们。
它代表着一个独特的、独立自由的互联网文化的印象。

咳咳，有一些夸大。不过如今也如同人类古迹文明一般，这些88×31尺寸的小按钮在早年的网页页脚之下成堆聚集，被当作一种独特的网络文化、亦被后人收录记载，成为90-2000s千禧年代前的Web1.0互联网时代的重要构成元素。

在现在的NeoCities和IndieWeb独立网络文化运动当中，也时常可以见到这些按钮的复苏。

即使如今，在开源软件仓库的Readme、开发者个人博客总能见到小巧的GitHub式按钮，它们的作用是相同的——网页上的超链接按钮。
只是以GitHub为首的新式按钮从位图变为文本CSS与SVG构建的矢量样式，且Web2.0时代的动态化思维、使得这些按钮具有通过JSON/REST API更新内容显示的功能，用途更加丰富。

总而言之，在功能上，这些按钮的用途几乎是一致的——从一个网站通过超链接跳转到另一个网站。

本文不会教授如何制作、设计这样的超链接按钮，
因为设计创作工具实在是千变多样：

这里既可以用Adobe、Affinity、Corel这类商用专业制图软件，
也可以运用自带画图、paint.net、乃至专业像素画软件Aseprite/Resprite；如果你愿意，也可以使用SAI或CSP的画笔精雕细作。网上也有许多类似的Online Generator，当然，会用Javascript Canvas或是Python还能手搓一个出来……
再不行，不妨用ShareX裁一个？或拍摄现实的图像……

致读者的话：要有创意！

200×60 是怎么来的？

也许读者会感到诧异，为何一下跳到了200×60的尺寸？

虽然88×31的图标很普遍，但是分辨率过低，并不适宜手机等高分屏硬件显示；

古早结构仍在流行的日本是一个很好的案例，超链接按钮的习惯在日本如同大街小巷的招牌似的，随处可见。只是先不讨论那些趋于国际化的“日裔网站”，如今智能手机占比在日本不低，难道日本人真如同传言那般不会与时俱进？

其实有一个片面、但是相当合适的参考例：

东方Project可谓是起源于当代古早互联网、进化于现代网络文化的活化石之一，因此，也可以发掘许多关于日本古早互联网文化的影子，是非常合适的研究对象。

在touhou-project.news的新闻官方网站，尽管已经是现代的响应式网站设计，但仍能发现愈多早年日本本土网站的设计习惯，比如网站的主页被称为“TOP”而非“HOME”，这是日本网站的一些设计特征；

而在官网的footer部分上方有一个LINK区域，也显示了许多高清的网站按钮，有ZUN原本的个人主页、黄昏官网、也有社交媒体的帐号，设计风格仿如88×31放大版，并且尺寸依然离奇的一致。

或许这是某种新的约定俗成？

通过浏览器DevTools可以查看到，这些按钮的尺寸均为200×60，一眼能看出缩放纵横比与88×31并不同。因此它们并非是简单的2x高清放大。

在网络上直接搜寻200×60自然是没有什么结果的，
但一位朋友提醒我，若把88×31与200×60两者同时放在Google搜索，便能发现一些日本政府网站的链接页面，提供了有关外链所需的按钮素材：

此鹤冈非彼鹤岗

与此同时，在侧边栏部分可以发现，有很多外部“友链”相关的网站按钮，保持着相似的尺寸。

尽管高度方面它们并不标准，数值浮动在50-200区间，越高更偏向于广告；另也有如图下的“赤川花火”，便采用了创意化的突破行高设计，当然，这需要网站方面的维护者提供协助。

但至少在宽度方面，它们基本保持了一致的211宽度。
也就是说，这至少是某种程度的约定俗成的标准。

继续在互联网上搜寻这个尺寸的搜索结果，便发现了另一个日本地方政府网站的链接页面。

除了上述的120、200尺寸之外，还有一个234宽度的尺寸：

因此我便继续搜寻234尺寸与88×31相关的搜索结果，
这一下就丰富很多了，因为维基百科就有用户贡献的横幅与按钮：

通过维基百科的引用，我寻找到如下页面：IAB的网站广告尺寸规范。

至此，我们发现了88×31的「万物起源」，而且还有很多独特的尺寸。
可以见到，它的正式规范名称被描述为Micro Bar。
同时，这个规范也解释了为什么日本网站习惯将这些按钮称之为「バナー」而非「ボタン」了，毕竟正名便是 Banner 的说。

IAB广告单元尺寸规范

参见：
https://web.archive.org/web/20021016165801/http:/www.iab.net/standards/adunits.asp

以下是上图中的规范标准的描述文字（机翻）

互动营销单元

IAB 新一轮自愿标准指南包含七种新的互动营销单元 (IMU) 广告格式：两种垂直单元和五种大型矩形单元。这些新的自愿标准指南将加入 IAB 现有的推荐指南体系。目前，网络发布商正在引入这些广告单元，旨在帮助营销人员增强互动性，并拓展在线信息的创意表达。IAB 广告单元工作组将每半年召开一次会议，评估现有广告单元的有效性；审查拟议的新广告单元；并酌情发布更新的自愿标准指南。

也就是说，88×31可以直接被描述为「微型条幅」

简而言之，这应该是现可查阅为数不多关于网站按钮尺寸的规范化资料，这如同PD协议充电器的电压挡位、机架的单元尺寸，甚至更像现实生活中的门店招牌与广告牌。

这其中包括了160×600这样的巨型尺寸
（在当时，主流的电脑分辨率普遍在800×600至1024×768左右，在寸土寸金的预览窗口下，这是可以占据“整个屏幕”的大型广告牌）

当然，这个标准也奠定了那些广告联盟所采用的尺寸标准。

不过要注意的是这是一个自愿标准指南，它不是强制性的推行方案，只是一种倡导；
日本网站所采用的200×60，也只能推测是从234×60的IAB标准裁剪而来；并且现代200×60的设计往往还考虑到移动设备的显示，排版设计所考虑到的DPI标准也明显不太一样。

但能知道的是，这样的超链接模式，依然是至今许多日本网站传承下来的一种约定俗成。

总结

通过IAB广告单元尺寸规范的标准，
我们可以了解到88×31及其相关Web按钮/条幅尺寸的来龙去脉。
日本的标准稍有缩减并且不一致，但极其相似，也可推测衍生自该标准修改而来。

景之域在此前也添加了相关的按钮样式，可供参考：

目前要使用这种链接图片，需要手动复制图片链接。
使用2x需要手动指定width与height的HTML代码参数。稍后，我会更新复制代码。同时，也在链接页面更新了「按钮墙」的版块，可以查看到其他人的88×31 Web按钮。

来源

IndieWeb使网络上的网站开放化而不受MEGA·CORP（大型企业）约束，而Webmention正是其中让网站之间跨站交流的方式之一，也是加入IndieWeb运动需要的方式之一。

Webmention可以视作为一种高级的Pingback/Trackback，
至少，在WordPress上表现是这样，后台处理就是当作Pingback/Trackback高级评论显示。是的，WordPress可以通过安装插件来支持Webmention，WP作为博客业界的行业标准，仍然是值得参考的。

习惯了现在的社交网络、尤其是基于手机app交互的社交网络，可能并不理解IndieWeb及其相关技术，则请假设现在的时间是2010年代。
IndieWeb技术的绝大多数操作及其相关应用还是用电脑交互比较合适，
事实上，这个技术也是在2010年代初期流行起来的提要方式。

举例来说，你正在阅览「文章A」，同时你有一个自己的博客网站，

为了评论「文章A」，你会在自己的博客上写一篇「文章B」，
并在你的「文章B」中添加「文章A」的引用URL超链接，然后发布。

将你刚刚写好的「文章B」的URL，回到「文章A」并填入评论区下方的Webmentions发送处（Ping），等待提示ping送达即可完成Webmentions提及回复。

随后，这个回复会像Pingback/Trackback一样，送达至站主的评论管理后台，经过审核批准过后，就可以显示在「文章A」的评论区下方。

流程如下：

1. 博客A在自己的博客写了文章
2. 博客B引用了A的文章
3. 博客B提醒博客A有关文章引用的事宜
4. 博客A确认自己的文章链接被博客B引用
5. 审核过后，博客B的文章摘要将显示在博客A的评论区下方。

如果有用过Tumblr这样的非同步评论式网站，那么或许会理解。
（Tumblr的转贴实际上是复制转载，并不与原文同步，只是形式相似。并且Tumblr的回复结构也不原生支持Webmentions，需要额外的评论区组件支持，更像是下文要提到的静态网站）
其实就算是我也不太习惯Webmention以及Tumblr这样的设定。

就效果而言，它确实是一种更高级的Pingback/Trackback，与这两者不同的区别是，Webmention提及的方式会在评论区显示网站的作者、具体摘要，格式更像评论，而不仅仅只有一个URL通知。

这种方式非常适合多用户站点、尤其是2010年代初的社交网络。那还是个多人博客尚且流行、大公司不收紧API的年代……

而且，说起社交网络，它确实支持通过bird.gy这样的在线服务，跟SNS社交网络站点进行桥接，也能实现Webmention提及评论的效果，而且还会显示成社交网络帖子。

目前bird.gy主要支持各类Fediverse站点（以前有推特，但可惜寄了；当然，可以把Mastodon或Bluesky当作推特的替代）
这需要站点本身支持microformats2微格式或解析API，所以不是所有网站都可以这么实现。

中国的主流社交网络自然是不支持的。不过建立在中国境内的Fediverse服务器，则取决于是否能够与brid.gy建立通讯交换信息。同样地，在局域网内自然是没有办法的（就像WordPress手机app登入时会从Automattic那里验证服务器信息，非80或443死活登不上）

另外，静态博客等不具备程序执行能力的网站空间，也可以通过 webmention.io 这一服务实现中介，只是通知和确认工作，将交由第三方的webmention.io进行处理，就像秘书或经纪人一样，而不是服务器软件自处理点对点通讯了。

这需要在静态博客添加验证自己的代码，以及基于JavaScript的引用评论显示。而且博客本身不具备处理能力，如果想发送新回复，要么是人工操作、要么就是第三方中介通过Feed等方式自动抓取了。

除了评论之外，Webmention似乎还能支持点赞的反馈。

不过实话说，由于实现问题与“Blog本身的用途定位”，效果不佳：IndieWeb的点赞操作本质上是帖子或者报文信息的一种，但博客系统没有统一的点赞规范，何况、在博客用途下，给别人的文章点赞还要去自己的博客发帖，简直是多此一举……

使得访客在博客上看到的效果是这样的：

文章 – 我喜欢了网上的一个帖子 by 博客作者

（Orz）

无论是实现效果还是多数博主的情理考量，
显然回复一些文字都显得更有意义一些……

总结：

如果你的博客是WordPress这样的动态博客，那大概实用性是不如Pingback和Trackback的——甚至实测因为WordPress上Webmention的插件实现问题、导致很容易被WP的评论系统，当成“没有填写电子邮件的垃圾评论”误判。（囧）

webmention.io 的确是一种让静态博客实现评论交流、并且加入IndieWeb开放化网站运动的选择之一。我自己不用静态博客、也不太认可这种托管哲学，奈何静态网站确实只能通过依靠第三方的方式存储交流数据。

WP接入Webmention主要以接收通知为主。
要想发送仍然需要自行去对方网站通知。

另外，WP本身支持Pingback与Trackback，后两者也足够好用；
但因为安全问题不是所有网站都会开启。换句话说Pingback跟Trackback都不开的站点，要想通过Webmention通知博主，就更加没戏了。

若不是为了接入类似于社交网络的IndieWeb环境，就最终目的来说，直接在评论里放个自己文章的链接并提醒原博主，其实也差不多，信息依然是可以传达的。

Webmention以及IndieWeb更像是为了奠基社交网站环境规范而做出的一种形式主义。尽管博客这样做确实是略显多余。但像Fediverse这样的社交网络的跨站回复方式，也是离不开Webmention的启迪。

若仍是感到困惑，不妨亲自实践一番，
或前往 IndieWeb 网站寻求帮助。

参考：

• 透過 webmention 來搜集 blog 的社群迴響 https://jason-memo.dev/posts/webmention/
• webmention测试 https://telegraph.p3k.io/
• hugo实现webmention https://discourse.gohugo.io/t/a-webmention-implementation-for-hugo/27987/2
• 给博客添加webmention https://taxodium.ink/add-webmention-to-blog.html
• Webmention 简明指南 https://www.geedea.pro/article/webmention/

来源