这篇文章展示了如何使用 Webmention.io API 来显示人们与您的博客文章的所有互动。
您需要两件事才能完成这项工作：
设置 Webmention.io 本身超出了本文的范围，因为该网站已经提供了详细的说明。
现在，让我们继续讨论您需要的自定义 JavaScript。
下面是完整的 JavaScript 代码。我将在代码之后解释每个部分的工作原理。
if (document.querySelector("body").classList.contains("post")) {
function setContent(child) {
switch (child["wm-property"]) {
case "in-reply-to":
return child.content?.text;
case "like-of":
return "liked this";
case "repost-of":
return "reposted this";
default:
return "interacted with this post in an unknown way";
}
}
async function fetchInteractions(headerTitle) {
const response = await fetch("https://webmention.io/api/mentions.jf2?target=" + document.URL);
const data = await response.json();
if (data && data.children.length > 0) {
const interactions = document.createElement("div");
interactions.innerHTML = `<h3>${headerTitle ?? "Interactions"}</h3>`;
for (const child of data.children) {
const interaction = document.createElement("div");
interaction.innerHTML = `
<p>
<strong><a href="${child.author.url}" target="_blank">${child.author.name}</a></strong>
<small> - ${new Date(child["wm-received"]).toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
})}</small>
</p>
<blockquote>${setContent(child)}</blockquote>
`;
interactions.appendChild(interaction);
}
const upvoteForm = document.getElementById("upvote-form");
upvoteForm.parentNode.insertBefore(interactions, upvoteForm.nextSibling);
}
}
fetchInteractions(document.currentScript.getAttribute("data-interactions"));
}
主要逻辑位于 fetchInteractions() 函数中，该函数接受一个参数：显示为所有交互的标题的文本。默认情况下，标题文本为“Interactions”，但您可以通过在 <script> 上设置 data-interactions 属性来自定义它。标签。</script>
顶部有一个特定于 Bear 博客的 if 语句，确保此代码仅在包含博客文章的页面上运行。
fetchInteractions() 函数使用 document.URL 检索特定于当前页面的交互。此处使用的 Webmention API 端点记录在 Webmention.io 主页上。
创建一个新的 div 元素（存储在变量交互中）来保存所有交互。对于检索到的数据中的每个子元素，将使用单个交互的详细信息（存储在变量交互中）创建一个单独的 div。此子数据填充一个 HTML 模板，显示每次交互的作者、日期和内容。
setContent() 函数有助于根据交互类型格式化内容。目前支持三种类型：回复（带文字）、点赞和转发，每种类型根据类型显示不同的文字。
最后，在 fetchInteractions() 函数中，interactions 元素被插入到 upvote-form 元素的正下方，这也是小熊博客特有的。
就是这样！通过此设置，您可以轻松地在博客帖子上显示交互。快乐写博客！
以上是在小熊博客上显示网络提及互动的分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！
