티스토리 스킨 만들기 #4 - ToC(Table of Contents)

이전 글 보기 : 티스토리 스킨 만들기 #3 - 코드 블록 교체

글의 내용이 길어지다 보면 내게 필요한 내용을 찾기 위해 끊이 없이 화면을 스크롤 해야 하는 경우가 있다. 이럴 때 목차를 자동으로 만들어 주면 좋지 않을까 항상 생각해 왔는데 이미 그런 것이 존재 했다. ToC라고 매번 저게 뭘까 궁금했었는데 Table of Contents라고 글 제목들을 추려 자동으로 목차를 만들어 주는 기능라고 한다.

여기저기 기웃 거리며 쉽게 가져다 쓸만한 것이 없나 살펴 보았지만 이것들 역시 블로그 스킨 처럼 뭔가 나에게 2% 부족했다. 그래서 나름 나도 개발자라는 호승심에 간단하게 만들었다.

ToC 기능

문서의 Heading 태그 기준으로 목차 생성
목차의 길이가 길때 문서의 스크롤에 따라 ToC도 같이 스크롤
ToC(Table of Contents) 테스트 페이지

설치

1. 아래 파일을 다운로드 받아 스킨에 업로드

table_of_contents.js

0.01MB

※ 가장 최신 버전을 받기 위해서는 github에 올라와 있는 버전을 받는 것이 가장 확실하다. [여기]

2. 스킨편집 > html > 하단 /body 가 끝나기 직전 아래 내용 추가

<script src="./images/table_of_contents.js"></script>
<script>
    $('#article_rep_desc article').table_of_contents({
        container: "#toc",
        scrollSpeed: 600,
        scrollOffset: -10,
        sticky: true
    });
</script>

"#article_rep_desc article" : ToC를 구성 할 대상 문서의 엘리먼트 selector
#toc : ToC를 출력 할 엘리먼트 selector
scrollSpeed : ToC 목록을 클릭했을 때 해당 문서 위치로 스크롤 되는 속도
scrollOffset : 문서가 스크롤 되면 기본적으로 제목이 브라우저 최상단에 위치하게 되는데 때때로 보기 좋지 않을 때도 있다. -10은 스크롤 되었을 때 브라우저 최상단으로 부터 10픽셀 밑에 위치한다는 뜻
sticky : false 일 경우 ToC는 문서의 일부가 되어 문서와 함께 스크롤 되지만, true일 경우 문서가 스크롤 되어도 화면에 고정되어 움직이지 않는다.

3. CSS 추가

#toc {
	width: 230px;
	padding-right: 30px;
}

#toc ul {
	padding-left: 20px;
	margin-bottom: 0px;
}

#toc ul li {
	margin-bottom: 5px;
}

#toc li[depth="0"] {
	font-size: 1em;
}

#toc li[depth="1"] {
	font-size: 0.8em;
}

#toc li[depth="2"],
#toc li[depth="3"],
#toc li[depth="4"],
#toc li[depth="5"] {
	font-size: 0.8em;
	font-style: italic;
}

#toc a {
	color: #666;
	font-weight: normal;
	text-decoration: none;
}

#toc li {
	list-style-type: circle;
}

#toc li a[selected] {
	font-weight: bold;
	text-decoration: underline;
}

#toc li a:hover {
	text-decoration: underline;
}

부록 1. 본 블로그에 적용된 skin.html 및 style.css 수정

본 블로그는 본문 내용 왼쪽에 ToC를 항상 보이도록 하기 위해 아래와 같이 html을 수정했다

style.css

#article_rep_desc {
    display: flex;
    justify-content: center;
}

#article_rep_desc aside.left {
    float: left;
    width: 0px;
    transform : translateX(-250px);
}

#article_rep_desc article {
    flex-grow: 1;
}

skin.html

<s_article_rep>
<s_permalink_article_rep>
<!-- 티스토리 치환자 및 기타등등 생략된 코드들 -->
    <div class="entry-content" id="article_rep_desc">
        <aside class="left">
            <div id="toc"></div> <!-- ToC 출력 엘리먼트 -->
        </aside>
        <article>
            





            



            이전 글 보기 : 티스토리 스킨 만들기 #3 - 코드 블록 교체
