[Javascript] 목차 추가 기능을 만들었다

블로그 스킨을 바꾸면서 목차 생성 기능도 사라졌다. 마음에 들던 목차가 아니여서 이번에는 필요하면 커스텀할 목적으로 직접 만들었다.

의존성

• Jquery

아이디어

처음에는 계층 구조를 트리로 만들려고 했다. 그런데 사용자가 H2, H1, H3, H2 처럼 잘못된 계층 구조로 작성하는 경우에는 새 루트 노드를 만들고, 부모 노드를 찾고 하는 등의 처리가 번거롭게 느껴졌다. 생각해보니 헤딩의 레벨에 따라 들여쓰기 하는 것만으로도 충분히 목차처럼 보여서, 생각보다 훨씬 간단하게 만들 수 있었다.

나중에 나무위키 목차처럼 항목별 부모, 자식을 표시해줄 때는 계층 구조로 다시 만들거나, 다른 방법을 생각해야 할 것 같다.

코드

https://github.com/OuOHoon/my-toc 에 있다. 근데 글이 너무 짧으니까 일부분만 올려둬야지 ㅎㅎ.. 간단한 코드지만 나중에 봐도 기억나도록 주석도 나름대로 달아뒀다!

const ouohoon = (function () {
  /*
    options: 목차 생성 옵션
      content: 목차로 만들 컨텐츠 요소
      headings: 파싱할 요소
    Toc 생성 함수
  */
  function makeToc(options) {
    options = {
      content: ".contents_style",
      headings: ["h1", "h2", "h3", "h4"],
      ...options,
    };

    const parsingData = parseContent(options.content, options.headings);
    if (parsingData.length === 0) {
      return null;
    }
    const htmlString = toHtmlString(parsingData);

    $(options.content).prepend(htmlString);
  }
  return {
    toc: makeToc,
    addStyle: addStyle,
  };
})();

// 테스트 코드

// $().ready(function () {
//   ouohoon.toc();
//   ouohoon.addStyle();
// });