블로그 관리 (Blog Management)/BiCute Skin

[Tistory] 자동 목차(TOC) 적용하기

BiCute 2022. 3. 21. 10:00
반응형

 

#1 TOC란?

  Table of contents(TOC)는 블로그나 사이트에서 종종 볼 수 있는데, 글을 작성하면서 사용된 태그(h1, h2 ...)를 이용하여 자동으로 목차를 만들어 주는 기능입니다. 

  검색을 해보면 수많은 TOC 관련 내용이 있는데 대부분 완전히 동일한 내용이고, 화면의 사이즈를 조절하면 화면을 뚫고나가던가 본문을 덮어버리는 설정들이 많아 가장 많이 사용하는 TOC를 이용하여 제 스타일에 맞게 조금 수정하였습니다.

 

 

#2 TOC 적용하는 방법

1. js 파일 다운

  다음 파일을 다운받아 티스토리의 HTML 편집으로 이동하여 파일을 업로드합니다.

 

tocbot.js
0.01MB

 

2. js 파일 적용

  HTML 편집에서 </head> 위쪽에 다음 코드를 삽입해 줍니다.

  <!-- TOC 목차 관련 1 -->
  <script src="./images/tocbot.js"></script>

 

3. 목차 적용할 장소 찾기

  HTML 편집에서 목차를 적용하기 위한 본문 최상단의 위치를  찾아서 다음 내용을 붙여 넣습니다.

  <!-- toc 목차 관련 2 -->
  <div class="toc toc-fixed" ></div>

  오디세이 스킨의 경우 대략 [html: 218] 정도에 위치한 <!-- 에디터 영역 --> 바로 밑에 적용하면 됩니다.

  <!-- 에디터 영역 -->
  <div class="article-view">
  





                    
        
반응형

 

#1 TOC란?

  Table of contents(TOC)는 블로그나 사이트에서 종종 볼 수 있는데, 글을 작성하면서 사용된 태그(h1, h2 ...)를 이용하여 자동으로 목차를 만들어 주는 기능입니다. 

  검색을 해보면 수많은 TOC 관련 내용이 있는데 대부분 완전히 동일한 내용이고, 화면의 사이즈를 조절하면 화면을 뚫고나가던가 본문을 덮어버리는 설정들이 많아 가장 많이 사용하는 TOC를 이용하여 제 스타일에 맞게 조금 수정하였습니다.

 

 

#2 TOC 적용하는 방법

1. js 파일 다운

  다음 파일을 다운받아 티스토리의 HTML 편집으로 이동하여 파일을 업로드합니다.

 

tocbot.js
0.01MB

 

2. js 파일 적용

  HTML 편집에서 </head> 위쪽에 다음 코드를 삽입해 줍니다.

  <!-- TOC 목차 관련 1 -->
  <script src="./images/tocbot.js"></script>

 

3. 목차 적용할 장소 찾기

  HTML 편집에서 목차를 적용하기 위한 본문 최상단의 위치를  찾아서 다음 내용을 붙여 넣습니다.

  <!-- toc 목차 관련 2 -->
  <div class="toc toc-fixed" ></div>

  오디세이 스킨의 경우 대략 [html: 218] 정도에 위치한 <!-- 에디터 영역 --> 바로 밑에 적용하면 됩니다.

  <!-- 에디터 영역 -->
  <div class="article-view">
  
  </div>

 

4. js 코드 추가해주기

  HTML 편집 가장 아래쪽으로 내려와 </body> 바로 위에 다음 코드를 넣어준다.

<!-- toc 목차 관련 3 -->
 <script>
  let content = document.querySelector('.article-view')
  let headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  let headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      let id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.article-view',
    headingSelector:'h1, h2, h3, h4',
    hasInnerContainers: false
  });
</script>

  티스토리 오디세이 스킨을 사용한다면 그대로 사용하여도 되지만, 다른 스킨을 사용한다면

  위와 아래에 .article-view 라고 되어있는 곳을 자신의 스킨에 맞는 본문 클래스로 변경해 주면 됩니다.

  아래쪽에 있는 headingSelector:'h1, h2, h3, h4', 는 목차로 만들 지점을 정하는 것으로 이곳 또한 굳이 건들 필요는 없지만, 

  취향에 따라 '난 H4(제목 3)는 목차로 쓰기 싫다'던가 하면 해당 코드를 지워주시면 됩니다.

  ※ 참고: 이 블로그에선 h2, h3만 사용중입니다

 

