在小熊博客上顯示網絡提及互動的分步指南

這篇文章展示如何使用 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中文網其他相關文章！