使用Mastodon向您的静态博客添加评论

静态网站生成器的最大缺点之一是它们是静态的，不能包含评论。

有多种解决方案可以解决此问题。您可以添加一个类似Disqus的第三方博客引擎，但是这样做的缺点在于，它包含一个第三方工具，该工具在您的网站中存在不良的隐私记录。另一个解决方案是托管一个开源替代方案，但这是以更高的维护负担为代价的。我们必须使用静态站点生成器来避免必须托管数据库。

我认为，更好的解决方案是利用Mastodon和Fediverse平台。 Mastodon是一个去中心化的社交网络，它使人们无需在同一台服务器上即可相互通信。它的灵感来自Twitter，但您没有写过推文，而是写了嘟嘟声。

发布文章时，现在只需要编写与文章相关的asimple嘟嘟链接。然后Mastodon有一个simpleAPI来获取嘟嘟的答案。这是我为Hugo支持的博客编写的代码，但是很容易适用于其他静态网站生成器。它将创建一个按钮来加载评论，而不是为每个访问者加载评论，从而减少了您的Mastodon服务器的负载。

{{with .Params.comments}}＆lt; div class =＆article-content＆＃34; ＆gt; ＆lt; h2＆gt;评论＆lt; / h2＆gt; ＆lt; p＆gt;您可以使用您的Mastodon帐户回复此＆lt; a href =＆＃34; https：// {{.host}} / @ {{.username}} / {{.id}}＆＃34; ＆gt;发布＆lt; / a＆gt;。 ＆lt; / p＆gt; ＆lt; p id =＆＃34; mastodon-comments-list＆＃34; ＆lt;＆lt;按钮ID =＆＃34; load-comment＆＃34; ＆gt;加载评论＆lt; /按钮＆gt;＆lt; / p＆gt; ＆lt; noscript＆gt;＆lt; p＆gt;您需要JavaScript才能查看评论。 ＆lt; / p＆gt;＆lt; / noscript＆gt; ＆lt;脚本src =＆＃34; /assets/js/purify.min.js" ＆gt;＆lt; /脚本＆gt; ＆lt;脚本类型=＆＃34; text / javascript＆＃34; ＆gt;文件。 getElementById（＆＃34; load-comment＆＃34;）。 addEventListener（＆＃34; click＆＃34;，函数（）{获取（＆＃39; https：// {{.host}} / api / v1 / statuses / {{.id}} / context＆＃39;）然后（函数（response）{返回响应。json（）;}）。然后（函数（data）{if（数据[＆＃39; descendants＆＃39;]＆amp;＆amp; Array。isArray（数据[＆＃ 39; descendants＆＃39;]＆amp;＆amp;数据[＆descendants＆＃39;]长度＆gt; 0）{document。getElementById（＆＃39; mastodon-comments-list＆＃39;）。innerHTML =数据[＆＃39; descendants＆＃39;]。reduce（function（prev，Reply）{mastodonComment =`＆lt; div class =＆＃34; mastodon-comment＆＃34;＆gt;＆lt; div class =＆＃34; avatar＆＃34;＆gt; img src =＆＃34; $ {回复。account。avatar_static}＆＃34; height = 60 width = 60 alt =＆＃34;＆＃34;＆lt; / div＆gt; ＆lt; div class =＆＃34; content＆＃34;＆gt;＆lt; div class =＆＃34; author＆＃34;＆gt;＆lt; a href =＆＃34; $ {答复帐户。url}＆＃34 ; rel =＆＃34; nofollow＆＃34; $ {回复帐户。用户名}＆lt; span class =＆＃34; disabled＆＃34; $ {回复acco恩。 acct}＆lt; / span＆gt; ＆lt; / a＆gt; ＆lt; a class =＆＃34; date＆＃34; href =＆＃34; $ {答复。 uri}＆＃34; rel =＆＃34; nofollow＆＃34; $ {答复。 created_at。 substr（0，10）}＆lt; / a＆gt; ＆lt; / div＆gt; ＆lt; div class =＆＃34; mastodon-comment-content＆＃34;＆gt; $ {答复。内容}＆lt; / div＆gt; ＆lt; div class =＆＃34; mastodon-comment-footer＆＃34;＆gt; ＆lt; / div＆gt; ＆lt; / div＆gt; ＆lt; / div＆gt;`;返回prev + DOMPurify。消毒（mastodonComment）; }，＆＃39;＆＃39; ）; } else {文档。 getElementById（＆＃39; mastodon-comments-list＆＃39;）。 innerHTML =＆＃34;＆lt; p＆gt;未找到评论＆lt; / p＆gt;＆＃34; ; }}）; }）; ＆lt; /脚本＆gt; ＆lt; / div＆gt; {{end}}

这段代码使用DOMPurify来清理输入，因为从第三方源加载数据而不先清理它们并不是一个好主意。

现在，在我的博客文章中，我可以将以下信息添加到myfrontmatter中，以使评论神奇地出现。