recherche

Maison >interface Web >js tutoriel >Guide étape par étape pour afficher les interactions Webmention sur Bear Blog

Guide étape par étape pour afficher les interactions Webmention sur Bear Blog

Barbara Streisand
Barbara Streisandoriginal
2024-11-03 15:15:02642parcourir

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

Cet article montre comment utiliser l'API Webmention.io pour afficher toutes les interactions que les gens ont eues avec vos articles de blog.

Vous aurez besoin de deux choses pour que cela fonctionne :

  1. Votre site Web doit être configuré pour utiliser le service Webmention.io.
  2. Vous aurez besoin d'un peu de JavaScript personnalisé pour afficher les interactions sous chaque article de blog.

La configuration de Webmention.io elle-même sort du cadre de cet article, car ce site Web fournit déjà des instructions détaillées.

Maintenant, passons au JavaScript personnalisé dont vous aurez besoin.

Le code Javascript

Vous trouverez ci-dessous le code JavaScript complet. J'expliquerai le fonctionnement de chaque partie après le code.

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

La logique principale est dans la fonction fetchInteractions(), qui accepte un paramètre : le texte à afficher comme en-tête de toutes les interactions. Par défaut, le texte d'en-tête est « Interactions », mais vous pouvez le personnaliser en définissant un attribut data-interactions dans le champ