본문 바로가기

[티스토리][서식 X] 목차 올(all) 자동 생성 하기 처음부터 끝까지!!

출입금지 발행일 : 2023-03-12

[티스토리][서식 X] 목차 올(all)자동 생성 하기 처음부터 끝까지!!

티스토리
티스토리

1. 목차 생성의 필요성  

블로그에 목차를 자동 생성하는 것은 매우 중요합니다. 목차를 추가함으로써 독자들이 쉽게 내용을 파악하고 찾아볼 수 있기 때문입니다.

# 편의성

  블로그의 긴 글을 작성할 때 목차가 있다면 독자들은 글 내용을 더욱 빠르게 이해하고 파악할 수 있습니다. 긴 글이라면 스크롤을 하며 내용을 찾기 보다는 목차를 눌러서 바로 이동할 수 있기 때문입니다. 이로 인해 독자들은 더 적은 시간과 노력을 들여서 블로그를 활용할 수 있게 됩니다.

# SEO(검색 엔진 최적화)

  검색 엔진 최적화를 위해서는 목차가 필수적입니다. 검색 엔진은 내용의 품질과 함께 페이지의 구조를 중요하게 생각합니다. 페이지 내의 목차가 있으면 검색 엔진은 내용을 더 잘 파악할 수 있기 때문에, 검색 결과 상위에 노출될 확률이 높아집니다. 이는 블로그의 노출도와 방문자 수 증가에 큰 역할을 합니다.

# 블로그의 전문성

  블로그의 목차가 있으면 블로거의 전문성을 나타낼 수 있습니다. 글을 작성할 때 목차를 만들어 제공함으로써 블로거는 독자들에게 전문성 있는 글을 제공하고 있다는 이미지를 고객에게 전달할 수 있습니다. 이러한 이유들로 블로그 내에 목차를 자동 생성하는 기능은 블로깅에 있어서 매우 중요합니다.

 

2. jquery.toc.js 다운로드 > 티스토리 업로드

jquery.toc.js
0.00MB

본인 컴퓨터에 해당 파일을 다운로드 받으세요.

 

스킨편집
스킨편집

티스토리 관리자로 접속 하며 좌측에 있는 "꾸미기 > 스킨 편집" 메뉴 버튼을 눌러 스킨 편집 메뉴로 이동 합니다.

html 편집
html 편집 버튼

스킨 편집 화면에서 우측에 "html 편집" 버튼을 눌러 주세요.

파일업로드
파일업로드 하기

  3가지의 탭에서 가장 오른쪽에 있는 "파입업로드" 버튼을 누르면 위의 이미지 처럼 표시 됩니다. 여기서 맨 하단에 있는 "추가" 버튼을 눌러제가 업로드 해 놓은 jqeury.toc.js 파일을 업로드 시켜 줍니다. 업로드가 정상적으로 되었다면 images/jquery.toc.js 파일이 보이실겁니다.

 

3. HTML 자동 목차 적용

html 수정
html 수정

 

HTML 탭으로 이동 하여, 이제 핵심적인 목차 자동 설정에 필요한 코드를 등록 해보도록 합시다.

 

js 입력
tock script 입력

 head 마지막 부분에 앞아서 업로드 한 .jquery.toc.js 파일을 import 해줍니다.

<script src="./images/jquery.toc.js"></script>

 

auto scirpt
목차 자동 생성 script

<script>
    $(document).ready(function() {
        var $toc = $("#toc");
        if($toc.length == 0) {
            var firstContent = $('.tt_article_useless_p_margin').children().eq(1);
            var titleLength = $('.tt_article_useless_p_margin 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: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
            if($('.another_category').length > 0) {
                $toc.find('li:last').remove();
            }
        }
    });
</script>

 

 

  해당 코드는 jQuery와 TOC (Table of Contents) 플러그인을 사용하여, 티스토리 블로그 글 내용에 자동 목차를 생성하는 기능을 구현한 코드입니다.

  구체적으로는, $(document).ready() 함수 안에서, #toc 이라는 ID 값을 가지는 목차 리스트 엘리먼트를 찾고, 없으면 .tt_article_useless_p_margin 클래스를 가진 요소의 자식 중 첫 번째 요소를 가져와 book-toc 클래스를 가진 div 태그 안에 목차 리스트 엘리먼트를 생성합니다.

  그리고, TOC 플러그인을 사용하여 목차를 생성하는데, 이때 content 옵션에는 .tt_article_useless_p_margin 클래스를, headings 옵션에는 h2, h3, h4 태그를 지정하여 해당 태그를 기준으로 목차를 생성합니다. 또한, .another_category 클래스가 있는 경우 해당 항목을 목차에서 제외시킵니다.

  따라서, 해당 코드는 티스토리 블로그 글에 목차를 자동으로 생성하는 기능을 제공하며, 이를 통해 독자들이 글 내용을 쉽게 파악할 수 있도록 도와줍니다.

 

4. CSS 파일 적용

/* 목차 스타일 */
.txc-textbox {
	text-align: left !important;
}
.book-toc {
    position: relative;
    /* width: fit-content; */
    border: 1px solid #b0d197;
    padding: 10px 20px 10px 15px;
    z-index: 1;
		width: 80%;
		margin: 30px auto;
}
.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;
}

  해당 CSS 파일은 제 블로그에 사용되는 CSS 파일입니다.  본인이 원하는 스타일대로 수정이 가능 합니다. 코드 수정이 어려우신분은 댓글 남겨 주시면 원하는 스타일대로 수정해드리도록 할께요.

 

5. 자동 생성 목차 확인

   모든 작업은 끝이 났습니다. 편안하기 그냥 글 작성만 하시면 자동으로 목차가 제일 위쪽에 자동으로 생성 되는 모습을 보실수 있습니다. 다만 글 작성시 유의할 사항이 있는데요.

 

글 작성은 "h2", "h3", "h4" 기준으로 소제목을 붙여 주셔야해요.

 

그럼 즐거운 블러그 작성하세요. 추가 궁금 하신 내용을 댓글 작성해주시면 답변 드리도록 할께요.

반응형
저작자표시 비영리 변경금지

'개발, 코딩해볼래? > IT, 그리고 잡학다식' 카테고리의 다른 글

asdf로 kubectl 멀티 버젼 사용하기  (0) 2023.11.20
[mac, windows] 사용중인 특정 포트(port) 강제 종료  (0) 2023.07.02
[java] OpenJDK java (8/11/17) version 설치 for brew on Mac(intel/m1/m2)  (0) 2023.04.19
[git] 원격 remote main branch 강제 pull .feat 충돌 Conflict  (0) 2023.03.30
최신, 초간단 티스토리블로그 + 호스팅kr(hostingkr) 도메인 연결(구매팁)  (0) 2023.03.10

관련글

댓글

티스토리툴바