Panduan Langkah demi Langkah untuk Menunjukkan Interaksi Webmention di Blog Bear

Siaran ini menunjukkan cara menggunakan API Webmention.io untuk memaparkan semua interaksi yang dilakukan oleh orang ramai dengan catatan blog anda.

Anda memerlukan dua perkara untuk membuat ini berfungsi:

1. Tapak web anda mesti disediakan untuk menggunakan perkhidmatan Webmention.io.
2. Anda memerlukan sedikit JavaScript tersuai untuk menunjukkan interaksi di bawah setiap catatan blog.

Menyediakan Webmention.io itu sendiri adalah di luar skop siaran ini, kerana tapak web ini telah menyediakan arahan terperinci.

Sekarang, mari beralih kepada JavaScript tersuai yang anda perlukan.

Kod JavaScript

Di bawah ialah kod JavaScript lengkap. Saya akan menerangkan cara setiap bahagian berfungsi selepas kod.

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

Logik utama adalah dalam fungsi fetchInteractions(), yang menerima satu parameter: teks untuk dipaparkan sebagai pengepala untuk semua interaksi. Secara lalai, teks pengepala ialah "Interaksi", tetapi anda boleh menyesuaikannya dengan menetapkan atribut interaksi data pada tag.

Di bahagian atas, terdapat pernyataan if khusus untuk blog Bear yang memastikan kod ini hanya berjalan pada halaman yang mengandungi catatan blog.

Fungsi fetchInteractions() mendapatkan semula interaksi khusus pada halaman semasa menggunakan document.URL. Titik akhir API Webmention yang digunakan di sini didokumenkan pada halaman utama Webmention.io.

Elemen div baharu dicipta (disimpan dalam interaksi pembolehubah) untuk menahan semua interaksi. Untuk setiap elemen anak dalam data yang diambil, div berasingan dibuat dengan butiran interaksi tunggal (disimpan dalam interaksi berubah). Data kanak-kanak ini mengisi templat HTML yang memaparkan pengarang, tarikh dan kandungan setiap interaksi.

Fungsi setContent() membantu memformat kandungan berdasarkan jenis interaksi. Pada masa ini ia menyokong tiga jenis: balasan (dengan teks), suka dan siaran semula, masing-masing menunjukkan teks berbeza bergantung pada jenis.

Akhir sekali, dalam fungsi fetchInteractions(), elemen interaksi disisipkan betul-betul di bawah elemen borang undian naik, yang juga khusus untuk blog Bear.

Dan itu sahaja! Dengan persediaan ini, anda boleh menunjukkan interaksi dengan mudah pada catatan blog anda. Selamat berblog!

Atas ialah kandungan terperinci Panduan Langkah demi Langkah untuk Menunjukkan Interaksi Webmention di Blog Bear. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!