Webmention, eine W3C -Empfehlung, die zuletzt am 12. Januar 2017 aktualisiert wurde, ist ein einfacher Mechanismus, um eine URL zu benachrichtigen, wenn sie auf einer anderen Website erw?hnt wird. Umgekehrt erm?glicht es einer Site, Benachrichtigungen zu erhalten, wenn sie an anderer Stelle erw?hnt werden. Im Wesentlichen verwandelt es Ihre Website in einen aktiven Social -Media -Hub und erleichtert die Kommunikation von verschiedenen Plattformen (Twitter, Instagram, Mastodon usw.).

Die Implementierung von Webments variiert; WordPress -Benutzer k?nnen Plugins problemlos installieren, w?hrend andere m?glicherweise mehr manuelle Konfiguration ben?tigen. Lassen Sie uns den Prozess untersuchen.

Implementierungsplan

1. Legen Sie einen Webmention -Endpunkt ein.
2. Verwandeln Sie Social -Media -Interaktionen in Webmentionen.
3. Integrieren Sie Erw?hnungen in Ihre Website/App.
4. Konfigurieren Sie Outbound -Webmentions.

Glücklicherweise vereinfachen mehrere Dienste diesen Prozess. Der dritte Schritt erfordert mehr Mühe, aber ich werde meinen Ansatz auf atila.io beschreiben.

Mein n?chstesJS-basiertes, serverseitig gerendertes Blog verwendet clientseitige Webmention-Anfragen, die sich leicht an andere React-Apps und JavaScript-Anwendungen anpassen k?nnen.

Schritt 1: Definieren des Webmention -Endpunkts

Um Webmentions zu empfangen, k?nnen Sie entweder ein benutzerdefiniertes Skript erstellen oder einen Dienst wie Webmention.io (meine ausgew?hlte Methode) verwenden.

Webmention.io ist kostenlos; Sie müssen das Domain -Besitz nur überprüfen. Ich habe ein rel="me" -attribut verwendet, das meine Website mit meinen Social -Media -Profilen verbindet. Ein einzelner Link reicht aus, aber ich habe alle meine Konten aufgenommen.

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

Dies erfordert einen wechselseitigen Link von meinem Twitter -Profil zurück zu meiner Website. Fügen Sie nach überprüfung auf Webmention.io Ihre Website -URL hinzu. Dies bietet Ihren Webmention -Endpunkt. Schlie?en diese ein<link> Tags auf Ihrer Webseite Ihrer Webseite Erw?hnungen sammeln:

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

Ersetzen Sie {user} durch Ihren Benutzernamen webentmention.io.

Schritt 2: Verarbeitung sozialer Medieninteraktionen

W?hrend die Webmentionen fertig sind, ist ihre Verwendung begrenzt. Die Umwandlung von Social -Media -Interaktionen ist entscheidend. Bridgy, ein kostenloser Service, verbindet syndizierte Inhalte und verwandelt ihn in Webmentions. Verbinden Sie Ihre verschiedenen Profile mit SSO.

Schritt 3: Anzeigen von Webmentions auf Ihrer Website

In diesem Schritt werden Webmention -Daten abgerufen und angezeigt. Wir werden es in Phasen zerlegen: Z?hlen von Erw?hnungen, Erw?hnungen und Integration in NextJs (optional).

Z?hlen von Webmentionen

