미넴 스킨 (Mynem Skin) 목차 기능 소개

미넴 스킨 목차 기능 소개입니다.

 

목차

 

목차 설정 기능

목차 생성 기능을 기본으로 넣었습니다. 제목 태그를 사용하면 자동으로 목차로 인식하여 글 맨 상단에 생성해 줍니다.  

자동으로 목차가 생성되는 걸 원치 않으시는 분들을 위해 OFF 기능을 제공합니다.

 

글 중간에 목차를 넣고 싶으신 분은 다음 태그를 서식으로 저장한 다음 불러와 사용하시기 바랍니다.

<div class="book-toc">
  <p>목차</p>
  <ul id="toc"></ul>
</div>

 

목차가 적용된 모습입니다.

 

목차 너비를 꽉 채워 보겠습니다. 현재는 너비 꽉 채우기가 기본 값 입니다.

 

다음과 같이 목차가 본문 너비에 맞게 꽉 채워졌습니다.

 

따로 적용하고 싶으신 분들은 다음 포스팅을 참고 하세요.

 

티스토리 글에 자동으로 목차 넣기

티스토리 글에 자동으로 목차 넣기

 

제목 우측에 링크 복사 버튼도 있는데 해당 글의 해당 제목 위치까지 바로 이동하기 위한 기능입니다.

 

티스토리 목차 링크 클립보드 복사하기

티스토리 목차 링크 클립보드 복사하기

 

목차가 화면 위로 벗어나게 되면 오른쪽 사이드에 여유 공간이 있을 경우 다음과 같이 플로팅 목차를 제공합니다. 글이 길다면 좀 더 편하게 인덱싱 할 수 있습니다. 플로팅 목차는 접거나 이동도 가능합니다. 화면에 충분한 공간이 없다면 기본적으로 접힌 상태로 나타나게 되고 필요에 따라 펴고 접을 수 있습니다. 목차를 이동하려면 상단 부분을 드래그 하시면 됩니다.

 

플로팅 목차도 따로 적용하실 수 있습니다.

 

티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

티스토리 떠 다니는 플로팅 목차 만드는 방법 (초급 버전)

 

티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

티스토리 떠 다니는 플로팅 목차 만드는 방법 (고급 버전)

 

목차 접기 기능 추가

목차를 기본적으로 접힌 상태에서 보이도록 기능을 추가하였습니다.

 

이 기능은 다음 옵션으로 켜고 끌 수 있습니다.

 

기능을 켜면 목차가 다음과 같이 접힌 상태로 보이게 되며 클릭하면 펼쳐 집니다.

목차 펼치기 전(좌) 후(우)

 

플로팅 목차 신 버전 추가

목차 기능에 대해 요구사항이 많아서 새로운 버전을 만들어 보았습니다.

 

본문 목차가 벗어나면 좀 더 즉각적으로 반응하여 사이드 여유 공간에 플로팅 목차가 등장하며 기존과 마찬가지로 접고 펼치기도 가능합니다. 다만 신 버전에서는 드래그 기능은 빠졌습니다.

 

여유 공간이 좁아지면 접혀진 상태로 등장하게 됩니다.

플로팅 목차 펼치기 전(좌) 후(우)

 

플로팅 목차 스타일 옵션에서 기존 목차 스타일을 그대로 사용하실 수도 있습니다.

플로팅 목차 스타일 구 버전 사용이 종료되었습니다.

 

플로팅 목차 기본 위치 설정

플로팅 목차를 왼쪽에서 나타나게 하고 싶으신 분이 계셔서 옵션을 만들었습니다.

 

기본은 오른쪽에서 등장하며 기능을 OFF 하시면 다음과 같이 왼쪽에서 등장하게 됩니다.

 

목차 하위 항목 자동 접힘 기능 추가

플로팅 목차에 하위 항목이 있을 경우 본문 스크롤 위치에 따라 자동으로 접히고 펼쳐 집니다. 동작은 단순한데 생각보다 고려할게 많더라구요 ㅎ

 

기본적으로 모든 하위 항목은 접혀 있습니다.

 

하위 항목이 있는 위치로 스크롤을 하거나 해당 항목을 클릭하면 다음과 같이 목차가 펼쳐 집니다.

 

영상으로도 한 번 확인해 보겠습니다.

 

 

꾸미기 > 스킨 편집 메뉴에서 다음과 같이 사용 여부를 설정할 수 있습니다.

 

자동 목차 위치 설정

자동으로 생성되는 목차의 위치를 다음과 같이 본문 맨 위, 첫 제목 태그 직전 위치 중 선택할 수 있습니다. 이미 본문에 목차 태그가 있다면 입력된 목차가 적용됩니다. 입력한 목차를 무시하고 싶다면 '본문에 삽입 된 목차 태그 무시' 기능을 활용하시기 바랍니다. 다만 미넴 스킨에서 지원하지 않는 형태의 목차라면 정상적으로 동작하지 않을 수 있습니다.

 

본문 맨 위를 적용한 경우의 자동 목차입니다.

 

다음은 첫 제목 태그 직전을 적용한 경우입니다.