소개

이 기사는 htps : // / ch-b ぉg. 요시키 오시시. v / pots / s rt가 tsby-b-g-b-o-f의 교차 게시물 기사입니다.

이 기사는 Gatsby이라는 헤드리스 CMS 기술로 구성되어 있습니다. 이번에는 「엔지니어 초보자라도 할 수 있다」를 전제로 이하의 구성으로 기사를 작성해 나가려고 합니다.

Gatsby 시작할 때까지

Gatsby에 공유 기능, OGP 태그 추가

태그 기능, 카테고리 기능을 붙인다(기초편)

태그 기능, 카테고리 기능을 붙인다(응용편)

Gatsby에 TableOfContents(목차)를 추가

DarkMode 켜기

내용

전회는 태그 일람과 기사 일람의 컴퍼넌트를 동시에 내는 GrapuQL 쿼리의 응용까지 실시했습니다.

이번은 블로그에서 빠뜨릴 수 없는 TableOfContents(목차)의 구현 방법의 소개입니다. 전혀 어렵지 않으므로 갑자기 가자!

쿼리 매우 간단합니다. 기사를 검색하는 쿼리에 tableOfContents를 추가하면 됩니다. 편집기에서 결과를 확인해 봅시다. query PostBySlug($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { id html fields { slug tagSlugs } frontmatter { date description 태그 title socialImage } tableOfContents } } 이런 식으로 HTML 형식의 데이터를 얻을 수있었습니다. 나머지는 표시하기만 하면 됩니다. 컴포넌트 생성 TOC를 표시하는 컴포넌트 만들기입니다. 그건 그렇고, 왜 구성 요소로 만드는가? 이유는 간단하고 사용하기 쉽습니다. CSS 설정을 제한적으로 할 수 있습니다. 부품을 원하는 곳에 배치하기 쉬워진다. 부터입니다. 파트 하나 하나의 의존도를 낮추어 갑시다. 아래와 같이 dangerouslySetInnerHTML={{ __html: tableOfContents }}에 앞서 얻은 HTML 데이터를 흘려 봅시다. (CSS 설정은 원하는대로 설정하십시오) const Toc = ({ tableOfContents, gridArea }: Props) => ( <div className={styles.toc} dangerouslySetInnerHTML={{ __html: tableOfContents }} /> ); export default Toc; 요약 어땠습니까? 그 밖에도 gatsby-remark-toc 등의 라이브러리가 있는 것 같습니다만, 개인으로서는 이쪽이 심플하고 간결하다고 생각하고 있습니다 그럼 다음 기사에서.