[티스토리] 자동목차 만들기(서식,플로팅) - 개념정리

준비)
인터넷에 정리된 "자동목차 만들기 - 분석" 시작 합니다.

1.티스토리 자동목차 만들기 개념 정리

1-1.서식 고정형 자동목차 - 3요소

첫번째 파트는
특정기준(여기서는 h1~h6)을 중심으로 작성된 글을 계층화 시키는 부분입니다. 목차에 들어갈 내용을 만든다고 생각하시면 편합니다. 시중에 많이 사용되고 있는 그 .js 파일로 작업을 합니다.

두번째 파트는
출력을 담당할 기본 그릇을 만드는 부분입니다. 즉, 첫번째 파트에서 만든 목차를 담을 그릇입니다. 보통은 html 로 구성되어 있습니다. 서식을 만들라고 하지 않습니까? 바로 그 파트입니다. 그리고 그 그릇을 어디에 놓을지는 블로그 운영자가 본문 작성하면서 결정하면됩니다. 대부분 글 초반 상단에 위치 시킵니다.

세번째 파트는
꾸미는 부분입니다. CSS가 담당합니다. 대부분 시중에서 돌아 다니는거 쓰니까 비슷비슷합니다. 그래서 쪼금 색깔 변환정도만 하면 됩니다.

1-2.사이드바 플로팅 자동목차 - 3요소

첫번재 파트는
서식 고정형에서 나온것과 같이 h1~h6 기준으로 글을 계층화 시켜서 목차를 만드는 것은 동일합니다. 다만 시중의 .js 파일을 사용하는 것이 아닌 tocbot 라이브러리를 사용합니다. 저희 같이 가져다 쓰는 사용자 입장에서는 똑같습니다.

두번째 파트
출력 부분인데요. 본문 고정형은 블로그 운영자가 본문 어디든 위치 시킬수 있지만, 사이드바는 이미 위치는 결정되어 있습니다. 당연히 사이드 바입니다. 그러니 html 한번만 수정해주면 됩니다.

세번째 파트
꾸미는 부분인데요. 대부분의 플로팅 자동목차는 tocbot 라이브러리에서 같이 제공되는 css 파일을 연결해서 사용합니다. 물론 티스토리의 css 클래스 파일을 수정해서 색상변화 시킬수 있지만, 그냥 쓰시는 것도 나쁘지 않습니다.

마무리

대충 개념적인 간단하게 정리했습니다. 시중에 나오는 것들을 조사해서 저의 기준으로 정리한것이기 때문에 조금 다를 수있습니다.

아마 차이 나는 부분은
목록생성하는 .js 파일을 커스텀 했나?
CSS 부분 커스텀 했나?
커스텀한것을 파일로 만들어서 티스토리에 저장해서 사용하는가?
정도입니다.

다음장 부터는 본격적으로 시중에 나오는 것들을 1. 코드 분석하고 2.커스텀 자동목차 만들기로 넘....

잠시)
아 깝빡! 왜? 목록을 만들어야 하는지에 대해서 설명하지 않았네요.

짧게)
길어지면 힘드니까 간단하게 만 정리하겟습니다. 나중에 상세히 설명하겟습니다.

1. 글의 구조 파악을 돕고 독자들의 이해를 쉽게 함
2. 검색 엔진 최적화를 통한 검색 결과 노출 기회 제공
3. 사용자 경험 개선 및 블로그의 재방문률 증가 할 것으로 기대
4. 공유와 북마크를 유도하여 글의 노출 기회 증가 할것으로 추정

1번과 2번의 효과로 3번과 4번을 기대 할 수 있다. 정도로만 받아들이시면 됩니다.