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>
</>
);
}