[티스토리][서식 X] 목차

by

(이력)(형식 X) 목차 처음부터 끝까지 모두 자동 생성!!


이야기
이야기

1. 목차 작성 필요

블로그의 목차를 자동으로 생성하는 것은 매우 중요합니다. 목차를 추가하면 독자가 콘텐츠를 더 쉽게 이해하고 탐색할 수 있습니다.

# 편의

블로그에 긴 글을 작성하는 경우 목차는 독자가 기사의 내용을 더 빨리 이해하고 이해하는 데 도움이 됩니다. 긴 글일 경우 스크롤을 내려 내용을 찾는 대신 목차를 클릭하면 해당 내용으로 바로 이동할 수 있기 때문입니다. 이를 통해 독자는 적은 시간과 노력으로 블로그를 활용할 수 있습니다.

'추천 관련글,

# SEO(검색 엔진 최적화)

목차는 검색 엔진 최적화에 필수적입니다.보지마. 검색 엔진은 콘텐츠의 품질과 함께 페이지의 구조를 평가합니다. 페이지의 목차는 검색 엔진이 콘텐츠를 더 잘 이해하는 데 도움이 되므로 검색 결과에서 더 높은 위치에 표시될 가능성이 높아집니다. 이는 블로그의 가시성과 방문자 수를 늘리는 데 큰 역할을 합니다.

# 블로그 전문성

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

2. jquery.toc.js 다운로드 > 업로드 기록

jquery.toc.js
0.00MB


컴퓨터에 파일을 다운로드합니다.


피부 편집
피부 편집

히스토리 매니저에 접속하여 왼쪽의 “장식 > 스킨 편집” 메뉴 버튼을 눌러 “스킨 편집” 메뉴로 이동합니다.


HTML 편집
HTML 편집 버튼

스킨 편집 화면에서 오른쪽의 “HTML 편집” 버튼을 클릭합니다.


파일 업로드
파일 업로드

세 개의 탭 중 가장 오른쪽에 있는 “파일 업로드” 버튼을 클릭하면 위의 이미지와 같이 나타납니다. 여기서 아래 “추가” 버튼을 클릭하여 제가 업로드한 jqeury.toc.js 파일을 업로드 합니다. 업로드에 성공하면 images/jquery.toc.js 파일이 표시됩니다.

3. 자동 HTML TOC 적용


HTML 편집
HTML 편집

HTML 탭으로 이동하여 핵심 목차 자동 설정에 필요한 코드를 등록해 보겠습니다.


js 입력
톡 스크립트 입력

헤더 끝에서 앞서 업로드한 .jquery.toc.js 파일을 가져옵니다.

<script src="http://codehive.kr/m/./images/jquery.toc.js"></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) 플러그인을 이용하여 티스토리 블로그 게시물의 내용에 자동으로 목차를 생성하는 기능을 구현한 것이다.

구체적으로 $(document).ready() 함수 내에서 ID 값이 #toc인 TOC 목록 요소를 찾고, 찾지 못한 경우 클래스가 .tt_article_useless_p_margin인 요소의 자식 중 첫 번째 요소를 검색하고 book ab 클래스가 있는 div를 검색합니다. -toc 태그 내에 목차 목록 항목을 만듭니다.

그런 다음 목차 플러그인을 사용하여 목차를 만듭니다. 이때 content 옵션은 .tt_article_useless_p_margin 클래스를 지정하고 header 옵션은 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″를 기반으로 부제목을 추가해야 합니다.

그런 다음 재미있는 블로그를 작성하십시오. 다른 질문이 있으시면 의견에 적어 주시면 답변 해 드리겠습니다.