Melompat ke Webment dengan NextJS (atau tidak)

Webmention, cadangan W3C yang terakhir dikemas kini 12 Januari 2017, adalah satu mekanisme mudah untuk memberitahu URL apabila ia disebutkan di laman web lain. Sebaliknya, ia membolehkan tapak menerima pemberitahuan apabila disebut di tempat lain. Pada asasnya, ia mengubah laman web anda menjadi hab media sosial yang aktif, memudahkan komunikasi dari pelbagai platform (Twitter, Instagram, Mastodon, dan lain -lain).

Melaksanakan webmentasi berbeza; Pengguna WordPress dengan mudah boleh memasang plugin, sementara yang lain mungkin memerlukan lebih banyak konfigurasi manual. Mari kita meneroka prosesnya.

Pelan pelaksanaan

1. Mewujudkan titik akhir web.
2. Mengubah interaksi media sosial ke dalam web.
3. Mengintegrasikan sebutan ke laman web/aplikasi anda.
4. Konfigurasikan Webmentsi Outbound.

Nasib baik, beberapa perkhidmatan memudahkan proses ini. Langkah ketiga memerlukan lebih banyak usaha, tetapi saya akan memperincikan pendekatan saya di atila.io.

Blog yang berasaskan Server Server, yang berasaskan pelayan menggunakan permintaan web pelanggan, mudah disesuaikan dengan aplikasi React dan aplikasi JavaScript yang lain.

Langkah 1: Menentukan titik akhir web

Untuk menerima Webmentsi, anda boleh membuat skrip tersuai atau menggunakan perkhidmatan seperti Webmention.io (kaedah pilihan saya).

Webmention.io adalah percuma; Anda hanya perlu mengesahkan pemilikan domain. Saya menggunakan atribut rel="me" yang menghubungkan laman web saya ke profil media sosial saya. Pautan tunggal cukup, tetapi saya memasukkan semua akaun saya.

 <a href="https://www.php.cn/link/069802d489a7b73dd31fd13b0f2cd690" rel="me noopener noreferrer" target="_blank">
  @Atilafassina
</a>

Ini memerlukan pautan timbal balik dari profil Twitter saya kembali ke laman web saya. Selepas pengesahan di Webmention.io, tambahkan URL laman web anda. Ini memberikan titik akhir web anda. Sertakan ini<link> Tag di laman web anda Untuk mengumpul sebutan:

<link href="https://webmention.io/%7Buser%7D/webmention" rel="webmention">
<link href="https://webmention.io/%7Buser%7D/xmlrpc" rel="pingback">

Ganti {user} dengan nama pengguna webmention.io anda.

Langkah 2: Memproses interaksi media sosial

Walaupun webment sudah siap, penggunaannya terhad. Menukar interaksi media sosial adalah penting. Bridgy, perkhidmatan percuma, menghubungkan kandungan bersindiket dan mengubahnya menjadi webment. Menggunakan SSO, sambungkan pelbagai profil anda.

Langkah 3: Memaparkan Webmentsi di Laman Web Anda

Langkah ini melibatkan pengambilan dan memaparkan data webmention. Kami akan memecahkannya ke peringkat: mengira sebutan, mengambil sebutan, dan mengintegrasikan dengan NextJS (pilihan).

Mengira Webmenti

Webmention.io API memberikan kiraan sebutan. Sambutannya berstruktur seperti berikut:

 taipkan tmentionscountresponse = {
  kiraan: nombor;
  Jenis: {
    Seperti: nombor;
    sebutkan: nombor;
    Balas: nombor;
    repost: nombor;
  };
};

Ini diproses untuk:

 taipkan tmentionscount = {
  sebutan: nombor;
  Suka: nombor;
  Jumlah: Nombor;
};

Titik akhir ialah: https://webmention.io/api/count.json?target=${post_url} . Max Böck dan Swyx menggabungkan suka dengan repost dan menyebut dengan balasan.

 const getmentionscount = async (posturl: string): janji<tmentionscount> => {
  const resp = menunggu pengambilan (`https://webmention.io/api/count.json?target=$ {posturl}/`);
  const {type, count} = menunggu resp.json ();

  kembali {
    suka: jenis.like type.repost,
    sebutan: type.mention type.reply,
    Jumlah: kiraan,
  };
};</tmentionscount>

Mengambil Webmenti