Die API von Webmention.io bietet eine Anzahl von Erw?hnungen. Die Antwort ist wie folgt strukturiert:

 Typ tmentionsCountePreson = {{
  Graf: Nummer;
  Typ: {
    wie: Nummer;
    Erw?hnung: Nummer;
    Antwort: Nummer;
    Repost: Nummer;
  };
};

Dies wird verarbeitet zu:

 Typ tmentionsCount = {
  Erw?hnungen: Nummer;
  Likes: Nummer;
  Gesamt: Anzahl;
};

Der Endpunkt ist: https://webmention.io/api/count.json?target=${post_url} . Max B?ck und Swyx kombinieren Likes mit Reposts und Erw?hnungen mit Antworten.

 Const GetmentionsCount = Async (Posturl: String): Versprechen<tmentionscount> => {
  const resp = warte fetch (`https://webmention.io/api/count.json?target=$ {posturl}/`);
  const {type, count} = warte resp.json ();

  zurückkehren {
    Likes: type.ike type.repost,
    Erw?hnungen: type.mention type.REPLY,
    Gesamt: Z?hlen,
  };
};</tmentionscount>

Webentmentionen abrufen

Der Endpunkt https://webmention.io/api/mentions ist paginiert und akzeptiert page , per-page und target . Eine erfolgreiche Antwort enth?lt eine links von Erw?hnungen:

 Typ tmention = {
  Quelle: String;
  verifiziert: boolean;
  verifiziert_date: String;
  ID: Nummer;
  privat: boolean;
  Daten: {
    Autor: {
      Name: String;
      URL: String;
      Foto: String;
    };
    URL: String;
    Name: String;
    Inhalt: String;
    Ver?ffentlicht: String;
    ver?ffentlicht_ts: number;
  };
  Aktivit?t: {
    Typ: 'Link' | 'Antwort' | 'Repost' | 'wie';
    Satz: String;
    Satz_Html: String;
  };
  Ziel: String;
};

Die Fetch -Anfrage:

 Const Getmentions = Async (
  Seite: String,
  PostSPERPAGE: Nummer,
  Posturl: String
): Versprechen  => {
  const resp = warte abzufch (
    `https://webmention.io/api/mentions?page=$ {page} & pro-page = $ {postSperpage} & target = $ {posturl}`
  );
  const list = warte resp.json ();
  return list.links;
};

NextJS -Integration (optional)

NextJS bietet getStaticProps , getStaticPaths und getServerSideProps für das Abholen von Daten. Ich habe einen kundenseitigen Ansatz für SWR für Caching und State Management gew?hlt.

Anzeige der Webmention -Anzahl

Eine MentionsCounter zeigt die Anzahl an:

 // ... (Importanweisungen und Typen) ...

const m.scounter = ({posturl}) => {
  const {t} = useTranslation ();
  const {data = {}, error} = usewr (posturl, GetmentionsCount);

  if (Fehler) {
    zurückkehren<errormessage> {t ('Common: Fehlerwebmentionen')}}</errormessage> ;
  }

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

  zurückkehren (
    <mentioncounter>
      <li>
        <heart title="Mag"></heart>
        <counterdata>{Number.isnan (Likes)? 0: Likes}</counterdata>
      </li>
      <li>
        <comment title="Erw?hnungen"></comment>
        <counterdata>{Number.isnan (erw?hnt)? 0: Erw?hnungen}</counterdata>
      </li>
    </mentioncounter>
  );
};

Zeigen der Erw?hnungen

Eine Webmentions -Komponente zeigt die tats?chlichen Erw?hnungen an, wobei der Status für Pagination und useEffect for Abrufen verwendet wird:

 // ... (Importanweisungen und Typen) ...

const webentmentions = ({posturl}) => {
  const {t} = useTranslation ();
  const [Seite, setPage] = usustate (0);
  const [erw?hnt, addmentionen] = useSestate ([]);

  useEffect (() => {
    const fetchmentions = async () => {
      const ?lters = erwarten Sie Getmentions (Seite, 50, posturl);
      Addmentionen ((erw?hnt) => [... Erw?hnungen, ... ?ltere Besitzungen]);
    };
    Abfertigungen ();
  }, [Seite]);

  zurückkehren (
    
      {mentions.map ((erw?hnt, index) => (
        <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>
      ))}
      {messings.length> 0 && (
        <morebutton onclick="{()"> setPage (Seite 1)} type = "button">
          {t ('Common: More')}
        </morebutton>
      )}
    >
  );
};

Schritt 4: Umgang mit ausgehenden Erw?hnungen

Webmention.app mit einem API -Token und Webhook vereinfacht die Outbound -Erw?hnungen. Alternativ kann wm -CLI-Paket von Remy Sharp als Post-Build-Skript verwendet werden. Mikroformen (H-Eingang und H-Card) sind für reichere Outbound-Erw?hnungen von wesentlicher Bedeutung.

Abschluss

Dieser Leitfaden bietet einen umfassenden überblick über die Implementierung von Webmention. Denken Sie daran, diesen Beitrag zu teilen, wenn er hilfreich war!

Referenzen

• Verwenden von Web -Erw?hnungen auf statischen Websites (Max B?ck)
• Client-Side-Webmentions (SWYX)
• Senden Sie ausgehende Webmentionen (Remy Sharp)
• Ihr erstes Webment (Aaron Parecki)

Weitere Lesen

• Webmention W3C -Spezifikation (Empfehlung)
• Webmention.io
• Webmention.app
• Outbound Webmentions CLI
• Bridgy
• Microformats.org
• IndieWeb

Das obige ist der detaillierte Inhalt vonSpringen in Webmentions mit NextJs (oder nicht). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!