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

 블로그에 방문한 사람들에겐 [블럭*목차*]가 중요한 요소입니다.

 필요한 정보를 취사 선택해서 빠르게 얻어나갈 수 있기 때문입니다.

 

 또한 블로거에게도 유용한 기능인데 구조적으로 글을 작성해서 검색엔진에 SEO를 어필할 수 있기 때문입니다.

 다만 일일히 수동으로 목차를 넣거나, 서식으로 만들어 쓰는 것은 시간도 걸리고 비효율적입니다.

 그래서 이번 시간에는 자동으로 목차를 만드는 방법을 알아보겠습니다.

 [블럭*HTML*], [블럭*CSS*], [블럭*JAVASCRIPT*] 수정이 필요하며 그 분야를 잘 모르시는 분들을 위해서 복사-붙여넣기만 하면 적용할 수 있도록 설명하겠습니다.

 

작동의 원리

 구조적인 글을 작성하려면 검색엔진에게 중요한 글[각주*제목*]이라고 알려주는 H2,H4 태그로 제목-소제목을 구성해야 합니다.

 겸사겸사 그 H2,H4 태그를 자바스크립트로 수집해서 목차로 만들어 뿌리는 게 목적입니다.

 에디터 기준으론 제목1이 제목, 제목3이 소제목입니다.

 

 또한 그 목차에서 바로 해당위치로 이동하는 데엔 링크#기능을 이용할 겁니다.

 

 기본적으로 매우 간단한 기능이기 때문에 [블럭*JQUERY*]나 [블럭*플러그인*] 없이 순수 자바스크립트로 수월하게 구현 가능합니다.

 

자동 목차 구현하기

 

 혹시라도 수정 방법을 모르시는 분들을 위해서 간략히 설명하겠습니다.

 본인의 블로그에 들어와서 [블럭*설정*]창으로 들어와주세요.

 그리고 [블럭*꾸미기*]탭의 [블럭*스킨편집*]을 눌러주시면 새로운 창이 뜰텐데, 거기서 [블럭*html편집*]을 눌러주시면 html+javascript와 css를 수정할 수 있습니다.

 

HTML 수정하기 

 

 HTML에서 먼저 수정을 해야합니다.

 html수정창으로 오셔서 [**컨트롤**]+[**F**]를 눌러주세요.

 그 후 를 검색해서 찾아주세요.

 제가 사용하는 스킨에선 검색하면 아래와 같이 나옵니다.

 여기에서 목차로 사용할 HTML을 삽입해주시면 됩니다.

<div class="Toc"></div>

 수정한 것을 html로 나타내면 아래의 사진과 같습니다.

 그리고 오른쪽 상단의 [블럭*적용*]을 눌러주시면 끝입니다.

 이제 다음 단계로 넘어가면 됩니다.

 

HTML에서 자바스크립트 삽입하기

 

 html수정창에서 [**컨트롤**]+[**F**]를 눌러서 </s_t3>를 검색해주세요.

 그리고 </s_t3> 바로 위에 아래의 코드를 넣어주세요.

<script>
function Toclist () {
  const Htag = document.querySelectorAll('h2[data-ke-size],h4[data-ke-size]');
  const toc = document.querySelector('.Toc');
  toc.setAttribute('style','display:block');
  if (Htag.length <2) {return !1}
  const hleng = Htag.length;
  for (var i=0; i<hleng; i++) {
    const text = Htag[i].textContent; 
    Htag[i].id = text.trim();
    const atag = document.createElement('a');
    atag.textContent = text;
    atag.setAttribute('href','#'+text.trim());
    atag.className = 'tocNum';
    console.log(Htag[i].tagName)
       if (Htag[i].tagName == 'H2') {
     atag.classList.add('realNum'); 
    }
    else if (Htag[i].tagName == 'H4') {
      atag.classList.add('subNum');
    }
    toc.appendChild(atag); 
    
    
  }
}
Toclist();
</script>

 원리를 설명하자면 H2와 H4 태그를 수집합니다.

 그리고 그 태그에서 제목에 해당하는 텍스트를 추출하고, 그걸 목차에 넣어주는 겁니다.

 또한 제목 부분에는 텍스트명으로 id를 만들어주고, 목차 목록에서 그 id명으로 <a href>로 이동하게 함으로써 기능을 하게 만들 겁니다.

 

 이제 목차가 정상적으로 작동할 겁니다.

 다만 목차의 외관이 너무 형편 없습니다.

 그래서 간단하게 꾸며볼텐데, 그러기 위해선 CSS를 수정해야 합니다.

 

CSS 수정하기

 

 css수정창에서 가장 아래로 내려가서 아래의 코드를 넣어주세요.

.Toc {
  display:none;
  position:fixed;
  width:280px;
  right:0;
  border-left: 1px dashed silver;
  padding:10px;
}
.tocNum {
  display:block;
}
.subNum {
  text-indent: 20px;
}
@media (max-width:768px) {
  .Toc {
    position:relative;
    border: 1px dashed silver;
    width:70%;
    text-align:center;
  }
}

 디자인의 경우 심플하게 구성했습니다.

 목차를 원하시는 디자인으로 바꾸시려면 .Toc 안에서 원하시는 대로 CSS를 제어해 꾸미시면 됩니다.

 목차의 제목 부분을 고치려면 .tocNum 부분의 css를 고치시면 되고, 소제목 부분을 고치려면 .subNumb을 고치시면 됩니다.

 

 끝입니다.

 

실제 작동하는 예제

 이 코드를 적용해 실제로 코드펜에서 예제로 만들어봤습니다.

 직접 써보시면 잘 작동하는지를 아실 수 있을 겁니다.

 

관련글

티스토리 본문 상단에 애드센스 2개 달아주기

스크롤을 내리면 상단에 고정되는 네비게이션 만들기

티스토리 사이드바에 따라다니는 애드센스 광고 달아주기

LazyLoad를 이용해 로딩속도 끌어올리기