미넴 스킨 제작 프로젝트/미넴 스킨

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

아미넴 2022. 3. 18.
반응형

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

 

목차

     

    목차 설정 기능

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

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

     

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

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

     

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

     

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

     

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

     

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

     

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

     

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

    목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

    sangminem.tistory.com

     

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

     

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

     

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

    목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업

    sangminem.tistory.com

     

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

     

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

     

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

     

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

    목차를 확인하려면 다시 위로 올라가야 하는 불편함을 해소하고자 만들어 보았습니다. 생각보다 깔끔하게 잘 만들어진 것 같아서 공유합니다. 주의) 고급 버전을 먼저 반영하고 초급 버전을 나

    sangminem.tistory.com

     

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

     

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

    초급 버전에서 좀 더 기능을 강화한 버전을 만들어 보았습니다. 어느 정도 코딩이 가능한 분이어야 수월하게 따라하실 수 있을 겁니다. 이 부분이 어렵게 느껴지시는 분은 다음 초급 버전을 참

    sangminem.tistory.com

     

    목차 접기 기능 추가

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

     

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

     

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

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

     

    플로팅 목차 신 버전 추가

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

     

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

     

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

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

     

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

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

     

    플로팅 목차 기본 위치 설정

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

     

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

     

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

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

     

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

     

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

     

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

     

     

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

    반응형
    그리드형(광고전용)

    댓글0

    💲 추천 글