티스토리 Table Of Content(TOC) 추가하기 :: HTML로 Page Jump하기
티스토리도 아래와 같이 목차를 누르면 그 부분으로 이동하게 글을 쓸 수 있다. 별도의 플러그인도 필요 없다.
먼저 내가 만든 아래의 예시를 구경해보자.
Table Of Content
위
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
중간
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
아래
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
문단 내용 애용 내용 ...
HOW?
URL 뒷부분이 어떻게 변하는지 봤으면 눈치를 챘을 수도 있다. 바로 HTML의 id와 Anchor 태그를 사용하는 것이다!!
우리가 태그에 id를 부여하고 Anchor 태그를 달아주려면 티스토리의 HTML 편집 에디터에 들어가야 한다.
상단의 기본모드를 클릭한 후 HTML을 누르면 된다.
위에 있는 목차(TOC)는 아래와 같이 구현했다.
1. 이동하길 원하는 (즉, 하나의 목차가 되기를 원하는) 부분에 id를 부여한다.
나는 저 본문에서 "위", "중간", "아래" 부분이 목차가 되길 원해서 아래와 같이 id를 부여했다.
- 원래 <h3>위</h3>였던 태그에
id="top"을 추가했다. - 원래 <h3>중간</h3>였던 태그에
id="mid"을 추가했다. - 원래 <h3>아래</h3>였던 태그에
id="bot"을 추가했다.
따라서 본문 HTML은 아래와 같이 짰다.
<hr />
<h3 id="top">위</h3>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<hr />
<h3 id="mid">중간</h3>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<hr />
<h3 id="bot">아래</h3>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<p>문단 내용 애용 내용 ...</p>
<hr />2. 목차(TOC)를 만드는 부분이다. Anchor 태그를 이용해서 원하는 id로 이동하게 한다.
각각의 목차 텍스트마다 #내가원하는목차의id로 링크(href)를 달면 마크다운의 TOC처럼 만들 수 있다.
Anchor 태그에 href="#내가원하는id"를 추가해서 목차 텍스트를 누르면 링크를 타고 목차에 해당하는 부분으로 이동하게 만들어보자.
- Goto 위는 id를 top으로 부여했었다. 그래서 <a
href="#top">Goto 위</a>로 바꿨다. - Goto 중간은 id를 mid로 부여했었다. 그래서 <a
href="#mid">Goto 중간</a>로 바꿨다. - Goto 아래는 id가 bot러 부여했었다. 그래서 <a
href="#top">Goto 아래</a>로 바꿨다.
따라서 목차 HTML은 아래와 같이 짰다.
<h3>Table Of Content</h3>
<ul>
<li><a href="#top">Goto 위</a></li>
<li><a href="#mid">Goto 중간</a></li>
<li><a href="#bot">Goto 아래</a></li>
</ul>그러면 완성이다!
이렇게 플러그인 없이 목차를 만들면 기존에 있는 테마를 유지할 수 있어서 좋은 것 같다.
티스토리에서 간단하게 플러그인 없이 HTML을 이용해서 상단에 목차(TOC) 만들기 끝!