[jQuery] 티스토리에 내용 목차(TOC) 만들기

들어가기전 내용 목차(TOC)란? Table Of Contents

👈🏻 이것

1. 상황 : 티스토리에서 내용의 목차(TOC) 만들기 기능이 없어서 아쉬움

개발자들의 블로그를 보면 간혹 내용 안에서의 목차가 사이드 메뉴로 표시되는 것들을 볼 수가 있다.

특히 velog.io 에는 기본 기능이 탑재되어 있는 듯한데, 이것 때문에 velog로 옮길까 했지만 아직 티스토리에 더 익숙해져서, 또 관리하는 다른 블로그 때문에 티스토리에 남아 있기로 했지만, 내용의 목차 기능이 참 아쉬웠다.

그래서 하나 만들어 보았다.

이것을 영어로 Table of Contents (TOC)라 한다. 

 

2. 기능 설명

일단 내용에 문단이라 해야 하나? 챕터라 해야하나? 개발 관련 글이든 소개 글이든 문단이 있을 것이고, 문단의 제목을 적을 것이기에 문단의 제목을 구분하는 class 속성을 지정한다.

script에서 지정된 class를 찾아서 제목의 태그에 <a name='{name}'>을 추가한 뒤 스킨에 지정된 영역에 이동할 수 있는 링크를 추가하는 것이다.

 

3. 자바스크립트 코드

$(function() {
    if ($('.chapters').length > 0) {
        $('.chapters').each(function(k, o) {
            $this = $(this);
            let text = $this.text();
            let depth = $this.data('chapters_depth');
            depth = typeof(depth) == 'undefined' ? 0 : depth;
            let padding_left = depth * 8;
            let css_indent = '';
            css_indent = " style='padding-left:" + padding_left + "px' ";
            // 특수문자 -는 제외
            let regExp = /[\{\}\[\]\/?.,;:|\)*~`!^\+<>@\#$%&\\\=\(\'\"]/gi; 
            let text_esc = text.replace(/\&lt\;/g, '<').replace(/(\&gt\;)/g, '>');
            text_esc = text_esc.replace(/<[^>]+>/gm, '');
            text_esc = text_esc.replace(/\&nbsp\;/g, '_')
            					.replace(regExp, '')
                                .replace(/ /g, '_');
            text_esc = text_esc + '_' + k;
            $this.before('<a name="' + text_esc + '" class="chapters-target"></a>');
            depth = depth>3?3:depth;
            $('#chapters_lists > dl').append("<dd " + css_indent 
            		+ "><a href='#" + text_esc 
                    + "' class='chapters-item chapters-item-depth-" 
                    + depth + "'>" + text + "</a></dl>");
            
        });
        $('#chapters_lists').addClass("chapters_lists_on");
        /**
        * 여기에서 모바일에서 보여질 곳에 적절히 넣고 스타일을 수정하면 된다.
        */
        $('area_title').prepend("<div class='area_chapters'>"
        	+$('#chapters_lists').html()+"</div>");

    }
})

제목에 해당 하는 태그에. chapters 클래스를 추가한다. class="chapters"

스크립트에서는 해당 클래스를 찾아서 제목 문자열을 name의 값을 가진 a 태그를 삽입한다.

<h1 class="chapters"><a name="문단_제목"></a>문단 제목</h1>

문단 제목 문자열의 특수문자는 대시(-)를 제외한 특수문자는 제거하고 공백(띄어쓰기)은 언더스코어(_)로 치환한 문자열을 name으로 설정한다.

name을 .chapters 순번으로 해도 되겠지만 주소를 다른 페이지에서 사용할 경우 주소 입력창에 표시된 내용으로 어느 위치인지 가늠할 수 있게 하기 위해서이다.

문단 제목 태그에 chapters_depth 가 있으면 목차 목록 생성시 padding-left로 그 값에 따라 들여쓰기를 한다.

chapters.js

0.00MB

4. 스타일시트 (CSS)

#chapters_lists {
    position: relative;
    top: calc(100vh - (100vh - 215px));
    min-height: 60px;
    overflow: auto;
    max-height: 500px;
    height: calc(100vh - (100vh / 2.5));
    width: 100%;
    overflow: auto;
    scrollbar-face-color: #e0e0e0;
    scrollbar-track-color: #fff;
    scrollbar-arrow-color: none;
    scrollbar-highlight-color: #e0e0e0;
    scrollbar-3dlight-color: none;
    scrollbar-shadow-color: #e0e0e0;
    scrollbar-darkshadow-color: none;
    scrollbar-width: 6px;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

#chapters_lists::-webkit-scrollbar {
    width: 6px;
}

#chapters_lists::-webkit-scrollbar-track {
    background-color: transparent;
}

#chapters_lists::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(204, 204, 204, 0.5);
}

#chapters_lists::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

#chapters_lists.contents_on {
    display: block;
}

#chapters_lists>dl {
    margin: 0px 30px 0px 50px;
}

#chapters_lists>dl>dd {
    margin-bottom: 5px;
}

#chapters_lists>dl>dd>a:hover {
    background-color: rgba(255, 255, 0, 0.5)
}

#chapters_lists>dl>dd>a:after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    background: rgb(9 178 228 / 27%);
    bottom: 0px;
    left: 0px;
    -webkit-transition: height 0.8s;
    -moz-transition: height 0.8s;
    transition: height 0.8s;
}

#chapters_lists>dl>dd>a:hover:after {
    height: 50%;
}

#chapters_lists>dl>dd>a {
    padding: 5px 5px 2px;
    line-height: 1;
    vertical-align: bottom;
    display: block;
    position: relative;
    font-size: 1rem;
    font-weight: 400;
    text-shadow: 1px 1px 1px #ffffff;
}

#chapters_lists>dl>dd>a.chapters-item-depth-0 {
    font-size: 1rem;
}

#chapters_lists>dl>dd>a.chapters-item-depth-1 {
    font-size: 1rem;
}

#chapters_lists>dl>dd>a.chapters-item-depth-2 {
    font-size: 1rem;
}

#chapters_lists>dl>dd>a.chapters-item-depth-3 {
    font-size: 0.8rem;
}

지금 현재 블로그 스킨의 오른쪽 영역에 목차 링크를 넣었을 때 목차가 많으면 스크롤이 생겨서 보기가 안 좋았다.

그래서 스크롤바 스타일을 변경해주었는데, IE에서는 적용이 안되는데 이 부분은 좀 귀찮다. 이제 IE는 사라질 것이라...

 

5. HTML

이제 스크립트와 스타일이 완성되었으면 아래 코드를 스킨에 적절히 넣고서 스타일시트를 변경하면 된다.

    <div id="chapters_lists">
        <dl>

        </dl>
    </div>

 

6. 마침

시간 되면 vanillajs로 만들어 봐야겠다.

그런데 글 작성하고 일일이 class를 지정해줘야 하는데 좀 귀찮네... 방법이 없을까?

 

6-1. 마치기전 들여쓰기 테스트입니다.

6-2 그리고 이것은 들여쓰기 2단계 입니다..

6-3 그리고 이것은 들여쓰기 3단계 입니다.

 

추가 사항

스크롤 스파이를 적용한 버전은 "티스토리 목차(TOC) 만들기 - 2" 에서 확인이 가능하다.

 

 

- 끝-