Webmention是2017年1月12日上次更新的W3C建議，是一種簡單的機(jī)制，用于在另一個(gè)網(wǎng)站上提到URL通知URL。相反，它允許網(wǎng)站在其他地方提及時(shí)接收通知。從本質(zhì)上講，它將您的網(wǎng)站轉(zhuǎn)換為活躍的社交媒體中心，從而促進(jìn)了來自各種平臺(tái)（Twitter，Instagram，Mastodon等）的溝通。

實(shí)施網(wǎng)絡(luò)攻擊各不相同； WordPress用戶可以輕松安裝插件，而其他用戶可能需要更多的手動(dòng)配置。讓我們探討這個(gè)過程。

實(shí)施計(jì)劃

1. 建立網(wǎng)絡(luò)登錄端點(diǎn)。
2. 將社交媒體互動(dòng)轉(zhuǎn)換為網(wǎng)絡(luò)企業(yè)。
3. 集成到您的網(wǎng)站/應(yīng)用程序中。
4. 配置出站網(wǎng)絡(luò)攻擊。

幸運(yùn)的是，一些服務(wù)簡化了此過程。第三步需要更多的努力，但我將詳細(xì)介紹我在atila.io上的方法。

我的NextJS基于服務(wù)器端渲染博客使用客戶端網(wǎng)絡(luò)媒體請(qǐng)求，易于適應(yīng)其他React Apps和JavaScript應(yīng)用程序。

步驟1：定義Webmention端點(diǎn)

要接收Webmentions，您可以創(chuàng)建自定義腳本或使用Webmention.io（我選擇的方法）之類的服務(wù)。

Webmention.io是免費(fèi)的；您只需要驗(yàn)證域名。我使用了一個(gè)將我的網(wǎng)站鏈接到社交媒體資料的rel="me"屬性。一個(gè)鏈接就足夠了，但我包括了所有帳戶。

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

這需要從我的Twitter個(gè)人資料回到我的網(wǎng)站的相互鏈接。在WebMention.io上進(jìn)行驗(yàn)證后，添加您的網(wǎng)站URL。這提供了您的網(wǎng)絡(luò)登錄端點(diǎn)。包括這些<link>網(wǎng)頁中的標(biāo)簽收集提及：

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

用您的webmention.io用戶名替換{user} 。

步驟2：處理社交媒體互動(dòng)

盡管已準(zhǔn)備好網(wǎng)絡(luò)攻擊，但它們的用法是有限的。轉(zhuǎn)換社交媒體互動(dòng)至關(guān)重要。 Bridgy，一項(xiàng)免費(fèi)服務(wù)，將聯(lián)合內(nèi)容連接并將其轉(zhuǎn)換為網(wǎng)站。使用SSO，連接您的各種配置文件。

步驟3：在您的網(wǎng)站上顯示網(wǎng)絡(luò)攻擊

此步驟涉及檢索和顯示W(wǎng)ebmention數(shù)據(jù)。我們將其分為幾個(gè)階段：計(jì)數(shù)提及，獲取提及并與NextJS（可選）集成。

計(jì)算網(wǎng)絡(luò)攻擊

Webmention.io API提供了一系列提及。響應(yīng)的結(jié)構(gòu)如下：

 type tmentionscountresponse = {
  計(jì)數(shù)：數(shù)字；
  類型： {
    喜歡：數(shù)字；
    提及：數(shù)字；
    回復(fù)：號(hào)碼；
    重新發(fā)布：數(shù)字；
  };
};

這被處理為：

 type tmentionscount = {
  提及：數(shù)字；
  喜歡：數(shù)字；
  總數(shù)：數(shù)字；
};

終點(diǎn)是： https://webmention.io/api/count.json?target=${post_url} 。 MaxB?ck和Swyx結(jié)合了喜歡和回復(fù)的重新提及。

 const getmentionscount = async（posturl：string）：承諾<tmentionscount> => {
  const resp =等待fetch（`https://webmention.io/api/count.json?target=jundejumport=junteqution {posturl}/`）;
  const {type，count} =等待desp.json（）;

  返回 {
    喜歡：類型。
    提及：type.mention類型。
    總計(jì)：計(jì)數(shù)，
  };
};</tmentionscount>

獲取網(wǎng)站