5. 스타일 시트 작성

  CSS 편집으로 이동하여 가장 아래쪽에 다음 내용을 복사하여 넣어주면 모든 과정은 끝이 납니다. 

  아래 내용은 여기 블로그에 적용된 모습으로 커스텀 되어있는 상태입니다.

  특징은 다음과 같습니다.

  모바일 : 목차가 본문 최상단에 위치. 모든 목록이 표시. 본문과 함께 스크롤되어 사라짐.

  데스크톱 (브라우저 너비 1600px 미만) : 오른쪽 사이드바 위쪽에 목차가 고정되어 있음. 

  데스크탑 (브라우저 너비 1600px 이상) : 왼쪽 여백 공간에 목차가 고정되어 있음. 

/* TOC 목차 관련 */
.toc {
    overflow-y: auto;
}
.toc > .toc-list {
    overflow: hidden;
    position: relative;
}
.toc > .toc-list li {
    list-style: none;
}
.toc-list {
    margin: 0;
    padding-left: 10px;
}
a.toc-link {
    color: currentColor;
    height: 100%;
}
.is-collapsible {
    max-height: 1000px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}
.is-collapsed {
    max-height: 0;
}
.is-position-fixed {
    position: fixed !important;
    top: 0;
}
.is-active-link {
    font-weight: 700;
}
.toc-link::before {
    background-color: #EEE;
    content: ' ';
    display: inline-block;
    height: inherit;
    left: 0;
    margin-top: -1px;
    position: absolute;
    width: 2px;
}
.is-active-link::before {
		background-color: #180204;
}
/* 미디어 공통 */
.toc {
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom:20px; 
	border: 2px solid #180204;
	z-index: 999;
    background: white;
}
.toc-list {
	margin-top: 10px !important;
	font-size: 0.875em;
}
.toc > .toc-list li {
	margin-bottom: 10px;
}
.toc > .toc-list li a {
	text-decoration: none;
}
@media screen and (max-width: 1060px) {
	.is-collapsed { max-height: 1000px; }
}
@media screen and (min-width: 1061px) and (max-width: 1609px) {
	.toc {
		width: 300px;
		position: fixed !important;
		top: 82px !important;
		right: calc((100% - 1020px) / 2); 
	}
}
@media screen and (min-width: 1610px) {
	.toc-absolute {
		position: absolute;
		margin-top:165px;
	}
	.toc-fixed {
		position: fixed;
		top: 165px;
	}
	.toc {
		right: calc((100% - 1020px) / 2 + 1060px); 
		width: 240px;
	}
}

 

  여기서 이전 글부터 쭈~욱 따라오신 분이 계실... 런진 모르겠지만, 순서대로 따라오셨다면 제목과 목차와의 간격이 조금 크게 느껴질 수도 있으실 텐데, [style.css:2752] 부근에 위치한 .article-header .inner-header 의 속성 값 중 margin을 다음과 같이 조절해주면 적당하게 간격을 줄 수 있습니다 

.article-header .inner-header {
	...
	margin: 0 auto 40px;
	...
 }

 

 

#3 수정 후

  브라우저 너비 1610px을 기준으로 이보다 작으면 다음과 같이 목차는 본문에 포함됩니다.

 

  브라우저 너비 1610px 을 기준으로 이보다 크면 다음과 같이 목차는 왼쪽에 떠있는 상태로 함께 스크롤됩니다.

 

 

 

반응형
</div>

 

4. js 코드 추가해주기

  HTML 편집 가장 아래쪽으로 내려와 </body> 바로 위에 다음 코드를 넣어준다.

<!-- toc 목차 관련 3 -->
 <script>
  let content = document.querySelector('.article-view')
  let headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  let headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      let id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.article-view',
    headingSelector:'h1, h2, h3, h4',
    hasInnerContainers: false
  });
