안녕하세요. 블로그 자동목차 TOC(Table of contents) 생성이 안될 때 방법에 대해서 알아보겠습니다.
목차
TOC란?
TOC란?
TOC는 쉽게 말하면, 목차 입니다. 글 구성내용입니다.
독자에게 매끄러운 읽기 경험을 제공하는 핵심 요소 중 하나는 컨텐츠의 구성과 접근성입니다.
TOC를 통해, 잘 구성된 블로그는 사용자 경험을 향상시킬 뿐만 아니라 검색 엔진 최적화(SEO)에도 도움이 됩니다.
시행착오 및 문제해결법 찾는 단계
본인은 2024년 1월 25일에 블로그 운영에 앞서 TOC(Table of contents) 기능을 도입하려고 했습니다.
각각의 블로그들 총 5~6개 블로그에 포스팅 되어있는 자동목차 설정 방법을 적용해봤습니다.
TOC를 적용하는 방법은 크게 3단계 였습니다.
1. TOC 관련 플러그인 js (java script) 자바스크립트 파일을 업로드한다.
2. 티스토리 블로그 관리> 스킨편집 > html편집 에 들어가, <head> </head> 사이에 해당 자바스크립트 파일 소스를 불러오는 코드를입력하고, 꾸미기 기능을 하는 CSS 편집을 통해 해당 TOC 서식을 꾸며준다. (목차 위에 마우스 오버 시 효과 등)
3. 티스토리 블로그 관리 > 서식 관리 > 서식 글에 html 코드로 입력하여, html 코드로 목차 서식코드를 작성해준 후, 글 본문 작성 후 서식을 불러와 자동목차를 생성시킨다.
<사진1>
<사진2>
<사진3>
<사진4>
블로그 자동목차 TOC 안되는 이유
제 경우에 안되는 이유는 TOC 관련 함수기능을 실행해주는 JS 파일의 문제였던 것으로 결론지었습니다.
그렇게 판단한 이유는 앞서 5~6개의 블로그 글 방식대로 "똑같이" 실행했음에도 불구하고, 목차 서식을 입력한 글에서 글이 제대로 표시가 되지않았기떄문입니다.
티스토리 블로그 스킨 변경을 통해 다른스킨으로 변경 후, 다시 기존의 북클럽 스킨으로 변경을 해 html설정,css설정, 파일 업로드 설정을 모두 초기화 하는 방식을 반복하고 다시 처음부터 끝까지 실행하기를 15번 넘게 해보았는데에도 소제목들이 자동으로 목차에 딸려오지않았습니다.
블로그 자동목차 따라 글쓰기 제발 작동해라 왜 안될까 (tistory.com)
블로그 자동목차 따라 글쓰기 제발 작동해라 왜 안될까
목차 [ 목차 ] 제목2 : 목차따라 글쓰기가 잘 되어야하는데 위 내용이 제목2 로 h3 에 해당 제목2: 어떻게 해야 할지 제목2 : 모르겠다 참조 블로그 링크는 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들
that-is-right.tistory.com
위 글에서 아래와 같은 현상만 나타났습니다.
목차
위와 같이 서식만 나타나고, 아래 소제목들이 자동으로 링크되어 목차에 소제목들이 자동으로 아래에 표시가 되지않았습니다.
해결 방법
JS 자바스크립트의 문제였습니다.
TOC 관련 자바스크립트 코드를 다른분이 직접 커스터마이징하여, 파일 공유해주신 것을 다운받아 업로드하니, 기존에 목차 코드를 사용해 작성했던 글도 동작이 잘 되는것을 확인했습니다.
(기존 목차 코드를 사용해 작성했던 글은 다른 꾸미기 와 관련해 충돌이 있기 때문에 서식 삭제를 하고 새로운 목차 코드를 사용하고 있습니다.)
하단에 기입한 참고블로그 (네스터 블로그) 에서 TOC 관련 파일을 다운로드 받아주시면 됩니다.
아래 하단에는 제 문제 말고 다른분의 문제일 수 있는부분들을 나열해드리겠습니다.
HTML 태그 및 형식 확인:
HTML 태그가 제대로 닫혔는지, 형식 지정에 오류가 없는지 확인하세요.
관련 코드가 () 괄호로 제대로 마감이 되었는지, 관련 스크립트 불러오는 코드가 <script> </script> 이런식으로 같은 줄에 맞게 배열되어 적혀있는지 확인해보세요.
잘못된 HTML은 때때로 렌더링 문제를 일으킬 수 있습니다.
콘텐츠 배치 확인:
목차 아래에 표시하려는 콘텐츠가 HTML 내에 올바르게 배치되었는지 확인하세요. div 또는 기타 컨테이너와 같이 의도치 않게 콘텐츠의 가시성을 숨기거나 영향을 미치는 요소가 없는지 다시 확인하세요.
간혹 티스토리 블로그 스킨에 따라 <head> 태그 내에서 동작하지않거나 할때 <body> 태그에 넣어서 동작하는 경우가 있다고 합니다.
자바스크립트 문제:
JavaScript를 사용하여 목차를 동적으로 생성하거나 조작하는 경우 JavaScript 코드에 콘텐츠 표시를 방해할 수 있는 오류가 없는지 확인해주세요.
본인의 경우는 자바스크립트 파일 코드가 작동하지않아, 새로운 자바스크립트 파일을 다운로드 받아 실행하는것으로 조치하였습니다.
CSS 스타일링:
CSS 스타일을 확인하여 콘텐츠 가시성에 영향을 미치는 충돌하는 스타일이 없는지 확인하세요. 때로는 특정 요소에 적용된 스타일로 인해 의도치 않게 콘텐츠가 숨겨질 수 있습니다.
티스토리 편집기 설정:
경우에 따라서는 티스토리 에디터 설정과 관련된 문제일 수도 있습니다. 특정 요소의 가시성에 영향을 줄 수 있는 특정 설정이 편집기에 있는지 확인하세요. 블로그 스킨과 TOC 호환 관련 문제일 수 있습니다.
브라우저 호환성:
다양한 웹 브라우저에서 블로그를 테스트하여 문제가 모든 웹 브라우저에서 지속되는지 체크합니다. 마이크로엣지, 구글 크롬 등 다양한 브라우저에서도 문제가 발생하는지 확인합니다.
미리보기 및 디버그:
블로그를 게시하기 전에 티스토리 편집기의 미리보기 기능을 사용하여 블로그가 어떻게 보이는지 확인하세요. 이는 콘텐츠의 레이아웃이나 가시성과 관련된 문제를 식별하는 데 도움이 될 수 있습니다.
화면 크기를 마우스 휠을 조절하여 100%에서 더 낮춰보세요.
과거 본인의 경우 티스토리 블로그 TOC를 한번 입혔던 적이 있는데, TOC가 자꾸 화면 바깥으로 빠지게 배치되어있어서 CSS 조작을 통해 화면 내부로 들어오게 조치했던 기억이 어렴풋이 있습니다.
티스토리 지원팀에 문의:
위의 해결 방법 중 어느 것도 효과가 없다면 티스토리 지원팀에 도움을 요청하거나 블로그 전문가에게 도움이 요청하는것이 좋아보입니다.
참고블로그
네스터 블로그
티스토리 블로그 자동으로 완벽한 목차 만드는 방법 코드 공개 TOC (tistory.com)
티스토리 블로그 자동으로 완벽한 목차 만드는 방법 코드 공개 TOC
Table of Contents 일명 TOC는 목차를 말하는 것이다. 티스토리로 장문의 블로깅을 할 때에는 너무 스크롤이 많이 생길 수 있다. 당연한 이야기 겠지만, 장문의 글이라면 전부 정독하는 분이 있을 수도
lowoon.tistory.com
위 블로그의 toc 커스텀 js 파일을 다운로드 받고, 티스토리 블로그에 파일업로드를 하니 동작을 잘합니다.
해당 블로그의 서식을 사용하실 때의 주의할점은, 목차 서식으로 만들어놓고 사용하실때 본문 내용 하단에 </div> 로 마무리를 해주어서 html 형식으로 글 작성을 해주셔야 하는 부분입니다. 코드의 마무리 끝매듭을 지어줘야 글이 잘 작성되겠지요?
리빙티 블로그
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 1- 초보용 (tistory.com)
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용 (tistory.com)
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 2 -초보용
누구나 쉽게 따라 만드는 자동 목차(TOC) #2 오늘은 저번 '자동목차 만들기 #1'에 이어 조금 스타일이 다른 '자동목차(TOC) #2'에 대해 알아보겠습니다. 역시 제가 프로그래머도 블로그 고수도 아니기
galam.tistory.com
위 블로그에서는 각 서식들을 활용해 목차를 쉽게 만드는 방법을 알려줍니다.
'이 블로그의 TOC#2 쉽게만들기 -초보용- ' TOC가 매우 깔끔하고 만족스러워서 하고싶었는데, 아쉽게도 제게는 작동을 잘 안했습니다. 다른분들은 사용하시는데 문제가없어보이니, 참고하셔서 사용해 보시기바랍니다.
한트리스 블로그
티스토리 자동목차 쉽게 만들기 - 초간단 10분 완성 (hantrees.com)
티스토리 자동목차 쉽게 만들기 - 초간단 10분 완성
이번에는 티스토리에서 북클럽 스킨을 기준으로 자동목차 만드는 방법(#1 스킨에도 가능)에 대해서 공유합니다. 전체를 이해하려면 시간이 걸리겠지만 그냥 따라 하기만 하면 10분 정도면 완성
hantrees.com
위 블로그에서는 접기/펼치기 가능한 박스형 자동목차 생성방법을 알려줍니다.
이 블로그의 포스팅도 매우 마음에 들었으나, 제게는 아쉽게도 작동하지않았습니다.
다른분들은 사용에 문제가없어보이니, 참고해서 사용해 보시기 바랍니다.
'블로그 & 일상 (Blog &Daily)' 카테고리의 다른 글
| 저예산 인테리어 디자인 팁 재활용 중고매장 큰기대효과 (0) | 2024.02.20 |
|---|---|
| 커피 홈카페 도구 핸드드립 드립백 프렌치프레스 모카포트 콜드브루 장단점 (0) | 2024.01.28 |
| 커피원두여행: 아라비카 로부스타 리베리카 (0) | 2024.01.21 |
| 블로그 운영 일대기(수익화 블로그) (0) | 2024.01.01 |
| 전철에서 삶의 태도를 깨닫다. (0) | 2021.03.20 |
