suchen

Heim >Web-Frontend >js-Tutorial >Schritt-für-Schritt-Anleitung zum Anzeigen von Webmention-Interaktionen auf Bear Blog

Schritt-für-Schritt-Anleitung zum Anzeigen von Webmention-Interaktionen auf Bear Blog

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 15:15:02655Durchsuche

Step-by-Step Guide to Show Webmention Interactions on Bear Blog

Dieser Beitrag zeigt, wie Sie die Webmention.io-API verwenden, um alle Interaktionen anzuzeigen, die Menschen mit Ihren Blogbeiträgen hatten.

Sie benötigen zwei Dinge, damit dies funktioniert:

  1. Ihre Website muss für die Nutzung des Webmention.io-Dienstes eingerichtet sein.
  2. Sie benötigen ein wenig benutzerdefiniertes JavaScript, um die Interaktionen unter jedem Blog-Beitrag anzuzeigen.

Das Einrichten von Webmention.io selbst liegt außerhalb des Rahmens dieses Beitrags, da diese Website bereits detaillierte Anweisungen bereitstellt.

Jetzt kommen wir zum benutzerdefinierten JavaScript, das Sie benötigen.

Der JavaScript-Code

Unten finden Sie den vollständigen JavaScript-Code. Ich erkläre nach dem Code, wie jeder Teil funktioniert.

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"));
}

Die Hauptlogik liegt in der Funktion fetchInteractions(), die einen Parameter akzeptiert: den Text, der als Kopfzeile für alle Interaktionen angezeigt werden soll. Standardmäßig lautet der Kopfzeilentext „Interaktionen“, Sie können ihn jedoch anpassen, indem Sie ein data-interactions-Attribut im