티스토리 블로그 자동 목차 생성 방법

안녕하세요.

 

오늘은 티스토리 블로그에서 자동 목차를 생성하는 방법에 대해 공유하고자 합니다.

 

아래 순서대로 따라오시면 쉽게 목차를 생성하실 수 있을 거예요.

 

그럼 시작하겠습니다.

 

 

1. 주의사항

이 방법은 자동으로 목차를 생성하는 방법입니다. 제가 사용한 방법은 글에서 가장 첫 번째 <h2> 태그 바로 위에 목차를 자동으로 생성해 줍니다. 그렇기 때문에 첫 번째 <h2> 태그의 위치가 중요합니다. <h2> 태그라고만 말하면 html을 잘 모르시는 분들은 어려우실 텐데요. 티스토리 글 작성 상단에 '제목 1'이 바로 <h2> 태그가 적용된 것이기 때문에 그것을 사용하시면 됩니다.

주의사항을 확인하셨고 적용하고자 하신다면 아래 내용을 순서대로 따라 해주세요.

 

2. 적용 방법

2-1. 스킨 편집 들어가기

블로그 관리>꾸미기>스킨 편집을 들어가 줍니다.

2-2. html 편집 들어가기

2-3. HTML 편집

html 편집을 클릭해서 들어오시면 상단에 HTML, CSS, 파일업로드가 보이실 겁니다. 가장 첫 번째인 HTML을 선택해 주세요. </head> 바로 윗부분에 아래 코드를 모두 붙여 넣기 해줍니다.

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.min.js"></script>

	<script>
	window.onload = function() {
		const content = document.querySelector('.entry-content'); 
		const headings = content.querySelectorAll('h2, h3'); 
		const tocDiv = document.createElement('div');
		tocDiv.id = 'toc';
		
		// "목차"라는 제목을 가진 heading을 생성
		const tocTitle = document.createElement('span');
		tocTitle.innerHTML = "<strong>목차</strong>";
		tocTitle.style.borderBottom = '1px solid #ddd';
		tocTitle.style.paddingBottom = '10px';
		tocTitle.style.marginBottom = '10px';
		tocTitle.style.fontSize = '20px';
		
		tocDiv.appendChild(tocTitle);

		if (headings.length > 0) {
			const ul = document.createElement('ul');
			let lastH2 = null;

			headings.forEach((heading, index) => {
				const headingText = heading.textContent.trim();
				const id = `toc-item-${index}`;
				heading.setAttribute('id', id);

				// '목차'라는 단어가 포함된 제목은 제외
				if (headingText.includes('목차')) {
					return;
				}

				const a = document.createElement('a');
				a.href = `#${id}`;
				a.textContent = headingText;

				if (heading.tagName === 'H2') {
					const li = document.createElement('li');
					li.appendChild(a);
					ul.appendChild(li);
					lastH2 = li;
				} else if (heading.tagName === 'H3' && lastH2) {
					let subUl = lastH2.querySelector('ul');
					if (!subUl) {
						subUl = document.createElement('ul');
						lastH2.appendChild(subUl);
					}
					const li = document.createElement('li');
					li.appendChild(a);
					subUl.appendChild(li);
				}
			});

			tocDiv.appendChild(ul);
			
			// 첫 번째 <h2> 태그 바로 위에 목차 삽입
			const firstH2 = content.querySelector('h2');
			if (firstH2) {
				firstH2.parentNode.insertBefore(tocDiv, firstH2);
			}
		}
	};
	</script>

 

2-4. CSS 편집

이번엔 CSS를 편집해 주도록 하겠습니다. CSS를 클릭하시고 가장 밑에 아래 코드를 추가해 주세요. CSS가 엄청 길 텐데 당황하지 마시고 맨 밑에 넣어주시면 됩니다.

#toc {
  border: 1px solid #ddd;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-bottom: 20px;
}

#toc h2 {
  font-size: 1.5rem; /* 제목 크기 조절 */
  margin-top: 0;
}

#toc ul {
  list-style-type: none;
  padding-left: 0;
}

#toc ul ul {
  padding-left: 20px; /* 하위 목록 들여쓰기 */
}

#toc li {
  margin-bottom: 5px;
}

#toc a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}

#toc a:hover {
  text-decoration: underline;
}

 

2-5. 마무리

이제 적용 버튼을 클릭해 주시면 실제 목차가 적용된 모습을 보실 수 있습니다. 해당 블로그에도 적용된 것과 동일한 것입니다. 추가적으로 수정해서 쓰신다고 하신다면 쓰셔도 괜찮습니다.

이 이미지는 이 블로그의 다른 포스팅 글의 목차가 적용된 것을 캡처해 본 것입니다.

 

감사합니다.