Guide étape par étape pour afficher les interactions Webmention sur Bear Blog-js tutoriel-php.cn

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

Barbara Streisand

Libérer： 2024-11-03 15:15:02

original

643 Les gens l'ont consulté

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 :

Votre site Web doit être configuré pour utiliser le service Webmention.io.
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"));
}

Copier après la connexion

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2261

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2396

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2010

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...