본문 바로가기

티스토리블로그 자동생성목차 만들기 (TOC : Table of Contents)

◀↗↓↖▶바인 발행일 : 2020-06-07

블로그 포스팅을 하다보면 글을 정갈하게 가독성 있게 작성할 필요가 있고 검색로봇도 좋아 한다고 합니다. 타 블로그 방문시 컨텐츠 상단에 간결하게 글 목록이 정리 된 것을 보면서 참 부러웠습니다. html 코딩 조금 알고 있기에 수동으로 하나하나 링크를 걸어 주면 구현은 할 수 있지만 포스팅 하면서 수작업으로 목차까지 만들긴 무리데스~~~ 입니다.

그러던 중 이런 목차를 자동으로 만들어 주는 소스(라이브러리)가 있다는 것을 이웃블로거님을 통해 알게 되었고 오늘 설치완료 했습니다.
* 이번 포스팅은 아래 이웃 블로거님의 글을 참고 하고 재해석 한 것입니다.

 

티스토리 블로그 자동 목차(TOC) 만들기

오늘은 그동안 벼르고 별렀던 블로그에 자동 목차 만들기 시간입니다. 요즘 글을 쓰는데 길이가 아주 길어지는 경우가 많아서 스크롤이 길어지는데요. 이럴때 글에 자동으로 목차를 넣어주는 ��

nhj12311.tistory.com

글 목차

     

    TOC란 무엇인가?

    TOC(Table of Contents)의 약자로 컨텐츠테이블이란 뜻입니다. 티스토리 블로그에서 상단에 컨텐츠테이블로 시작하면 글 구성이 깔끔하고 논문같은 느낌의 고퀄리티 포스팅으로 보입니다. 오늘 알아 볼 것은 이 TOC를 자동으로 만들어 주는 작업을 할 예정 입니다.
    제가 프로그래머도 아니고 스킨제작자도 아니라 현재 사용 중인 JB팩토리 스킨 기준으로 설치 성공기 정도로 봐 주시면 감사하겠습니다. 

     

    사전 준비 작업

    위에 언급했듯이 TOC 자동화 모듈(라이브러리)가 공개 되어 있어서 다운 받은 후 사용 중인 티스토리에 업로드 후 적용 하면 됩니다.

     

    자동화 라이브러리 다운받기

    url.kr/H6VNAl

    - 위 링크에서 다운 후 압축 해제 합니다.(자세한 설명은 생략 하겠습니다.)
    - 2개의 파일이 압축되어 있습니다.

     

    스킨에 업로드 하기

    관리자모드 좌측메뉴 꾸미기 > 스킨편집 > html편집 > 파일업로드 > 파일추가

    위 다운받은 파일을 스킨에 업로드 하는 방식은 아래와 같이 하면 images/..... 이렇게 이미지폴더 아래로 업로드가 됩니다.

     

     

     

    jquery.toc.min.js / jquery.toc.js경로 확인하기

    업로드한 스크립트 경로를 복사 해 둡니다. 이부분은 하단에서 다시 설명 하겠습니다.
    경로 확인은 아래와 같이 업로드된 파일클릭 오른쪽 마우스에서 링크주소 복사하기를 하면 됩니다.

     

    jquery.toc.min.js 소스에 넣기

    바로위 설명에서 스킨편집 > html 내용 중 아래와 같이 </head> 바로 위에 아래와 같이 스크립트 소스를 넣어 줍니다.
    아래 첨부파일 열어보면 소스 있습니다.
    jquery.toc.min.js 소스경로는 아래와 같이 해 주셔도 됩니다.

    toc_sample.txt
    0.00MB

    <script type="text/javascript" src="./images/jquery.toc.min.js"></script>
    </head>

     

    목차코드소스 다운받기

    제 스킨에 적용한 소스 그대로 올려 봅니다.
    수정 후 사용해도 되고 그대로 사용해도 무관 합니다.

    toc_list.txt
    0.00MB

    목차코드소스 수정하기

    다운 받은 소스를 메모장 같은 것으로 열어보면 아래처럼 2곳을 수정 할 수 있습니다.
    1. jb-box jb-box-brown: JB팩토리 스킨에서 기본적으로 제공하고 있는 색깔 코드 입니다.
    2. 2번째 줄 긴 주소는 위에서 jquery.toc.js 파일 경로를 확인 한 것으로 변경 해 주면 됩니다. 

    <div class="jb-box jb-box-brown">
    <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory/1976880/skin/images/jquery.toc.js"></script>
    <p>글 목차</p>
    <ul id="toc"></ul>
    <script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".jb-article", headings: "h1,h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>
    </div>

     

    [실제 샘플]
    제가 실제로 jb-box jb-box-brown적용한 TOC 모습입니다.

     

    서식등록 하기

    서식으로 등록 해두고 사용하면 아주 편리 합니다. 그 방법을 하나하나 알아보겠습니다.
    - 관리자 페이지에서 서식관리 메뉴를 클릭

     

    - 새로운 서식쓰기
    저는 아래처럼 목차만들기란 이름으로 서식을 등록 해 두었습니다.

     

    - 서식쓰기는 포스팅 글 쓰기와 동일한 과정입니다.
    - 서식의 제목을 정하고 내용에 위에서 다운 받은 목차코드 소스를 넣어 주는데 글씨기 모드를 기본모드에서 HTML로 변경 후 붙여 넣기 해 주면 됩니다.

     

     

    작동원리 이해 및 실전 글쓰기

    이제 티스토리 블로그에 자동으로 목차 만들기 사전 준비작업을 모두 마쳤습니다.
    그럼 이제 이게 글쓰기 할때 어떻게 작동하는지 설명 하겠습니다.

    글쓰기를 할때 서브타이틀을 제목1로 지정하고 글을 쓰면 목차에 자동으로 추가 되어 나옵니다.
    제목2로 서브타이틀을 쓰면 목차에서 서브목차로 자동으로 추가 됩니다. 개념적으로 아래와 같이 정리 할 수 있습니다.

    제목1 = 사전준비작업
    제목2 = 자동화 라이브러리 다운받기

     

    글을 쓸때마다 목차가 필요한 글이라면 제일먼저 서식으로 들어가서 목차만들기를 추가 해 주고 난 후 목차를 상상하며 서브 타이틀을 제목1로 할지 제목2로 할지를 잘 조절하면서 쓰면 목차가 자동으로 간결하게 나옵니다.

     

    실전 연습: 글쓰기

    실제 글을 쓸때 어떻게 하는지 보겠습니다.
    - 제목을 작성 한다
    - 서식을 불러 온다 (서식 중 목차만들기를 불러온다)
    - 서식삽입(스크립트) 후 그 밑으로 실제 글을 쓰면 됩니다.
    - 목차를 만들고 싶으면 "제목1"을 선택 후 타이틀을 만들어 주면 됩니다.
    - "제목2"는 타이틀의 서브 타이틀을 만들때 사용 합니다.
    백문이 불여일견이라고 글로 설명하려니 힘드네요. 한번 해보시면 제 말을 이해 하실 거에요.

     

     

    맺음말

    먼저 저는 제목1의 CSS를 수정해서 조금 다르게 보이게 수정했습니다. 이 부분은 본인의 포스팅 색감이나 분위기에 맞게 수정 하고 싶으면 해보세요. 오늘 이렇게 추가 하고 나니 블로그 글이 간결해져 가독성이 높아진것 같습니다.
    어렵지 않으니 한번 도전해 보세요.

    다시한번 이렇게 소중한 자료를 알려준 이웃 불로거님께 감사의 말씀을 드립니다.

     

     

    댓글