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