</script>

  티스토리 오디세이 스킨을 사용한다면 그대로 사용하여도 되지만, 다른 스킨을 사용한다면

  위와 아래에 .article-view 라고 되어있는 곳을 자신의 스킨에 맞는 본문 클래스로 변경해 주면 됩니다.

  아래쪽에 있는 headingSelector:'h1, h2, h3, h4', 는 목차로 만들 지점을 정하는 것으로 이곳 또한 굳이 건들 필요는 없지만, 

  취향에 따라 '난 H4(제목 3)는 목차로 쓰기 싫다'던가 하면 해당 코드를 지워주시면 됩니다.

  ※ 참고: 이 블로그에선 h2, h3만 사용중입니다

 

5. 스타일 시트 작성

  CSS 편집으로 이동하여 가장 아래쪽에 다음 내용을 복사하여 넣어주면 모든 과정은 끝이 납니다. 

  아래 내용은 여기 블로그에 적용된 모습으로 커스텀 되어있는 상태입니다.

  특징은 다음과 같습니다.

  모바일 : 목차가 본문 최상단에 위치. 모든 목록이 표시. 본문과 함께 스크롤되어 사라짐.

  데스크톱 (브라우저 너비 1600px 미만) : 오른쪽 사이드바 위쪽에 목차가 고정되어 있음. 

  데스크탑 (브라우저 너비 1600px 이상) : 왼쪽 여백 공간에 목차가 고정되어 있음. 

/* TOC 목차 관련 */
.toc {
    overflow-y: auto;
}
.toc > .toc-list {
    overflow: hidden;
    position: relative;
}
.toc > .toc-list li {
    list-style: none;
}
.toc-list {
    margin: 0;
    padding-left: 10px;
}
a.toc-link {
    color: currentColor;
    height: 100%;
}
.is-collapsible {
    max-height: 1000px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}
.is-collapsed {
    max-height: 0;
}
.is-position-fixed {
    position: fixed !important;
    top: 0;
}
.is-active-link {
    font-weight: 700;
}
.toc-link::before {
    background-color: #EEE;
    content: ' ';
    display: inline-block;
    height: inherit;
    left: 0;
    margin-top: -1px;
    position: absolute;
    width: 2px;
}
.is-active-link::before {
		background-color: #180204;
}
/* 미디어 공통 */
.toc {
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
	margin-bottom:20px; 
	border: 2px solid #180204;
	z-index: 999;
    background: white;
}
.toc-list {
	margin-top: 10px !important;
	font-size: 0.875em;
}
.toc > .toc-list li {
	margin-bottom: 10px;
}
.toc > .toc-list li a {
	text-decoration: none;
}
@media screen and (max-width: 1060px) {
	.is-collapsed { max-height: 1000px; }
}
@media screen and (min-width: 1061px) and (max-width: 1609px) {
	.toc {
		width: 300px;
		position: fixed !important;
		top: 82px !important;
		right: calc((100% - 1020px) / 2); 
	}
}
@media screen and (min-width: 1610px) {
	.toc-absolute {
		position: absolute;
		margin-top:165px;
	}
	.toc-fixed {
		position: fixed;
		top: 165px;
	}
	.toc {
		right: calc((100% - 1020px) / 2 + 1060px); 
		width: 240px;
	}
}

 

  여기서 이전 글부터 쭈~욱 따라오신 분이 계실... 런진 모르겠지만, 순서대로 따라오셨다면 제목과 목차와의 간격이 조금 크게 느껴질 수도 있으실 텐데, [style.css:2752] 부근에 위치한 .article-header .inner-header 의 속성 값 중 margin을 다음과 같이 조절해주면 적당하게 간격을 줄 수 있습니다 

.article-header .inner-header {
	...
	margin: 0 auto 40px;
	...
 }

 

 

#3 수정 후

  브라우저 너비 1610px을 기준으로 이보다 작으면 다음과 같이 목차는 본문에 포함됩니다.

 

  브라우저 너비 1610px 을 기준으로 이보다 크면 다음과 같이 목차는 왼쪽에 떠있는 상태로 함께 스크롤됩니다.

 

 

 

반응형