https://webmention.io/api/mentions endpoint被分頁，接受page ， per-page和target參數(shù)。成功的響應(yīng)包括一系列links ：

 type tmention = {
  來源：字符串;
  經(jīng)過驗(yàn)證：布爾值；
  verified_date：string;
  id：數(shù)字;
  私人：布爾人；
  數(shù)據(jù)： {
    作者： {
      名稱：字符串;
      URL：string;
      照片：字符串；
    };
    URL：string;
    名稱：字符串;
    內(nèi)容：字符串;
    出版：字符串；
    發(fā)布_TS：編號(hào)；
  };
  活動(dòng)： {
    類型：'link'| '回復(fù)'| 'repost'| '喜歡';
    句子：字符串;
    stone_html：字符串;
  };
  目標(biāo)：字符串；
};

提取請(qǐng)求：

 const getmentions = async（
  頁面：字符串，
  后續(xù)頁：編號(hào)，
  Posturl：字符串
）：Promise  => {
  const resp =等待提取（
    `https://webmention.io/api/mentions？
  ）；
  const list =等待resp.json（）;
  返回list.links;
};

NextJS集成（可選）

NextJS提供getStaticProps ， getStaticPaths和getServerSideProps的數(shù)據(jù)獲取。我選擇了使用SWR進(jìn)行緩存和州管理的客戶端方法。

顯示網(wǎng)絡(luò)計(jì)數(shù)

一個(gè)MentionsCounter組件顯示了計(jì)數(shù)：

 // ...（導(dǎo)入語句和類型）...

const incenionscounter =（{posturl}）=> {
  const {t} = usetranslation（）;
  const {data = {}，error} = usewr（posturl，getmentionscount）;

  如果（錯(cuò)誤）{
    返回<errormessage>{t（'common：errorwebmentions'）}}</errormessage> ;
  }

  const {likes =' - '，提及=' - '} = data;

  返回 （
    <mentioncounter>
      <li>
        <heart title="喜歡"></heart>
        <counterdata>{number.isnan（喜歡）？ 0：喜歡}</counterdata>
      </li>
      <li>
        <comment title="提及"></comment>
        <counterdata>{number.isnan（提及）？ 0：提及}</counterdata>
      </li>
    </mentioncounter>
  ）；
};

顯示提及

Webmentions組件顯示了實(shí)際提及，使用狀態(tài)進(jìn)行分頁和useEffect來獲?。?/p>

 // ...（導(dǎo)入語句和類型）...

const webmentions =（{posturl}）=> {
  const {t} = usetranslation（）;
  const [page，setPage] = usestate（0）;
  const [提及，添加劑] = usestate（[]）;

  useeffect（（）=> {
    const fetchmentions = async（）=> {
      const舊=等待getmentions（Page，50，Posturl）;
      添加（（提及）=> [...提及，...較舊的]）;
    };
    提?。ǎ?
  }， [頁]）;

  返回 （
    
      {tedi firits.map（（（提及，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>
      ）}}
      {提及。長度> 0 &&（（
        <morebutton onclick="{()"> setPage（第1頁）} type =“ button”>
          {t（'common：more'）}}
        </morebutton>
      ）
    >
  ）；
};

步驟4：處理出站提及

WebMention.App具有API令牌和Webhook，簡化了出站的提及。另外，雷米·夏普（Remy Sharp）的wm CLI軟件包可以用作后構(gòu)建腳本。微型模式（H-訪問和H卡）對(duì)于更豐富的出站提及至關(guān)重要。

結(jié)論

本指南提供了對(duì)網(wǎng)絡(luò)實(shí)施的全面概述。如果有幫助，請(qǐng)記住分享這篇文章！

參考

• 在靜態(tài)站點(diǎn)上使用Web提及（MaxB?ck）
• 客戶端網(wǎng)站（SWYX）
• 發(fā)送傳出網(wǎng)站（Remy Sharp）
• 您的第一個(gè)網(wǎng)站（Aaron Parecki）

進(jìn)一步閱讀

• Webmention W3C規(guī)范（建議）
• Webmention.io
• WebMention.App
• 出站網(wǎng)絡(luò)委員會(huì)CLI
• 天哪
• microformats.org
• indieweb

以上是跳入NextJS（或不）進(jìn)入網(wǎng)絡(luò)攻擊的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！