在小熊博客上显示网络提及互动的分步指南

这篇文章展示了如何使用 Webmention.io API 来显示人们与您的博客文章的所有互动。

您需要两件事才能完成这项工作：

1. 您的网站必须设置为使用 Webmention.io 服务。
2. 您需要一些自定义 JavaScript 来显示每篇博文下方的交互。

设置 Webmention.io 本身超出了本文的范围，因为该网站已经提供了详细的说明。

现在，让我们继续讨论您需要的自定义 JavaScript。

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中文网其他相关文章！