블로그에 박수를 추가하는 방법

내 사이트의 블로그 게시물 하단으로 스크롤하면 이 게시물이 마음에 드는지, 박수를 쳐줄지 묻는 섹션이 표시됩니다. 이것은 자주 볼 수 있는 것이 아니지만 생각보다 쉽습니다.

개인적으로 저는 훌륭한 인디 개발인 Lyket을 사용하기로 했습니다. React, HTML 및 WordPress를 지원하므로 필요한 모든 경우에 완벽합니다.

설정

React 기반 블로그의 경우 단일 패키지@lyket/react만 있으면 웹 사이트에 박수를 추가할 준비가 된 것입니다.

다음으로 https://lyket.dev에서 찾을 수 있는 Lyket 계정에 가입해야 합니다. 가입한 후 설정에서 Public API token를 가져옵니다.

_app.js를 래핑합니다.

이제 필요한 부분이 모두 준비되었으므로 애플리케이션을 공급자로 래핑하여 Lyket과 함께 사용할 수 있습니다. 먼저 Lyket에서 Provider를 가져와야 하지만 Provider로 가져오는 대신 LyketProvider를 사용하겠습니다.

import { Provider as LyketProvider} from “@lyket/react”

이제 Lyket이 사용할 계정을 알 수 있도록 이 공급자에 애플리케이션을 래핑하고 API 토큰을 전달해야 합니다.
_app.js는 다음과 유사해야 합니다.

import '../styles/index.css'
import { Provider as LyketProvider} from “@lyket/react”

export default function MyApp({ Component, pageProps }) {
  return (
    <LyketProvider apiKey="[YOUR-API-KEY]">
      <Component {...pageProps} />
    </LyketProvider>
  );
}

페이지에서 Lyket 사용.

Lyket은 이제 우리가 원하는 모든 페이지에서 사용할 수 있습니다. Lyket을 사용하려는 페이지를 열고 다음 가져오기import { ClapButton } from '@lyket/react';를 추가하면 원하는 곳 어디에서나 이 구성 요소를 사용할 수 있습니다. 예를 들어:

import { ClapButton } from '@lyket/react';

export BlogPost = ({ title,slug, content }) => {
  return (
    <div>
      {title}
      <ClapButton id={slug} namespace="blog-posts" />
      {content}
    </div>
  );
};

이제 독자가 귀하의 게시물을 좋아할 때 박수를 칠 수 있습니다. 아래에서 한 번 해보세요!