[Docusaurus] 각 문서마다 hits 조회수 표시하기

개요 

스크린샷과 같이 문서 별 조회수를 표시하는 hits 를 추가합니다.

 

적용 

* DocItem Swizzling

안내 
DocItem Swizzling이 이미 완료된 경우, 다음 단계로 넘어가세요.

Docusaurus에서 제공하는 기능들을 직접 수정하기 위해서는 Swizzle이라는 작업이 필요합니다. DocItem을 직접 수정할 수 있도록 아래 명령을 수행해 주세요. 

yarn run swizzle @docusaurus/theme-classic DocItem

 

* 컴포넌트 생성 

src → theme → DocItem → Content → index.js 파일을 열어 아래 코드를 추가합니다.

blog_link 변수를 본인의 블로그 주소로 바꾸어 주세요. 

function Hits() {
  const { metadata } = useDoc();

  const blog_link = "https://hanrotg.github.io"; // <---- 여기를 본인의 블로그 링크로 교체하세요.
  const hits_url = "https://hits.seeyoufarm.com/api/count/incr/badge.svg";

  if (metadata?.permalink) {
    var content_link = metadata.permalink;
    var hits = `${hits_url}?url=${blog_link}%2F${content_link}%2Fhit-counter`;

    return (
      <a href="https://hits.seeyoufarm.com">
        <img src={hits} />
      </a>
    );
  }
}

 

* 컴포넌트 추가 

아래와 같이 DocItemContent 반환문에 생성한 컴포넌트를 추가하세요. 

export default function DocItemContent({ children }) {
  const syntheticTitle = useSyntheticTitle();

  return (
    <>
      <Hits />
      <div className={clsx(ThemeClassNames.docs.docMarkdown, "markdown")}>
        {syntheticTitle && (
          <header>
            <Heading as="h1">{syntheticTitle}</Heading>
          </header>
        )}
        <MDXContent>{children}</MDXContent>
      </div>
    </>
  );
}

 

참고 자료 

HITS

[Docusaurus doc/blog] Swizzling(스위즐링)으로 원하는 대로 도큐사우르스 커스터마이징하기(꾸미기) - Ea

Docusaurus로 문서 관리하기 - 2