티스토리 TOC 사이드 목차 바로가기 추가 | html css 서식 변경 참고 사이트

작성하는 글 목차 자동 추가

논리 구조에 맞추어서 글을 작성하다보니 목차를 쓰고 있었다.
href(hyper-link-reference) 태그를 타고 바로가는 목차를 자동 생성하고 싶어졌다.

그리고 사이드에 목차가 있다면 문서를 내리다가 다시 목차로 돌아오지 않아도 되겠다 싶었다.

갑자기 필 받아서,
글쓰기 편안한 환경 구축하기 위하여
목차가 자동으로 추가되지 않는 상황을 문제로 삼고 해결하려 한다. 😅

(이 글까지는 수동 설정)
1. 작성하는 글 목차 자동 추가
     1) TOC 사이드 목차 추가
          (1) ~~~~
          (2) 참고 사이트
     2) 글에 목차 자동생성
          (1) ~~~~
          (2) 참고 사이트

 

TOC 사이드 목차 추가

https://wbluke.tistory.com/21

Tistory TOC(Table Of Contents) 구현기

https://github.com/wbluke/tistory-table-of-contents

GitHub - wbluke/tistory-table-of-contents: 티스토리 [#1] 스킨전용 TOC

 

Code(초록색 버튼) > Download ZIP

 

관리 > 꾸미기 > 스킨 편집

 

우측 상단에 `html 편집` 버튼을 누른다.

 

개발자 도구를 열어서 `F12`

class="content-wrap"

글을 감싸고 있는 <div>의 클래스 태그를 확인한다.

 

 

class="entry-content"

태그를 찾아서 확인한 후, js 파일에서 변경해야 한다.

 

 

 

코드를 편집하기 위하여 '코드 편집기'를 설치한다.

VSCode(Microsoft)를 설치한다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

직접 쓰지 않고 복붙한다.

.(dot) 뒤에 변경

편집 후, [ctrl] + [s] 파일을 저장한다.

 

 

[파일업로드] 탭을 누르고 그 하단에 [추가] 버튼을 누른 후, 두 가지 파일을 업로드한다.

완료되었다면 우측 상단에 있는 [적용] 버튼을 누른다.

 

https://jwkim96.tistory.com/290

블로그에 목차 적용하기(TOC : Table Of Contents)

 

 

 

.toc-elements {
	min-width: 285px;
}

.toc-app-common {
    display: block;
    padding: 72px 0 0 0;
}

.toc-app-basic {
    position: sticky;
}​

 

 

@media (max-width: 83.75rem) {
    .toc-app-common {
        visibility: hidden;
        padding: 0;
    }

    #toc-elements {
        height: 0;
    }
}

 

 

 

---

여러 개를 돌아다니다가...

https://sh-hyun.tistory.com/46

티스토리 블로그에 TOC 달기

https://bumday.tistory.com/93

티스토리에 사이드 목차 추가하기

 

 

 

---

[추가] 스타일 변경

할 수 있을진 모르겠다.

티스토리 블로그에서 자동 목차 기능 간편하게 만들기

• 노션처럼 태그 표식 다름

 

• 마우스 오버

• 다크모드