글의 내용이 길어지다 보면 내게 필요한 내용을 찾기 위해 끊이 없이 화면을 스크롤 해야 하는 경우가 있다. 이럴 때 목차를 자동으로 만들어 주면 좋지 않을까 항상 생각해 왔는데 이미 그런 것이 존재 했다. ToC라고 매번 저게 뭘까 궁금했었는데 Table of Contents라고 글 제목들을 추려 자동으로 목차를 만들어 주는 기능라고 한다.
여기저기 기웃 거리며 쉽게 가져다 쓸만한 것이 없나 살펴 보았지만 이것들 역시 블로그 스킨 처럼 뭔가 나에게 2% 부족했다. 그래서 나름 나도 개발자라는 호승심에 간단하게 만들었다.
ToC 기능

문서의 Heading 태그 기준으로 목차 생성
목차의 길이가 길때 문서의 스크롤에 따라 ToC도 같이 스크롤
ToC(Table of Contents) 테스트 페이지

설치
1. 아래 파일을 다운로드 받아 스킨에 업로드

    
    table_of_contents.js
0.01MB

  

※ 가장 최신 버전을 받기 위해서는 github에 올라와 있는 버전을 받는 것이 가장 확실하다. [여기]
2. 스킨편집 > html > 하단 /body 가 끝나기 직전 아래 내용 추가
<script src="./images/table_of_contents.js"></script>
<script>
    $('#article_rep_desc article').table_of_contents({
        container: "#toc",
        scrollSpeed: 600,
        scrollOffset: -10,
        sticky: true
    });
</script>

"#article_rep_desc article" : ToC를 구성 할 대상 문서의 엘리먼트 selector
#toc : ToC를 출력 할 엘리먼트 selector
scrollSpeed : ToC 목록을 클릭했을 때 해당 문서 위치로 스크롤 되는 속도
scrollOffset : 문서가 스크롤 되면 기본적으로 제목이 브라우저 최상단에 위치하게 되는데 때때로 보기 좋지 않을 때도 있다. -10은 스크롤 되었을 때 브라우저 최상단으로 부터 10픽셀 밑에 위치한다는 뜻
sticky : false 일 경우 ToC는 문서의 일부가 되어 문서와 함께 스크롤 되지만, true일 경우 문서가 스크롤 되어도 화면에 고정되어 움직이지 않는다.

3. CSS 추가
#toc {
	width: 230px;
	padding-right: 30px;
}

#toc ul {
	padding-left: 20px;
	margin-bottom: 0px;
}

#toc ul li {
	margin-bottom: 5px;
}

#toc li[depth="0"] {
	font-size: 1em;
}

#toc li[depth="1"] {
	font-size: 0.8em;
}

#toc li[depth="2"],
#toc li[depth="3"],
#toc li[depth="4"],
#toc li[depth="5"] {
	font-size: 0.8em;
	font-style: italic;
}

#toc a {
	color: #666;
	font-weight: normal;
	text-decoration: none;
}

#toc li {
	list-style-type: circle;
}

#toc li a[selected] {
	font-weight: bold;
	text-decoration: underline;
}

#toc li a:hover {
	text-decoration: underline;
}
부록 1. 본 블로그에 적용된 skin.html 및 style.css 수정
본 블로그는 본문 내용 왼쪽에 ToC를 항상 보이도록 하기 위해 아래와 같이 html을 수정했다
style.css
#article_rep_desc {
    display: flex;
    justify-content: center;
}

#article_rep_desc aside.left {
    float: left;
    width: 0px;
    transform : translateX(-250px);
}

#article_rep_desc article {
    flex-grow: 1;
}
skin.html
<s_article_rep>
<s_permalink_article_rep>
<!-- 티스토리 치환자 및 기타등등 생략된 코드들 -->
    <div class="entry-content" id="article_rep_desc">
        <aside class="left">
            <div id="toc"></div> <!-- ToC 출력 엘리먼트 -->
        </aside>
        <article>
            
        </article>
    </div>
