[티스토리] 목차 만들기

2022. 6. 5. 15:33· 잡식/티스토리
목차
  1. 개요
  2. jQuery TOC 플러그인 다운과 업로드
  3. 스크립트 적용
  4. 스타일 적용
  5. 목차 서식 등록
  6. 작성 글에 목차 적용

목차

     

     

    개요

    티스토리 글쓰기에 유용한 목차를 만들어보겠습니다.

    jQuery 플러그인 Table of Contents(TOC)를 이용하고 참조한 블로그에 많은 도움을 받았습니다.

    더 자세히 알고 싶으면 참조한 블로그를 방문하세요.

     

    스킨은 북클럽으로 하시는 것을 권장합니다.

     

    참조한 블로그 :

    https://sangminem.tistory.com/307

     

    티스토리 글에 자동으로 목차 넣기

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

    sangminem.tistory.com

     

     

    jQuery TOC 플러그인 다운과 업로드

    다음 자바스크립트 파일을 다운받습니다.

     

    jquery.toc.zip
    0.00MB

     

    관리페이지 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드로 이동합니다.

    추가 > 다운받은 자바스크립트 파일을 업로드 합니다.

    목록에 보이면 성공적으로 추가된 것 입니다.

     

     

    스크립트 적용

    관리페이지 > 꾸미기 > 스킨 편집 > html 편집으로 이동합니다.

    body 태그 안쪽 맨 아래에 작성합니다. (ctrl f 검색 기능을 이용하면 좀 더 수월합니다.)

    아래의 코드를 기입합니다.

    <script src="./images/jquery.toc.min.js"></script>
    <script>
        // 목차 생성
        $(document).ready(function() {
            $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
        });
    </script>

    작성한 글(tt_article_useless_p_margin 클래스 내부) 제목1,2(h2, h3, h4) 태그에만 목차를 적용하겠다는 의미입니다.

     

    적용하면 다음과 같을 것 입니다. 

     

     

     

    스타일 적용

    관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 로 이동합니다.

    목차 및 제목 스타일을 적용하겠습니다.

     

    목차 스타일

    /* 목차 스타일 */
    .book-toc {
        position: relative;
        width: fit-content;
        border: 1px solid #b0d197;
        padding: 10px 20px 10px 15px;
        z-index: 1;
    }
    .book-toc:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #b0d197;
        z-index: -1;
        opacity: 0.1;
    }
    .book-toc p {
        font-weight: bold;
        font-size: 1.2em !important;
        color: #396120;
    }
    #toc * {
        font-size: 20px;
        color: #000 !important;
    }
    #toc {
        margin-bottom: 0;
    }
    #toc a:hover {
        color: #000;
    }
    #toc ul {
        margin-top: 5px;
        margin-bottom: 0px;
    }
    #toc > li {
        padding-left: 0;
        text-indent: 0;
        list-style-type: disc;
        margin-bottom: 10px;
    }
    #toc > li > a {
        text-decoration:none;
    }
    #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: 0;
        margin-top: 5px;
    }
    #toc > li > ul > li > a {
        font-size: 1em;
        text-decoration:none;
    }
    #toc > li > ul > li > ul {
        padding-left: 10px;
        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: 0;
        margin-top: 3px;
    }
    #toc > li > ul > li > ul > li > a {
        font-size: 0.875em;
        text-decoration:none;
    }

     

    제목 스타일

    /* 글 제목1,2,3 스타일 */
    .tt_article_useless_p_margin h2 {
    	text-align: left;
    	border-left: #517135 12px solid;
    	border-bottom: 1px solid #517135;
    	padding: 3px 0 10px 10px;
    	margin: 30px 0 20px 0;
    }
    .tt_article_useless_p_margin h3 {
    	text-align: left;
    	border-left: #548a25 8px solid;
    	border-bottom: 1px solid #548a25;
    	padding: 3px 0 10px 10px;
    	margin-bottom: 15px;
    }
    .tt_article_useless_p_margin h4 {
    	text-align: left;
    	border-left: #71b932 6px solid;
    	border-bottom: 1px solid #71b932;
    	padding: 3px 0 10px 10px;
    	margin-bottom: 15px;
    }

     

     

    목차 서식 등록

    티스토리에서 기본으로 제공하는 메뉴가 없으므로 목차를 적용하려면 서식을 등록해 주는 것이 좋습니다.

     

    관리 페이지 > 콘텐츠 > 서식 관리 > 서식 쓰기 로 이동합니다.

    기본모드 > HTML 모드 를 선택합니다.

     

    제목을 정하고 다음 코드를 작성합니다.

    <div class="book-toc">
      <p>목차</p>
      <ul id="toc"></ul>
    </div>

     

    적용하면 다음과 같을 것 입니다.

    작성을 했으면 완료 버튼을 누릅니다.

     

     

    작성 글에 목차 적용

    글 에디터에서 서식을 선택합니다.

    저장한 서식을 불러옵니다.

    원하는 위치에 적절히 삽입합니다.

     

     

     

     

     

    참조

    https://sangminem.tistory.com/307

     

     

     

     

     

    1. 개요
    2. jQuery TOC 플러그인 다운과 업로드
    3. 스크립트 적용
    4. 스타일 적용
    5. 목차 서식 등록
    6. 작성 글에 목차 적용
    '잡식/티스토리' 카테고리의 다른 글
    • [티스토리] Category 접기 / 펼치기
    너지살
    너지살
    너지살
    너지살개발자
    너지살
    전체
    오늘
    어제
    • 분류 전체보기 (375)
      • 잡식 (2)
        • 티스토리 (2)
      • 개발 일지 (0)
        • OMS 프로젝트 (4)
        • 우테코 6기 프리코스 (1)
      • Git (2)
      • JAVA (15)
        • Java 공부 (6)
        • 자료구조 (4)
        • 도움되는 메모 (4)
      • DevOps (18)
        • AWS (6)
        • Docker (2)
        • Jenkins (1)
        • Nginx (1)
        • Kafka (6)
        • RabbitMQ (2)
      • Spring, Spring Boot (16)
        • Test Code (1)
        • AOP (2)
        • Batch (3)
        • Cache - Redis (5)
        • Cloud Config - 설정 파일 관리 (3)
        • 성능 측정 (1)
        • 예외 처리 (1)
      • BackEnd (1)
        • Spring 공부 (1)
        • Thymeleaft (0)
      • DB (17)
        • JPA (2)
        • DB 공부 (3)
        • DB 포스팅 (4)
        • DB 답장 (1)
        • MySQL (2)
        • Redis (5)
        • MongoDB (0)
      • CS (8)
        • Spring (4)
        • DataBase (3)
        • Java (1)
      • Algorithm (203)
        • 알고리즘 개념 (5)
        • 정렬 알고리즘 (11)
        • 프로그래머스 문제풀이 (18)
        • 백준 문제풀이 (165)
        • 소프티어 문제풀이 (3)
        • 알고리즘 시험 정리 (1)
      • SQL (0)
        • 문법 (1)
        • 프로그래머스 문제풀이 (52)
        • 리트코드 문제풀이 (19)
      • IT (1)
        • IT 공부 (1)
      • 정리 (10)
        • 질문 정리 (10)

    블로그 메뉴

    • 홈
    • 태그
    • 방명록

    공지사항

    인기 글

    태그

    • 설정
    • Union-Find
    • 소프티어
    • dynamic programing
    • 다이나믹프로그래밍
    • Bitmast
    • MST
    • Sorting algorithm
    • 다음 순열 찾기
    • Next permutation
    • 투 포인터
    • 분리 집합
    • Java 정리
    • 크루스칼 알고리즘
    • Spring Boot
    • git
    • 병렬 처리
    • 다이나믹 프로그래밍
    • dynamiceprogramming
    • 그래프 이론
    • Java
    • Algorithm
    • 두 포인터
    • 자료구조
    • db
    • 질문 정리
    • docker
    • Spring Boot Redis 연결
    • 비트마스킹
    • two pointer
    • DFS
    • Test code
    • Spring Batch
    • 부분탐색
    • redis
    • 최소 스패닝 트리
    • 외판원 순회 문제
    • cache
    • 경로표현식
    • 유니온파인드
    • 깊이/너비 우선탐색
    • 그래프 탐색
    • 알고리즘
    • 투포인트
    • 데이터베이스
    • 우선수위큐
    • JPA
    • 백준
    • 최소 신장 트리
    • DP

    최근 댓글

    최근 글

    hELLO · Designed By 정상우.v4.2.2
    너지살
    [티스토리] 목차 만들기
    상단으로

    티스토리툴바

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.