분류 html

안녕 코멘트, 환영 웹 멘션 🙋🏼‍♂️

컨텐츠 정보

  • 조회 26 (작성일 )

본문

마지막으로 댓글을 싫어해서가 아니라 플랫폼을 제공하지 않았기 때문에 Webmentions로 전환했습니다.


그가 무슨 말을 하는지 궁금 할 것입니다.


좀 더 자세히 설명하겠습니다.


https://dev.to/dailydevtips1/goodbye-comments-welcome-webmentions-499g


Webmentions 


웹 멘션이란 무엇입니까? 


웹 멘션은 웹상의 어떤 것에 대한 반응에 대한 개방형 표준입니다. 현재 W3C 추천 상태입니다.


따라서 웹 사이트에 링크 할 때 웹 멘션을 보내 해당 웹 사이트에 알릴 수 있습니다.


핑백과 거의 비교할 수 있습니다! 당신은 옛날부터 알고 있습니다.


그러나 웹 멘션은 데이터를 포함 할 수 있기 때문에 훨씬 더 멋집니다!


예를 들어 웹 멘션의 데이터는 좋아요, 재 게시, 댓글 또는 기타 항목이 될 수 있습니다.


그렇다면 이러한 웹 멘션은 어떻게 작동합니까? 


기본 웹 멘션에서 다음과 같이 작동합니다.


  1. 나는 이 사이트에 웹 멘션에 대해 씁니다.
  2. 그런 다음 Rey는 자신의 사이트에 Webmentions에 대해 작성하지만 내 기사에 대한 링크는
  3. Rey의 게시 소프트웨어는 이제 내 웹 사이트로 Webmention을 보냅니다.
  4. 내 소프트웨어는 실제로 링크가 있는지 확인하고 내 사이트에 Rey의 웹 멘션을 포함합니다!


제 경우에는 트위터에서 내 기사 중 하나에 대한 링크를 포함하면 많은 웹 멘션이 표시됩니다!


내 사이트에서 웹 멘션을 받으려면 어떻게 해야 합니까? 


물론 이것은 백만 달러짜리 질문이며 몇 가지 단계가 있습니다.


Webmention 엔드 포인트를 호스팅하거나 webmention.io와 같은 타사 사용


Webmention.io는 놀라운 인디 웹 영웅 Aaron Parecki가 만든 무료 서비스입니다. 그를 확인하십시오!


IndieAuth 프로세스를 사용하여 Webmention.io에 로그인합니다.


Bridgy는 이제 트윗을 분석하고 발견되면 웹 멘션을 엔드 포인트로 보냅니다. 이러한 항목 중 하나는 다음과 같습니다.


{
    "type": "entry",
    "author": {
        "type": "card",
        "name": "Ido Shamun",
        "photo": "https://webmention.io/avatar/pbs.twimg.com/d3cd0af823ba866fc0438b06151ace371d762e07bc61536fe895e7f4aca6520d.jpg",
        "url": "https://twitter.com/idoshamun"
    },
    "url": "https://twitter.com/idoshamun/status/1305098804597854213",
    "published": "2020-09-13T10:59:37+00:00",
    "wm-received": "2020-09-14T07:00:42Z",
    "wm-id": 851613,
    "wm-source": "https://brid-gy.appspot.com/comment/twitter/DailyDevTips1/1305027118166937600/1305098804597854213",
    "wm-target": "https://daily-dev-tips.com/posts/top-10-chrome-extensions-for-developers-%F0%9F%91%80/",
    "content": {
        "html": "Thank you! 🤩\n<a class=\"u-mention\" href=\"https://daily-dev-tips.com/\"></a>\n<a class=\"u-mention\" href=\"https://twitter.com/DailyDevTips1\"></a>",
        "text": "Thank you! 🤩"
    },
    "in-reply-to": "https://daily-dev-tips.com/posts/top-10-chrome-extensions-for-developers-%F0%9F%91%80/",
    "wm-property": "in-reply-to",
    "wm-private": false
}


좋아, 이제 어떡해? 


예, 이제 웹 멘션이 들어오고 사이트에서 이를 수락하지만 어떻게 표시할까요?


글쎄, webmention.io는 우리가 활용할 수 있는 환상적인 API와 함께 제공됩니다.


도메인에 대한 모든 웹 멘션 받기 


다음 쿼리를 실행하여 도메인에 대한 모든 웹 멘션을 가져올 수 있습니다.


curl --location --request GET 'https://webmention.io/api/mentions.jf2?domain={DOMAIN}&token={TOKEN}'


도메인은 예를 들어 daily-dev-tips.com입니다. 그리고 webmention.io에서 얻을 수 있는 토큰입니다.


특정 URL에 대한 웹 멘션 받기 


또한 공용 엔드 포인트를 사용하여 하나의 특정 URL에 대한 모든 웹 멘션을 가져올 수 있습니다.


curl --location --request GET 'https://webmention.io/api/mentions.jf2?target=https://daily-dev-tips.com/posts/getting-started-with-the-html-canvas/'


swyx가 지적 했듯이 엔딩 슬래시는 매우 중요합니다!


그런 다음 JavaScript를 사용하여 웹 사이트에 표시 할 수 있습니다.


Eleventy 정적 블로그에 완전히 통합하는 방법에 대한 또 다른 기사를 작성할 것입니다!


자유롭게 시도하고 이 기사에 대해 트윗하십시오.