블로그글을 사용자가 포스팅하면 자동으로 목차만들기
사용자가 블로그 글을 포스팅할 때마다 본문 상단에 목차가 자동으로 생성되도록 하려면, Tistory 블로그 스킨을 수정하여 JavaScript를 활용한 자동 목차 생성 기능을 추가할 수 있습니다. 현재는 매번 코드를 수동으로 입력해야 하지만, 아래 방법을 통해 이를 자동화할 수 있습니다.
구현 방법
Tistory 스킨의 HTML과 CSS를 편집하여, 포스트 본문의 제목(h1, h2 등)을 기반으로 목차를 동적으로 생성하는 스크립트를 삽입합니다. 다음 단계를 따라 설정하세요.
1. 스킨 HTML에 TOC 컨테이너 추가
Tistory 스킨 편집에서 포스트 본문이 표시되는 섹션(예: <div class="entry-content"> 앞)에 아래 코드를 추가합니다. 이 컨테이너는 목차가 표시될 위치입니다.
주의: 이 코드는 개별 포스트 페이지에만 나타나도록 포스트 템플릿 섹션에 추가해야 합니다. Tistory에서 제공하는 조건문(예: <!--@post-->와 <!--/post-->)을 사용해 포스트 페이지에만 적용되게 할 수 있습니다.
2. JavaScript 코드 삽입
아래 스크립트를 스킨의 <head> 섹션이나 <body> 끝부분에 추가합니다. 이 스크립트는 페이지가 로드될 때 본문의 제목을 찾아 목차를 생성합니다.
document.addEventListener('DOMContentLoaded', function() {
const tocContainer = document.querySelector('.toc-container');
const content = document.querySelector('.entry-content'); // 본문 컨테이너의 클래스나 ID로 조정 필요
if (tocContainer && content) {
const headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6');
if (headings.length > 0) {
const tocTitle = document.createElement('h2');
tocTitle.textContent = '목차';
tocContainer.appendChild(tocTitle);
const tocList = document.createElement('ul');
headings.forEach((heading, index) => {
if (!heading.id) {
heading.id = 'heading-' + index;
}
const li = document.createElement('li');
const a = document.createElement('a');
a.href = '#' + heading.id;
a.textContent = heading.textContent;
li.appendChild(a);
tocList.appendChild(li);
});
tocContainer.appendChild(tocList);
}
}
});
</script>
주의: .entry-content는 포스트 본문이 포함된 실제 HTML 요소의 클래스나 ID로 변경해야 합니다. 스킨의 HTML 구조를 확인해 적절히 조정하세요.
3. CSS로 스타일링
목차의 모양을 꾸미기 위해 아래 CSS를 스킨의 CSS 파일이나 <style> 태그 안에 추가합니다.
margin-bottom: 20px;
}
.toc-container h2 {
font-size: 18px;
margin-bottom: 10px;
}
.toc-container ul {
list-style: none;
padding: 0;
}
.toc-container li {
margin-bottom: 5px;
}
.toc-container a {
text-decoration: none;
color: #333;
}
.toc-container a:hover {
text-decoration: underline;
}
동작 원리
- 페이지 로드 시: 스크립트가 DOM이 로드된 후 실행됩니다.
- 제목 탐지: 본문 내 모든 제목 태그(h1~h6)를 찾아 목록을 생성합니다.
- ID 생성: 제목에 ID가 없으면 자동으로 부여합니다(예: heading-0, heading-1).
- 목차 생성: 각 제목에 대한 링크를 만들어 .toc-container에 삽입합니다.
- 스타일 적용: CSS로 깔끔한 디자인을 적용합니다.
추가 고려사항
- 포스트 페이지 제한: 홈페이지나 카테고리 페이지에서 목차가 나타나지 않도록, Tistory의 조건문을 활용하거나 JavaScript에서 페이지 유형을 확인하는 로직을 추가할 수 있습니다.
- 본문 클래스 확인: .entry-content가 스킨에 맞지 않으면, 개발자 도구로 올바른 선택자를 찾아 수정하세요.
- 성능: 일반적인 블로그 포스트라면 성능 문제는 거의 없지만, 제목이 많을 경우 최적화를 고려할 수 있습니다.
이 설정을 완료하면, 사용자가 새로운 포스트를 작성할 때마다 본문 상단에 목차가 자동으로 생성됩니다. 더 이상 수동으로 코드를 입력할 필요가 없습니다!
'티스토리 설정하기' 카테고리의 다른 글
| 링크박스구현하기, 다운로드 코드포함 (5) | 2024.10.18 |
|---|---|
| 구글 블로그 스팟, AdSense 등록 (0) | 2024.07.27 |
| 영문 주소 변환하기-1 (1) | 2024.07.10 |
| 가독성이란 (0) | 2024.07.10 |
| 애드센스 신청 후 작업 최적화의 중요성 (0) | 2024.07.10 |
| 티스토리 설정-카테고리 변경등 (0) | 2024.07.08 |