일반 정보/블로그

티스토리 자동 목차 생성 최신 방법. 따라만 하세요.

작은딸기 2022. 12. 14. 15:09

안녕하세요. 이번 포스팅은 자동 목차 만드는 방법에 대해 알아보고자 합니다.

매번 수작업으로 만든다면 너무 노가다스러운 일이죠.

 

저는 Odyssey 스킨을 사용중이고 다른 스킨에서는 테스트 해보지 않았습니다만 다른 스킨에서도 사용할 수 있게 가이드 해 드리겠습니다.


목차


    1. 첨부파일 업로드

    우선 목차를 자동으로 생성하려면 확장자가 js로 된 파일을 업로드 해야합니다.

    아래 첨부파일을 다운 받으세요.

    jquery.toc.min.js
    0.00MB


    파일을 받으셨으면 티스토리 관리모드로 들어가주세요.

    관리 > 꾸미기 > 스킨편집 순서로 가시면 됩니다.


     

    그러면 새로운 창이 하나 뜨는데 그 창의 우측 상단을 보시면 html 편집 이라는 버튼이 있습니다. 이걸 클릭하세요.


    그러면 HTML, CSS, 파일업로드 3개의 탭이 있습니다. 파일업로드를 클릭하세요.


    맨 아래 보시면추가 버튼이 있습니다. 추가 버튼을 클릭하여 아까 받은 js 파일을 업로드한 후 적용버튼을 클릭합니다.


    리스트에 아래처럼 나타나면 됩니다.


    2. HTML 내용 추가

    <!-- 자동 목차 시작 -->
    <script src="./images/jquery.toc.min.js"></script>
    <!-- 자동 목차 끝 -->

    위 코드를 복사합니다.

    코드를 복사한 후 아래 HTML 탭으로 가신 후 </head> 바로 앞에 붙여넣습니다. 그리고 상단에 적용 버튼을 누르세요.

    아래 이미지를 참고하세요.


    <!-- 자동 목차 시작 -->
    <script>
      $(document).ready(function () {
        var $toc = $("#toc");
        $toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" });
      });
    </script>
    <!-- 자동 목차 끝 -->

    마찬가지로 위 코드를 복사하신 후 </body> 바로 앞에 붙여 넣으시면 됩니다. 그리고 상단에 적용 버튼을 누르세요.

    아래 이미지를 참고하세요.


    중요한 사항으로 여기서 적용하는 스킨중에 간혹 class 명이 맞지 않는 경우가 있는데 class명이 맞지 않으면 해당 기능이 돌아가지 않아요.  만약 이 포스팅의 끝까지 해보신 후 기능이 되지 않는다면 아래 내용을 따라서 해보세요.

     

    먼저 본인이 작성한 글을 하나 오픈합니다. 그 다음 키보드의 F12 버튼을 누르세요.

    아래처럼 오른쪽이나 새로운 창으로 영어로 어지럽게 화면이 나오면 됩니다.

     

    그 다음 아래 주황색으로 표시한 줄의 위에 버튼을 클릭 한 후 본문 중 한곳을 클릭하세요.

    그러면 아래처럼 해당 영역의 위치로 안내를 해주는데요 <div class=" 이후에 쓰여있는 영문을 복사합니다. 

    저 뒤에 contents_style은 아닙니다. 아래 이미지에서는 [ tt_article_useless_p_margin ]입니다.

    그 다음 복사한 영문과 아래 content 옆에 있는 영문이 다르다면 바꿔서 적용하세요.

    $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});

     


    3. CSS 등록

    css 탭에서 제일 아래 부분에 아래 코드를 추가하세요.

    /* 자동 목차 스타일 */
    .book-toc {
        position: relative;
        width: fit-content;
        border: 1px solid #aaaaaa;
        width: 100%;
        height: 100%;
        padding: 10px 20px 0px 20px;
        z-index: 1;
    }
    .book-toc:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #cfcfcf;
        z-index: -1;
        opacity: 0.1;
    }
    .book-toc p {
        font-weight: bold;
        font-size: 1.2em !important;
        color: #4e504d;
    }
    
    #toc * {
        font-size: 18px;
        color: rgb(65, 65, 65) !important;
    }
    #toc {
        padding: 0px 20px 0px 25px;
    }
    #toc a:hover {
        color: rgb(65, 65, 65);
    }
    #toc ul {
        margin-top: 5px;
        margin-bottom: 0px;
    }
    #toc > li {
        padding-left: 0;
        text-indent: 0;
        list-style-type: disc;
        padding: 0px 20px 0px 0px;
    	  margin-bottom: 10px;
        margin-top: 7px;
    } 
    #toc > li > a {
        text-decoration:none;
        font-weight: bold
    }
    #toc > li > ul {
        padding-left: 20px;
        margin-top: 0;
        margin-bottom: 0;
    }
    #toc > li > ul > li {
        font-size: 0.87em;
        padding-left: 0;
        text-indent: 0;
        list-style-type: disc;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    #toc > li > ul > li > a {
        font-size: 1em;
        text-decoration:none;
    }
    #toc > li > ul > li > ul {
        padding-left: 20px;
        margin-top: 0;
        margin-bottom: 0;
    }
    #toc > li > ul > li > ul > li {
        font-size: 0.87em;
        padding-left: 0;
        text-indent: 0;
        list-style-type: disc;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    #toc > li > ul > li > ul > li > a {
        font-size: 0.875em;
        text-decoration:none;
    }
    
    /* h2, h3, h4 스타일 */
    .tt_article_useless_p_margin h2 {
    	text-align: left;
    	background-color: black;
      border-left: gray 10px solid;
      border-bottom: 1px solid gray;
    	padding: 3px 0 5px 10px;
    	margin: 30px 0 20px 0;
    }
    .tt_article_useless_p_margin h3 {
    	text-align: left;
    	border-left: #d4d4d4 8px solid;
    	border-bottom: 1px solid #d4d4d4;
    	padding: 3px 0 5px 10px;
    	margin-bottom: 15px;
    }
    .tt_article_useless_p_margin h4 {
    	text-align: left;
    	border-left: #cfcfcf 6px solid;
    	border-bottom: 1px solid #cfcfcf;
    	padding: 3px 0 5px 10px;
    	margin-bottom: 15px;
    }

    4. 서식 등록

    서식 등록의 상세 내용은 생략하겠습니다.

    경로는 관리 > 콘텐츠 > 서식관리에서 추가하시면 됩니다. 모르시는 분들은 아래 이미지 참고하세요.

     

    글쓰기에서 매번 목차를 만들기 어려우니 서식에 등록을 하셔서 사용하시길 권장합니다.

    서식 등록시 HTML 모드로 아래 코드를 등록해서 사용하세요.

    <div class="book-toc">
      <p data-ke-size="size16">Contents</p>
      <ul id="toc"></ul>
    </div>

    5. 작성해보기

    자 이제 여기까지 오셨으면 작성해서 테스트 해보시면 됩니다.

    간단하게 내용을 작성합니다.

    다만 소제목은 h2나 h3으로 작성되어야합니다. [제목2, 제목3]에 해당합니다.


    아래 이미지에서는 단원1, 단원2를 [제목3]으로 작성하였습니다.


    다음에는 빈 여백을 클릭 한 후 위에서 등록한 서식을 클릭 해서 적용하시면 됩니다.


    아래처럼 나오면 됩니다.


    이제 끝입니다. 글쓰기를 마치면 (발행하시면) 자동으로 목차가 나타납니다.

     

    목차의 색상은 위에 css에서 변경하시면 됩니다.


    이제 잘 쓰시면 됩니다. 감사합니다.