StudyGPT - AI 공부 놀이터

Blog

[티스토리 꾸미기] 스킨 편집 Step 2 - 플로팅 자동 목차 추가

StudyGPT 2023. 12. 19.

개요

개발 과정에서는 작업 편의성을 위해 소스를 다운받아 진행하였으나, 관리자 페이지에서 '스킨 편집'을 통해 바로 수정이 가능하다.

 

 

작업

1. HTML 수정

1) head - Script

</head> 상단에 추가

<head>
 ... 기존 소스 ...
  <!-- 자동 목차 (S) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
  <!-- 자동 목차 (E) -->
</head>

 

2) body - Div

<div class="article-view"> 상단에 추가

<!-- 자동 목차 View (S) -->
<div class='toc toc-fixed'></div>
<!-- 자동 목차 View (E) -->

... 기존 소스 ...
<div class="article-view">

 

3) Body - Script

</body> 상단에 추가

<!-- 자동 목차 Script (S) -->
<script>
  // set heading id
  function makeHeading(headings){
    Array.prototype.forEach.call(headings, function (heading) {
      var 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; }
    });
  }
  var headingMap = {};
  var headings = document.querySelector('.article-view').querySelectorAll('h1, h2, h3');
  makeHeading(headings);
  document.addEventListener("DOMContentLoaded", function() {
    // toc addon
    tocbot.init({
      // Where to render the table of contents.
      tocSelector: '.toc',
      // Where to grab the headings to build the table of contents.
      contentSelector: '.article-view',
      // Which headings to grab inside of the contentSelector element.
      headingSelector: 'h1, h2, h3',
      // For headings inside relative or absolute positioned containers within content.
      hasInnerContainers: false
    });
  });

  $("div.toc.toc-fixed").hide(0);
  $(window).scroll(function() {
    if (Math.round( $(window).scrollTop()) > 400) {
      $("div.toc.toc-fixed").show(250);
    } else {
      $("div.toc.toc-fixed").hide(250);
    }
  });
</script>
<!-- 자동 목차 Script (E) -->
... 기존 코드 ...
</body>

 

 

2. CSS 수정

 /* *********************************************************************
    자동 목차
    ****************************************************************** */
.toc-absolute {
  position: absolute;
  margin-top: 165px;
}

.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  left: calc((100% - 720px) / 2 - 300px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  z-index: 0;
}

.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}

.toc > .toc-list li {
  margin-bottom: 10px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
 }

.toc > .toc-list li a {
  text-decoration: none;
}

 

결과

적용이 되어 잘 노출이 되었으나 목차 내용이 본문을 넘어 가는 이슈 발생.

CSS 추가 수정이 필요하나 본문 상단에 고정 방식으로 목차를 추가하기로 함.

 

추가 수정

플로팅 목차를 사용하는 분들을 위해 추가 수정.

/* *********************************************************************
   자동 목차
   ****************************************************************** */
.toc-absolute {
    position: absolute;
    margin-top: 24px;
}

.toc-fixed {
    position: fixed;
    top: 165px;
}

.toc {
    left: calc((100% - 1020px) / 2 - 250px);
    width: 250px;
    padding: 10px;
    box-sizing: border-box;
    z-index: 0;
}

.toc-list {
    margin-top: 14px !important;
    font-size: 0.9em;
}

.toc > .toc-list li {
    margin-bottom: 14px;
}

.toc > .toc-list li:last-child {
    margin-bottom: 0;
}

.toc > .toc-list li a {
    text-decoration: none;
}

 

 

저작자표시 비영리 변경금지

'Blog' 카테고리의 다른 글

[티스토리 꾸미기] 스킨 편집 Step 4 - H1 ~ H3 스타일 변경  (0) 2023.12.19
[티스토리 꾸미기] 스킨 편집 Step 3 - 본문 사이즈 변경  (0) 2023.12.19
[티스토리 꾸미기] 스킨 편집 Step 1 - 스킨 소스 다운로드  (0) 2023.12.19
[티스토리 꾸미기] 모바일 웹 설정  (0) 2023.12.19
[티스토리 꾸미기] 포스트 주소  (0) 2023.12.19

댓글

티스토리툴바