</s_permalink_article_rep>
</s_article_rep>
부록 2. ToC가 생성하는 html 포멧(CSS를 적용할 때 참고)
<div id="toc">
    <ol>
        <li depth="0">
            <a href="#uniqe_hash_key" selected>headline text 1</a>
        </li>
        <ol>
            <li depth="1">
                <a href="#uniqe_hash_key">headline text 1.1</a>
            </li>
            <li depth="1">
                <a href="#uniqe_hash_key">headline text 1.2</a>
            </li>
            <ol>
                <li depth="2">
                    <a href="#uniqe_hash_key">headline text 2.1</a>
                </li>
                <li depth="2">
                    <a href="#uniqe_hash_key">headline text 2.2</a>
                </li>
            </ol>
        <ol>
    </ol>
</div>

4라인 selected : 현재 읽고 있는 문서의 위치를 가리키고 있는 toc 목차에는 selected 어트리뷰트가 지정 됩니다. 해당 어트리뷰트는 a[selected]로 선택 할 수 있다.
7라인 depth : 제목1, 제목2, 제목3에 따라 depth가 0부터 2까지 생성된다. 각 뎁스별 스타일을 다르게 지정하기 위해서 li[depth="번호"]로 선택 할 수 있다.

다음 글 보기 : 티스토리 스킨 만들기 #5 - 스킨 테스트 페이지
            




        </article>
    </div>
</s_permalink_article_rep>
</s_article_rep>

부록 2. ToC가 생성하는 html 포멧(CSS를 적용할 때 참고)

<div id="toc">
    <ol>
        <li depth="0">
            <a href="#uniqe_hash_key" selected>headline text 1</a>
        </li>
        <ol>
            <li depth="1">
                <a href="#uniqe_hash_key">headline text 1.1</a>
            </li>
            <li depth="1">
                <a href="#uniqe_hash_key">headline text 1.2</a>
            </li>
            <ol>
                <li depth="2">
                    <a href="#uniqe_hash_key">headline text 2.1</a>
                </li>
                <li depth="2">
                    <a href="#uniqe_hash_key">headline text 2.2</a>
                </li>
            </ol>
        <ol>
    </ol>
</div>

4라인 selected : 현재 읽고 있는 문서의 위치를 가리키고 있는 toc 목차에는 selected 어트리뷰트가 지정 됩니다. 해당 어트리뷰트는 a[selected]로 선택 할 수 있다.
7라인 depth : 제목1, 제목2, 제목3에 따라 depth가 0부터 2까지 생성된다. 각 뎁스별 스타일을 다르게 지정하기 위해서 li[depth="번호"]로 선택 할 수 있다.

다음 글 보기 : 티스토리 스킨 만들기 #5 - 스킨 테스트 페이지

저작자표시 비영리

HardCore in Programming

티스토리 스킨 만들기 #4 - ToC(Table of Contents)

ToC 기능

설치

1. 아래 파일을 다운로드 받아 스킨에 업로드

2. 스킨편집 > html > 하단 /body 가 끝나기 직전 아래 내용 추가

3. CSS 추가

부록 1. 본 블로그에 적용된 skin.html 및 style.css 수정

ToC 기능

설치

1. 아래 파일을 다운로드 받아 스킨에 업로드

2. 스킨편집 > html > 하단 /body 가 끝나기 직전 아래 내용 추가

3. CSS 추가

부록 1. 본 블로그에 적용된 skin.html 및 style.css 수정

부록 2. ToC가 생성하는 html 포멧(CSS를 적용할 때 참고)

부록 2. ToC가 생성하는 html 포멧(CSS를 적용할 때 참고)

티스토리툴바

티스토리 스킨 만들기 #4 - ToC(Table of Contents)

ToC 기능

설치

1. 아래 파일을 다운로드 받아 스킨에 업로드

2. 스킨편집 > html > 하단 /body 가 끝나기 직전 아래 내용 추가

3. CSS 추가

부록 1. 본 블로그에 적용된 skin.html 및 style.css 수정

ToC 기능

설치

1. 아래 파일을 다운로드 받아 스킨에 업로드

2. 스킨편집 > html > 하단 /body 가 끝나기 직전 아래 내용 추가

3. CSS 추가

부록 1. 본 블로그에 적용된 skin.html 및 style.css 수정

부록 2. ToC가 생성하는 html 포멧(CSS를 적용할 때 참고)

부록 2. ToC가 생성하는 html 포멧(CSS를 적용할 때 참고)

'넋두리있다' Related Articles

티스토리툴바