您现在可以在与Jesse编码的博客文章上发表评论！几年前，我关闭了评论，因为我得到了大量的垃圾邮件。但是最近，与my return to social media一起，我决定整合Mastodon，以使人们有一种评论并与我的文章进行互动的方法。
最初，我不确定如何实现这一目标。 Mastodon有大量的服务器，Mastodon搜索只能搜索主题标签，那么我怎么知道有人是否对我的文章发表评论？我将如何将其集成到我的网站上？
我环顾了其他一些博客如何处理此问题，并遇到了网络元素，尤其是Webmention.io。这是用于在Web服务器上传达交互的Web标准！完美！
我天真地假设Mastodon会在任何人喜欢，提升或回复包含指向我网站链接的帖子的任何人时，会自动撞到我的服务器。但是，a Mastodon doesn't do that for privacy reasons（可以理解）。
幸运的是，我不是第一个遇到这个问题的人，因此有一个免费服务可以解决此问题。如果您注册了brid.gy，则可以链接您的社交媒体帐户，包括Mastodon和Brid.gy，只要您的一篇帖子包含指向您的网站的链接，并且人们回复，提升或喜欢您的网站时，都会自动将网站构成发送到您的网站。邮政。本质上，您的Mastodon帖子成为博客文章中所有互动的锚点。
掌握了这两项服务，您可以按照我的方式将Mastodon集成到您的网站上：
1.登录webmention.io。
您需要使用您的网站URL和GitHub帐户登录。另外，您的博客需要使用<a href="https://github.com/jesseskinner" rel="me">或<link href="https://github.com/jesseskinner" rel="me">链接到该GitHub配置文件，以证明您拥有该网站。
2.在您的博客中添加Webmention标签
登录时，请转到https://webmention.io/settings。设置下，您将看到这两个链接标签：
<link rel="webmention" href="https://webmention.io/username/webmention" />
<link rel="pingback" href="https://webmention.io/username/xmlrpc" />
复制这些并将它们粘贴到您的博客上的<head>中。这些将告诉其他服务（例如Brid.gy），他们需要为您的帖子发送网站。
3.在brid.gy上链接您的mastodon帐户3
转到fed.brid.gy，如果您像我一样，您需要单击“交叉点到Mastodon帐户”，以便它与您现有的Mastodon帐户集成。
4.在Mastodon上发布指向博客文章的链接
尝试链接到您有关Mastodon的最新博客文章。如果您已经在一段时间之前就这样做了，Brid.gy将扫描您的帖子寻找链接。您也可以将其馈送到特定的Mastodon帖子中，以便它发现它。
brid.gy将定期对您的帐户进行调整，以寻找这些帖子上的新互动，并将将任何新的收藏夹，提升或答复发送到Webmention.io。
请注意，您的帖子不算为网络元 - 只有该帖子上的交互。但是，您可以回复自己的帖子，以触发网络攻击。
当我设置此功能时，我登录了Brid.gy和Webmention.io，单击Brid.gy上的“立即民意调查”按钮，并热切地寻找互动以显示。您在这里也必须有一些耐心，因为两种服务都有一些延迟。
一旦看到Webmention.io上显示了一些提及，就可以将它们渲染到您的博客上。
5.将网站添加到您的网站上
这是较棘手的部分。您需要击中webmention.io API，并为您的博客文章提供提及。如果需要，您可以执行此服务器端。我的博客是静态的，所以我需要做这个客户端。
由于结果是分页的，因此您一次只能返回100。我编写了此功能，以帮助我立即检索所有页面，并将结果分为按时间顺序排序：
async function getMentions(url) {
let mentions = [];
let page = 0;
let perPage = 100;
while (true) {
const results = await fetch(
`https://webmention.io/api/mentions.jf2?target=${url}&per-page=${perPage}&page=${page}`
).then((r) => r.json());
mentions = mentions.concat(results.children);
if (results.children.length < perPage) {
break;
}
page++;
}
return mentions.sort((a, b) => ((a.published || a['wm-received']) < (b.published || b['wm-received']) ? -1 : 1));
}
然后，我使用此结果来撤出四件事：收藏夹，提升，答复，以及指向原始帖子的链接，如果我想在其中将其他访问者发送到我的博客，如果他们想“讨论此文章Mastodon”。这是这样的外观：
let link;
let favourites;
let boosts;
let replies;
const mentions = await getMentions(url);
if (mentions.length) {
link = mentions
// find mentions that contain my Mastodon URL
.filter((m) => m.url.startsWith('https://toot.cafe/@JesseSkinner/'))
// take the part before the hash
.map(({ url }) => url.split('#')[0])
// take the first one
.shift();
// use the wm-property to make lists of favourites, boosts & replies
favourites = mentions.filter((m) => m['wm-property'] === 'like-of');
boosts = mentions.filter((m) => m['wm-property'] === 'repost-of');
replies = mentions.filter((m) => m['wm-property'] === 'in-reply-to');
}
当然，您应该用自己的链接替换指向我的个人资料的链接。我正在接受第一个提及（按时间顺序排序之后）正在与我的一篇帖子进行交互，并链接到该帖子URL。
有了手头的人，您将拥有为博客提供答复，提升和收藏夹所需的一切。我的方法是渲染每个人的化身的化身，这些人都促进或支持我的帖子，以及所有答复。
要注意的一件事是每个答复的内容是HTML。为了安全（偏执狂），我正在通过sanitize-html运行HTML，以确保没有人可以向我的网站注入粗略的HTML。
6.允许人们分享帖子而不提及
对于没有任何提及的任何帖子，我添加了一个不同的按钮，“在mastodon上共享”。当您单击它时，它将运行此代码，该代码会提示您为Mastodon服务器（受Advent of Code的共享功能的启发）：
const server = prompt('Mastodon Instance / Server Name?');
if (server) {
// test if server looks like a domain
if (!server.match(/^[a-z0-9-]+\.[a-z0-9-]+$/)) {
alert('Invalid server name');
return;
}
const text = `"${post.title}" by @JesseSkinner@toot.cafe\n\n${url}`;
window.open(`https://${server}/share?text=${encodeURIComponent(text)}`);
}
是的Mastodon评论！
我对结果非常满意。为了在我的旧博客文章中添加一些占位符，我发布了一些链接到最近的一些帖子，因此他们的互动将有一个居住的地方。对于较旧的帖子，我只是依靠共享功能。
我正在考虑实施一些服务器端功能以替换Webmention.io或Brid.gy，以便将其提及的生活在我的数据库中，而不是依靠可能有一天会消失的第三方服务。我想我还可以通过将Mastodon Post URL与每个博客文章关联，然后使用服务器的Mastodon API定期检查交互和答复来跳过网络攻击过程。也许它可以登录到我的服务器并收听通知。但是目前，这真的很好。
因此，从现在开始，每当我写一篇新的博客文章时，我肯定会在Mastodon上分享，并为读者提供一个问题或讨论文章的地方。检查this blog post的结尾以查看所有外观，并确保喜欢，提升或回复my Mastodon post，以便您也出现在页面上！