Quartz에 카테고리 내비게이션을 추가하는 방법

Deprecated

이 항목은 현재 블로그에 적용되지 않습니다.

페이지 레이아웃(quartz.layout.ts)에 원하는 내비게이션(여기서는 블로그 카테고리)을 추가하는 방법

Categories.tsx

quartz/components/Categories.tsx를 생성한다. 문서 내용은 아래와 같다.

import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/categories.scss"
import { classNames } from "../util/lang"

const Categories: QuartzComponent = ({
  displayClass,
}: QuartzComponentProps) => {
  return (
    <div class={classNames(displayClass, "categories")}>
      <h3>Categories</h3>
      <ul>
        <li><a href="/Blogs/General">General</a></li>
        <li><a href="/Blogs/Business">Business</a></li>
        <li><a href="/Blogs/Social">Social</a></li>
        <li><a href="/Blogs/Coding">Coding</a></li>
        <li><a href="/Blogs/Notes">Notes</a></li>
      </ul>
    </div>
  )
}

Categories.css = style
export default (() => Categories) satisfies QuartzComponentConstructor

index.ts 수정

quartz/components/index.ts에서 Categories를 추가한다.

// Custom components
import Categories from "./Categories"

export {
// 기존 컴포넌트들

// Custom components
Categories,
}

quartz.layout.ts 수정

Component.Categories()를 원하는 위치에 추가한다.