https://webmention.io/api/mentions endpoint adalah paginated, menerima page , per-page , dan parameter target . Tanggapan yang berjaya merangkumi pelbagai links yang menyebut:

 taipkan tmention = {
  Sumber: String;
  Disahkan: Boolean;
  verified_date: string;
  ID: nombor;
  Swasta: Boolean;
  Data: {
    Pengarang: {
      Nama: String;
      URL: String;
      Foto: String;
    };
    URL: String;
    Nama: String;
    Kandungan: String;
    Diterbitkan: String;
    diterbitkan_ts: nombor;
  };
  aktiviti: {
    Jenis: 'Pautan' | 'Balas' | 'repost' | 'seperti';
    Kalimat: String;
    senten_html: string;
  };
  Sasaran: String;
};

Permintaan pengambilan:

 const getmentions = async (
  Halaman: String,
  PostSperpage: Nombor,
  POSTURL: String
): Janji  => {
  const resp = menunggu pengambilan (
    `https://webmention.io/api/mentions?page=$ {page} & per-page = $ {postsperpage} & target = $ {posturl}`
  );
  senarai const = menunggu resp.json ();
  return list.links;
};

Integrasi NextJS (Pilihan)

NextJS menawarkan getStaticProps , getStaticPaths , dan getServerSideProps untuk pengambilan data. Saya memilih pendekatan pihak klien menggunakan SWR untuk caching dan pengurusan negeri.

Memaparkan kiraan web

Komponen MentionsCounter memaparkan kiraan:

 // ... (penyataan dan jenis import) ...

const MentionsCounter = ({PostUrl}) => {
  const {t} = useTranslation ();
  const {data = {}, error} = useswr (posturl, getmentionscount);

  jika (ralat) {
    kembali<errormessage> {t ('biasa: errorwebmentions')}</errormessage> ;
  }

  const {likes = '-', Mentions = '-'} = data;

  kembali (
    <mentioncounter>
      <li>
        <heart title="Suka"></heart>
        <counterdata>{Number.isnan (suka)? 0: suka}</counterdata>
      </li>
      <li>
        <comment title="Sebutan"></comment>
        <counterdata>{Number.isnan (sebutan)? 0: sebutan}</counterdata>
      </li>
    </mentioncounter>
  );
};

Memaparkan sebutan

Komponen Webmentions memaparkan sebutan sebenar, menggunakan Negeri untuk penomboran dan useEffect untuk mengambil:

 // ... (penyataan dan jenis import) ...

const Webmentions = ({posturl}) => {
  const {t} = useTranslation ();
  const [halaman, setPage] = useState (0);
  const [menyebut, tambahan] = useState ([]);

  useeffect (() => {
    const fetchmentions = async () => {
      const agahan hati = menanti getmentions (halaman, 50, posturl);
      Tambahan ((Mentions) => [... menyebut, ... usia]);
    };
    perolehan ();
  }, [halaman]);

  kembali (
    
      {Mentions.map ((sebutan, indeks) => (
        <mention key="{mention.data.author.name}">
          <authoravatar lazy src="%7Bmention.data.author.photo%7D"></authoravatar>
          <mentioncontent>
            <mentiontext activity="{mention.activity.type}" data="{mention.data}"></mentiontext>
          </mentioncontent>
        </mention>
      ))}
      {Mentions.length> 0 && (
        <morebutton onclick="{()"> setPage (halaman 1)} type = "Button">
          {t ('biasa: lebih')}
        </morebutton>
      )}
    >
  );
};

Langkah 4: Mengendalikan sebutan keluar

Webmention.App, dengan token API dan webhook, memudahkan sebutan keluar. Sebagai alternatif, pakej wm CLI Remy Sharp boleh digunakan sebagai skrip selepas membina. Microformats (H-Entry dan H-Card) adalah penting untuk sebutan keluar yang lebih kaya.

Kesimpulan

Panduan ini memberikan gambaran menyeluruh mengenai pelaksanaan webmention. Ingatlah untuk berkongsi siaran ini jika ia membantu!

Rujukan

• Menggunakan web yang disebutkan di laman statik (Max Böck)
• Webmentsi Side Pelanggan (SWYX)
• Hantar Webmentsi Keluar (Remy Sharp)
• Webmention pertama anda (Aaron Parecki)

Bacaan lanjut

• Spesifikasi W3C Webmention (cadangan)
• Webmention.io
• Webmention.App
• Webmentsi Outbound CLI
• Bridgy
• MicroforMats.org
• Indieweb

Atas ialah kandungan terperinci Melompat ke Webment dengan NextJS (atau tidak). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!