NumberHeader

Description

contents 내부의 Header 앞에 숫자를 부여하여 보기좋게 만듦.

• 최대 h6까지 지원하며, 상위 Header들의 counter들을 모두 합쳐 표현
  • ex) 1.1.1.1.2. TestHeader
• 페이지 내부에 링크가 있을 경우, counter를 따로 계산해야하기 때문에 counter는 페이지에 해당하는 .numbered-headers class로 구분.

Required

frontmatter의 cssClasses에 .numbered-headers 추가 필요.

Source

path: quartz/components/scripts/custom/numberHeader.inline.ts

numberHeader.inline.ts

document.addEventListener("nav", () => {  
  document.querySelectorAll(".numbered-headers").forEach((page) => {  
    const counter = createCounter()  
  
    page.querySelectorAll("h2,h3,h4,h5,h6").forEach((header) => {  
      if (!header) return  
      let level = Number(header.tagName.match(/\d+/)![0])  
      counter.set(`h${level}Count`, (counter.get(`h${level}Count`) || 0) + 1)  
  
      let startNumber = 1  
      let headerNumber = ""  
      while (level > startNumber) {  
        startNumber++  
        headerNumber += counter.get(`h${startNumber}Count`) + "."  
      }  
      header.textContent = headerNumber + header.textContent  
    })  
  })  
})  
  
const createCounter = () => {  
  const counter = new Map<string, number>()  
  counter.set("h2Count", 0)  
  counter.set("h3Count", 0)  
  counter.set("h4Count", 0)  
  counter.set("h5Count", 0)  
  counter.set("h6Count", 0)  
  return counter  
}