[스킨] GRAVITY SKIN 8 | 자동 목차 기능 넣기

1. GRAVITY SKIN 8에 자동 목차 기능을 넣자고 생각하게 된 계기

 

아무래도 목차를 사용하는데, 목차를 볼 수 있으면 좀 좋지 않을까 싶어서 해당 내용을 어떻게 하면 넣을 수 있을지 열심히 찾아보았다. 이때 미넴 스킨을 배포하시는 미넴님이 쓴 자동 목차 글을 보고 기능을 넣어보게 되었다.

 

2. 목차 기능 추가하기

 

미넴 님의 자동목차 기능을 보고 그대로 따라 했다. 나는 그걸 그대로 해본 후기나 진배없으니, 정확한 내용을 이해하고자 한다면 미넴 님의 블로그에 따라가서 보기만 하면 된다.

 

2.1 script를 첨부파일에 넣어줘야 한다.

 

많은 사람들이 오해하기 쉬운데, script는 처음 티스토리 스킨 등록할 때뿐만 아니라, 수정할 때도 넣을 수 있다. 다만 티스토리 스킨 등록할 때 함께 첨부해놓으면 나중에 스킨을 바꿨다가 등록한 스킨으로 다시 적용할 때 script를 따로 첨부하지 않아도 되지만 스킨을 이미 등록한 상태에서 추가하면 나중에 스킨을 바꿨다가 등록된 스킨으로 다시 적용할 때 다시 script를 넣고 수정을 해줘야 한다.

 

이미 스킨을 적용한 상태에서 script를 첨부해 보겠다.

 

jquery.toc.min.js

0.00MB

 

2.1.1 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드를 클릭해 준다.

 

2.1.2 파일업로드를 누르고 가장 하단 부분에 추가 버튼을 눌러주고 해당 파일을 추가해 준다.

 

 

2.2 해당 script가 적용될 수 있도록 코드 입력해 주기

 

2.2.1 블로그 관리 > 꾸미기 > 스킨 편집 > html 편집 > HTML를 클릭해 준다.

2.2.2 HTML 수정에서 해당 코드를 </body> 바로 앞에 입력해주면 된다.

 

<script src="./images/jquery.toc.min.js"></script>
<script>
    $(document).ready(function() {
        var $toc = $("#toc");
        $toc.toc({content: ".article-content", headings: "h2,h3,h4"});
        
        if($('.another_category').length > 0) {
            $toc.find('li:last').remove();
        }
    });
</script>

</body>
</html>

 

미넴 님의 설명을 보면 content: "tt_article_useless_p_margin" 중에 밑줄 친 부분을 수정하면 되는데 GRAVITY SKIN 8에서 해당 부분은 article-content이기 때문에 그렇게 바꿔주면 된다. 저 부분이 스킨마다 다를 수밖에 없는데, 제작자가 본문을 뭐라고 이름 붙이는가에 따라 다르다고 이해하면 된다.

 

어떤 건 정말 단순하게 article인 경우가 있고 어떤 때는 content일 경우가 있고 다양하다. 이름만 다를 뿐 결국 표현하는 것은 같은 것이라, 그렇게 어렵게 생각하지 않아도 된다.

2.2.3 CSS 적용해 주기

 

미넴님 거를 보면 목차 CSS가 있다. h2, h3, h4를 꾸밀 수 있는 코드도 있으니 한 번 가서 봐보시면 좋다. 그대로 따라 해도 어려움이 없다. 다만 아까 위에 거처럼 tt_aricle_useless_p_margin 부분만 article-content로 바꿔주면 참 쉽게 설정이 가능하다.

 

참고할 페이지: https://sangminem.tistory.com/307

 

 

3. 자동 목차 설정으로 바꾸기

 

참고할 페이지: https://sangminem.tistory.com/491

 

3.1 html에 넣은 코드를 수정해 주기

 

