我的博客当前托管在weblog.lol上，该博客允许在Markdown中格式化的帖子中使用git管理的简单且可配置的博客。我想将网络构成添加到我的博客中，到目前为止，该博客还不包括构建步骤。为了实现这一目标，我在同一next.js应用程序中添加了一个中介API端点。
Robb有a handy write up on adding webmentions to your website，我首先遵循的是，将适当的mastodon链接添加到我的博客模板，注册Webmentions.up和Bridgy，然后将适当的标签添加到我的模板文档的<head>中以进行记录。
接下来，这只是一个从网络端端点呈现输出的问题。
我的next.js api看起来像这样：
export default async function handler(req: any, res: any) {
const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
const KEY_BLOG = process.env.API_KEY_WEBMENTIONS_BLOG_CORYD_DEV
const DOMAIN = req.query.domain;
const TARGET = req.query.target;
const data = await fetch(`https://webmention.io/api/mentions.jf2?token=${DOMAIN === 'coryd.dev' ? KEY_CORYD : KEY_BLOG}${TARGET ? `&target=${TARGET}` : ''}&per-page=1000`).then((response) => response.json())
res.json(data)
}
我有一对钥匙，具体取决于上述并提供域，尽管目前仅在我的博客上使用。我还支持通过target参数，但目前不利用它。
这在客户端被称为：
document.addEventListener('DOMContentLoaded', (event) => {
;(function () {
const formatDate = (date) => {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [month, day, year].join('-');
};
const webmentionsWrapper = document.getElementById('webmentions');
const webmentionsLikesWrapper = document.getElementById('webmentions-likes-wrapper');
const webmentionsBoostsWrapper = document.getElementById('webmentions-boosts-wrapper');
const webmentionsCommentsWrapper = document.getElementById('webmentions-comments-wrapper');
if (webmentionsWrapper && window) {
try {
fetch('https://utils.coryd.dev/api/webmentions?domain=blog.coryd.dev').then((response) => response.json()).then(data => {
const mentions = data.children;
if (mentions.length === 0 || window.location.pathname === '/') {
webmentionsWrapper.remove();
return;
}
let likes = '';
let boosts = '';
let comments = '';
mentions.map(mention => {
if (mention['wm-property'] === 'like-of' && mention['wm-target'].includes(window.location.href)) {
likes += `<a href="${mention.url}" rel="noopener noreferrer"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /></a>`
}
if (mention['wm-property'] === 'repost-of' && mention['wm-target'].includes(window.location.href)) {
boosts += `<a href="${mention.url}" rel="noopener noreferrer"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /></a>`
}
if (mention['wm-property'] === 'in-reply-to' && mention['wm-target'].includes(window.location.href)) {
comments += `<div class="webmention-comment"><a href="${mention.url}" rel="noopener noreferrer"><div class="webmention-comment-top"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /><div class="time">${formatDate(mention.published)}</div></div><div class="comment-body">${mention.content.text}</div></a></div>`
}
});
webmentionsLikesWrapper.innerHTML = '';
webmentionsLikesWrapper.insertAdjacentHTML('beforeEnd', likes);
webmentionsBoostsWrapper.innerHTML = '';
webmentionsBoostsWrapper.insertAdjacentHTML('beforeEnd', boosts);
webmentionsCommentsWrapper.innerHTML = '';
webmentionsCommentsWrapper.insertAdjacentHTML('beforeEnd', comments);
webmentionsWrapper.style.opacity = 1;
if (likes === '') document.getElementById('webmentions-likes').innerHTML === '';
if (boosts === '') document.getElementById('webmentions-boosts').innerHTML === '';
if (comments === '') document.getElementById('webmentions-comments').innerHTML === '';
if (likes === '' && boosts === '' && comments === '') webmentionsWrapper.remove();
});
} catch (e) {
webmentionsWrapper.remove();
}
}
})();
});
此JavaScript都是非常急切的 - 它验证了适当的DOM节点的存在，串联模板的HTML字符串，然后将它们注入目标的DOM元素。如果没有提及支持类型，则将删除容器节点。如果没有提及，则将删除整个节点。
Webmentions HTML外壳如下：
<div id="webmentions" class="container background-purple">
<div id="webmentions-likes">
<h2><i class="fa-solid fa-fw fa-star"></i> Likes</h2>
<div id="webmentions-likes-wrapper"></div>
</div>
<div id="webmentions-boosts">
<h2><i class="fa-solid fa-fw fa-rocket"></i> Boosts</h2>
<div id="webmentions-boosts-wrapper"></div>
</div>
<div id="webmentions-comments">
<h2><i class="fa-solid fa-fw fa-comment"></i> Comments</h2>
<div id="webmentions-comments-wrapper"></div>
</div>
</div>
，您在那里已加载了客户端并在发生时进行了更新。在我的帖子Automating (and probably overengineering) my /now page上有一个示例。