microformats2 및 h-entry로 내 페이지에 주석 달기

h-entry는 웹에서 날짜가 표시된 콘텐츠를 위한 개방형 마이크로포맷입니다. RSS/Atom 피드의 대안으로 내 사이트를 신디케이션에 좀 더 개방적으로 만드는 방법을 찾고 있었습니다. 나는 주요 브라우저가 이러한 형식을 선택하는 것을 본 적이 없지만 주요 초점은 IndieWeb 독자이고 나는 그들 모두를 지지합니다.

이제 이 게시물은 h-entry 또는 microformats2 사양의 다른 부분을 사이트에 구현하는 방법에 대한 가이드가 아닙니다. 이 웹사이트에서 구현하는 방법을 요약한 것입니다.

어떻게 생겼는지

{
  "items": [
    {
      "type": [
        "h-entry"
      ],
      "properties": {
        "name": [
          "My blog post"
        ],
        "author": [
          {
            "value": "John Smith"
          }
        ],
        "published": [
          "2020-01-01 12:00:00"
        ],
        "summary": [
          "A short summary of my blog post, and what you can do."
        ],
        "content": [
          {
            "value": "Starting paragraph of my blog post.",
            "html": "<p>Starting paragraph of my blog post.</p>"
          }
        ]
      }
    }
  ]
}

간단히 말해서, 기본적으로 다른 앱의 일부로 쉽게 사용할 수 있는 JSON 객체에 게시물에 대한 모든 정보가 있습니다. 이를 염두에 두고 파서는 이 작업을 어떻게 수행합니까?

h-entry의 요소

h-entry 자체는 루트 클래스 이름으로 알려진 것입니다. 우리는 그것을 사용하여 h-entry를 정의할 수 있으며, 파서가 그것을 아는 것을 기반으로 결정할 일련의 속성을 가지고 있습니다. 다른 루트 클래스 이름은 다음과 같습니다.

h-adr

h-event

h-geo

h-item

h-제품

h-레시피

microformats2 page 에서 이에 대한 더 자세한 목록을 예제 및 자세한 설명과 함께 찾을 수 있습니다.

h-entry로 돌아가서 간단히 클래스 이름을 지정하여 이를 설정할 수 있습니다.

<article class="h-entry">
...
</article>

그게 다야, 우리 기사는 이제 있는 그대로 구문 분석할 수 있지만 그 자체로는 그다지 유용하지 않을 수 있습니다. 여기에 몇 가지 핵심 h-entry 속성을 추가합니다!

h-entry 속성

이것들이 꽤 많기 때문에 이 사이트에 사용한 속성만 사용하겠습니다.

p-이름

이것은 항목 이름 또는 제목을 나타냅니다. 제목의 경우 이 클래스를 포함하는 요소에 이 클래스를 추가하기만 하면 됩니다.

<h1 class="p-name">{post.frontmatter.title}</h1>

전자 콘텐츠

문제의 항목의 전체 내용, 즉 블로그 게시물의 전체 내용:

<section class="e-content">...</section>

dt-출판

항목이 게시된 날짜 스탬프:

<time class="dt-published" datetime="2020-09-29">29 September, 2020</time>

Gatsby 콘텐츠 유형 내에서 h-entry 구현

화제를 모으자! 이를 위해 내 사이트 생성기로 Gatsby을 사용하고 있으므로 내 블로그 게시물에서 작동하도록 하려면 JSX를 반환하는 블로그 게시물의 렌더링 기능(/src/templates/blog-post.js에 있음)에 대한 템플릿을 수정해야 합니다. 다음과 같이:

export default ({data}) => {
  const post = data.markdownRemark
  return (
    <Layout>
      <SEO title={post.frontmatter.title} description={post.excerpt} />
      <section className="h-entry">
        <h1 style={{marginBottom: `0.5rem`}} className="p-name">{post.frontmatter.title}</h1>
        { post.frontmatter.draft ? (
          `Draft`
        ) : (
          <time className="dt-published" dateTime={post.frontmatter.htmldate}>{post.frontmatter.date}</time>
        )}
        <section className="e-content" dangerouslySetInnerHTML={{ __html: post.html }} />
      </section>
    </Layout>
  )
}

2 section , h1 및 time 요소가 위와 같이 업데이트되어 className 속성을 통해 정의된 microformat2 요소를 갖는 것을 볼 수 있습니다. 이러한 일반 HTML 요소에서 작동하도록 할 수 있었지만 이전에는 time 라고 하는 별도의 요소였던 <DateTime> 요소에서는 작동하지 못했습니다. 나는 그것을 이해할 수 없었기 때문에 그것이 나타내는 기본 요소를 사용하는 것으로 되돌아갔습니다.

추가 읽기

microformats2 on microformats.org : 이 게시물에서 방금 다루었던 마이크로포맷 유형에 대한 많은 정보가 있습니다.

h-entry on microformats.org : 이 게시물에서 사용하지 않은 다른 선택적 속성을 포함하여 h-entry에 대한 특정 정보를 제공합니다.

h-entry on indieweb.org : h-entry를 사용해야 하는 이유와 이에 대한 예제 및 사용 사례가 있습니다.

마이크로포맷을 구현하는 것은 어렵지 않으며 사람들이 콘텐츠에 액세스할 수 있는 새로운 방법을 제공할 수 있습니다. 해봐!