아까 2.2.2의 코드처럼 tt_article_useless_p_margin을 article-content로만 바꿔주면 된다. 그렇게 되면 자동 목차 설정이 된다. 무조건 본문 서두, 제목 바로 밑에 설정이 되기도 한다.

 

<script src="./images/jquery.toc.min.js"></script>
<script>
    // 목차 생성
    $(document).ready(function() {
        var $toc = $("#toc");
        if($toc.length == 0) {
            var firstContent = $('.article-content').children().eq(0);
            var titleLength = $('.article-content h2,h3,h4').length - $('.another_category h4').length - $('h3.tit_list_type').length;
            if(titleLength > 0 && firstContent.length > 0) {
                firstContent.before('<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>');
                $toc = $("#toc");
            }
        }
        if($toc.length > 0) {
            $toc.toc({content: ".article-content", headings: "h2,h3,h4"});
            if($('.another_category').length > 0) {
                $toc.find('li:last').remove();
            }
        }
    });
</script>

</body>
</html>

 

3.2 자동 목차를 h2 바로 위에 나오게 설정하기

 

이건 강의로 있는 건 아니고 해당 글의 댓글에서 질문하신 분이 있고 답변을 해주신 게 있길래 그걸 읽었다.

 

<script>
    // 목차 생성
    $(document).ready(function() {
        var $toc = $("#toc");
        if($toc.length == 0) {
            var firstContent = $('.article-content').children().eq(0);
            var titleLength = $('.article-content h2,h3,h4').length - $('.another_category h4').length - $('h3.tit_list_type').length;
            if(titleLength > 0 && firstContent.length > 0) {
$('<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>').insertBefore('.article-content h2:first')
                $toc = $("#toc");
            }
        }
        if($toc.length > 0) {
            $toc.toc({content: ".article-content", headings: "h2,h3,h4"});
            if($('.another_category').length > 0) {
                $toc.find('li:last').remove();
            }
        }
    });
</script>

 

거기에 있는 CSS를 다 적용하면 보이는 페이지

 

적용을 하면 위와 같은 이미지처럼 나오는데, 맨 위에는 code를 입력해놓아서 까만 화면이고 저렇게 해놓으니 첫 번째 h2 등장하면 바로 위에 목차를 설정하도록 나오긴 한다.

 

솔직히 말하면 댓글을 읽고도 이해를 못 했다. 뭘 바꾸라고는 하는데 어디에 저걸 배치해서 놔두라는 걸 이해하지 못해서. 그래서 스크립트 수업도 들었다. 이해해 보려고. (???) 결국엔 그냥 몸을 때워서 이거 먹히냐, 안 먹히냐 그 싸움으로 들어가서 먹힐 때까지 싸웠다. 그리고 해냈다.

 

내가 적용을 시킨 걸 보면 설명해주신 부분이 다 맞는 말인데 나 같은 멍청한 사람은 이해하기가 좀 어려웠다. 내가 정말 공부를 열심히 해봐야겠다는 생각을 하게 됐다.

 

3.3 CSS 살짝 수정하기

 

 

복사했던 CSS에서 조금 수정했다. 역시 꾸미는 건 CSS인데, CSS를 잘 배워두면 대충 저런 모양은 만들 수 있다. 앞에 있던 땡땡이 같은 것도 없앨 수 있고 목차의 너비를 넓혀서 사용할 수도 있다. 접어서 사용하는 법도 해보고 싶긴 한데, 잘 모르겠어서 일단은 내버려 둘 생각이다.

 

+) 현재 이 티스토리에는 적용하지 않았는데, 다른 티스토리에 동일한 스킨을 사용 중인데 그 스킨에는 적용이 되는데 이 티스토리에는 희한하게 안 먹혀서 적용이 안 되고 있다. 사실 이 티스토리에 쓰려고 다른 티스토리에 테스트 중이었는데 말이다ㅠ_ㅠ 슬퍼라.

 

4. 스킨 정보

스킨명: GRAVITY SKIN 8

스킨 배포 및 판매: 한재 님