본문 바로가기
블로그 모하니

자동목차 페이지에 적용 하기

Content Craft 2023. 6. 7. 16:10

도움이 필요한 분들을 위해, 이 자동목차 페이지는 사용하기 쉬운 방식으로 다양한 주제에 관한 정보를 제공합니다. 이 페이지에서는 광범위한 주제들을 다루며, 각 주제에 대한 핵심 포인트와 유용한 자료를 제공합니다. 시간을 절약하고 정확한 정보를 얻기 위해 이 자동목차 페이지를 활용하세요.

 

자동목차 썸네일
자동목차 썸네일

 

1. 자동목차 페이지 소개

자동목차 페이지는 사용자에게 도움을 제공하기 위해 설계된 효율적인 도구입니다.

2. 최신 정보와 도움을 제공하는 자동목차 페이지란?

자동목차 페이지는 도움을 제공하는 온라인 도구입니다. 이 페이지를 통해 사용자들은 다양한 주제에 대한 정보를 신속하게 얻을 수 있습니다.

3. 자동목차 페이지 사용 방법 및 장점

자동목차 페이지를 사용하는 방법은 매우 간단합니다. 사용자들은 주제 목록을 확인하고 원하는 제목을 선택하기만 하면 됩니다. 이 페이지의 목차사용에 있어 장점은 사용자들이 복잡한 검색과정을 거치지 않고도 원하는 정보를 쉽게 찾을 수 있다는 점입니다.

4. 다양한 주제를 다루는 자동목차 페이지의 장점

자동목차 페이지는 다양한 주제를 다루는 페이지에서 유용합니다. 사용자들이 다양한 관심사에 대한 정보를 빠르게 이동하며 탐색할 수 있습니다. 사용자들은 여러 분야에 대한 핵심 포인트와 유용한 자료를 쉽게 제공받을 수 있어 효율적입니다.

5. 시간 절약과 정확한 정보 획득을 위한 자동목차 페이지 활용법

자동목차 페이지를 활용하면 사용자들은 시간을 절약하고 정확한 정보를 획득할 수 있습니다. 페이지 내의 목차를 참고하여 원하는 정보를 빠르게 찾을 수 있으며, 검색 과정에서 발생할 수 있는 혼란과 시간 낭비를 최소화할 수 있습니다.

6. 사용자 요구를 충족시키기 위한 자동목차 페이지의 개선 방향

자동목차 페이지는 사용자들의 요구를 충족시키기 위해 계속해서 개선되고 일반 목차에서 자동목차로 플로팅 목차등으로 발전하여 사용자 환경을 개선하는 방향으로 발전 중입니다.

7. 자동목차 페이지의 활용 사례 및 성공 이야기

자동목차 페이지는 다양한 분야에서 활용되며, 많은 사용자들에게 도움을 주고 있습니다. 사용자들이 자동목차 페이지를 통해 효과적인 정보 탐색과 핵심 내용 습득을 성공적으로 이루어내는 사례들이 많이 있으면 SEO에도 좋은 결과를 제공합니다..

9. 자동목차 페이지를 통한 사용자 만족도 증진 방안

자동목차 페이지의 사용자 만족도를 높이기 위해 추가적인 기능과 개선 방안을 도입할 수 있습니다. 사용자들의 요구와 피드백을 수집하여 페이지의 사용성을 개선하고, 더욱 유용한 정보를 제공함으로써 사용자들의 만족도를 증진시켜 페이지에 재방문할 수 있도록 편의를 제공할 수 있습니다.

10. 자동목차 페이지의 가치와 활용의 중요성

자동목차 페이지는 사용자들에게 최신 정보와 도움을 제공하는 중요한 도구입니다. 다양한 주제를 다루며, 사용자들이 효율적으로 정보를 얻을 수 있는 장점을 가지고 있습니다. 자동목차 페이지를 통해 사용자들은 시간을 절약하고 정확한 정보를 얻을 수 있으며, 지식 습득과 정보 탐색의 효율성을 높일 수 있습니다.

11. 자동목차 페이지에 적용하기

11-1 목차의 종류

초기 사용했던 목차방식입니다.

<ul style="list-style-type: disc;" data-ke-list-type="disc">
<li><a href="#section-1">주제 1</a></li>
<li><a href="#section-2">주제 2</a></li>
<li><a href="#section-3">주제 3</a></li>
</ul>
<h2 id="section-1" data-ke-size="size26">섹션 1</h2>
<p data-ke-size="size16">내용 1</p>
<p data-ke-size="size16"><a href="#top">목차로 이동</a></p>
<h2 id="section-2" data-ke-size="size26">섹션 2</h2>
<p data-ke-size="size16">내용 2</p>
<p data-ke-size="size16"><a href="#top">목차로 이동</a></p>
<h2 id="section-3" data-ke-size="size26">섹션 3</h2>
<p data-ke-size="size16">내용 3</p>
<p data-ke-size="size16"><a href="#top">목차로 이동</a></p>

나름 목차 넣어 보겠다고 서식을 만들어 사용했던 방식입니다. 주제 1 클릭 시 섹션 1로 이동하고 목차로 이동 버튼을 눌러 목차로 돌아가는 방식이죠. 저는 이렇게 하는 거구나 힘들겠다 했지요. 이렇게는 힘들기 때문에 비추천하겠습니다.

 

모하니M은 스킨을 이용해 사용하고 있습니다. 아주 간단해서 유용하게 사용하고 있는데요. 수정이 필요할 땐 스킬이 부족하여 어려워요 제작되어 있는 스킨은 수정이 어려워요. 건들면 페이지가 형태도 알 수 없게 변경되기 때문에 각별히 유의하고 백업! 백업이! 필수입니다. 코딩을 잘 알고 계시는 분이 부럽습니다.

 

지금 무리무리의 목차 사용 스크립트입니다.

간결하고 사용 법도 어렵지 않아 추천드려요.

크게 스크립트와 css로 나누어지는데요

그에 필요한 파일들을 링크해 놓겠습니다.

여러 가지 적용하여 사용해 본 결과 나쁘지 않았습니다.

참고사항: 북스킨을 기준으로 만들었습니다.

11-2-1. 자동 목차 생성

아래의 링크 파일 한 개는 업로드해주세요.

jquery.toc.min.js
0.00MB

 

티스토리 파일 업로드
티스토리 파일업로드

  • css파일 옆 파일업로드 클릭

티스토리 파일 추가
티스토리 파일 추가

티스토리 파일 업로드에서 먼저 위의 jquer.toc.min.js 파일을 다운로드하신 후 위의 순서로 파일을 업로드합니다.

스크립트

자동 목차 생성.txt
0.00MB

 

 

 

html 페이지 제일 하단 바디로 이동

<script src="./images/jquery.toc.min.js"></script>
<!-- 자동 목차 시작 -->
<script>
$(function() {
  var $toc = $("#toc");

  if ($toc.length === 0) {
    var firstContent = $('.tt_article_useless_p_margin').children().eq(0);
    var titleLength = $('.tt_article_useless_p_margin').find('h2,h3,h4').not('.another_category h4').not('h3.tit_list_type').length;

    if (titleLength > 0 && firstContent.length > 0) {
      firstContent.before('<div class="book-toc"><p class="toc-toggle">목차</p><ul id="toc"></ul></div>');
      $toc = $("#toc");
    }
  }

  if ($toc.length > 0) {
    $toc.toc({
      content: ".tt_article_useless_p_margin",
      headings: "h2,h3,h4",
      listType: "ul"
    });

    if ($('.another_category').length) {
      $toc.find('li:last').remove();
    }

    $toc.find('li:has(ul)').addClass('closed').find('ul').hide();

    $('.toc-toggle').on('click', function(e) {
      e.preventDefault();
      // 클릭해도 아무런 변화가 없도록 처리
      return false;
    });

    $toc.on('click.namespace', 'li:has(ul) > a', function(e) {
      e.preventDefault();
      $(this).parent().toggleClass('open').find('ul').slideToggle();
      $(this).toggleClass('active');
    });
		}
});
</script>

이미지의 빨간 부분 보이시죠? 코드를 바디 위에 붙여 넣기 하시면 됩니다.

  • css로 이동합니다. 아래의 css를 복사하여 제일 하단에 붙여 넣기 하세요.

자동 목차 생성 css.txt
0.00MB

 

 

 

/* 목차 토글 버튼 스타일 */
.book-toc .toc-toggle {
  cursor: pointer;
  font-weight: bold;
  text-decoration: underline;
}

/* 목차 컨테이너 스타일 */
.book-toc #table-of-contents {
  display: none;
}

/* 목차 접기/펼치기 스타일 */
.book-toc.toc-expanded ul {
  display: block;
}

/* 목차 아이템 스타일 */
.book-toc ul {
  list-style: none;
  padding-left: 15px;
}

.book-toc li {
  margin-bottom: 5px;
}

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


/* 제목 앞의 점 숨김 */
.book-toc h2:before,
.book-toc h3:before,
.book-toc h4:before {
  content: none;
}

/* 목차 제목에 점 표시 제거 */
.book-toc ul ul:before {
  content: none;
}

그 후 페이지를 새로고침 해보시면 자동목차가 생성됩니다. 기존 사용 하고 계신 자동목차가 있으면 바꿀필요 없습니다.

 

11-2-2. 플로팅 목차

플로팅 목차도 위의 방식과 동일합니다. 바디 위에 한 칸 만드시고 붙여 넣기 css도 제일 하단에 붙여 넣기 나름 기능을 구성해서 사용엔 문제가 되지 않은데 약간 미흡해요. 2% 부족합니다. 채워주실 용자분!!

 

무리무리에서 사용해 보시고 결정해 주세요. 플로팅 목차 설치하시면 기능이 약간 변경됩니다. 페이지 목차가 플로팅 목차의 기능이 생겨서 수정해 보고 있는데 역시 어려워요! 누가 딱 이렇게 하면 돼요 하고 알려주면 참 좋겠어요! ^^

스크립트와 css입니다.

플로팅 목차

플로팅 목차 생성.txt
0.00MB

 

 

<script>
/* 떠 다니는 목차 */
function appendToc() {
  var bookToc = $('.book-toc');
  var floatingToc = $('.floating-toc');
  var isMouseOver = false; // 마우스가 목차창에 위치해 있는지 여부

  // 마우스가 목차창에 들어오면 자동 접기를 멈춤
  floatingToc.on('mouseenter', function() {
    isMouseOver = true;
  });

  // 마우스가 목차창을 벗어나면 자동 접기를 다시 시작
  floatingToc.on('mouseleave', function() {
    isMouseOver = false;
    if (!floatingToc.hasClass('closed')) {
      hideToc();
    }
  });

  // 목차창 숨기는 함수
  function hideToc() {
    floatingToc.addClass('closed');
    $('#toc-body').slideUp();
    $('#toc-title>p>span').text('펼치기');
  }

  // 목차창 보이는 함수
  function showToc() {
    floatingToc.removeClass('closed');
    $('#toc-body').slideDown();
    $('#toc-title>p>span').text('접기');
  }

  if (bookToc.length > 0 && window.scrollY > bookToc.offset().top + bookToc.innerHeight()) {
    if (floatingToc.height() === 0 && bookToc.innerHeight() > 70) {
      floatingToc.css('display', 'block');
      bookToc.css('width', bookToc.width() + 'px'); //목차 박스 크기에 이상 있으면 제거하세요
      bookToc.css('height', bookToc.height() + 'px'); //목차 박스 크기에 이상 있으면 제거하세요
      var tocTitle = $('<div id="toc-title"><p>목차 <span style="opacity:0.5;">펼치기</span></p></div>');
      floatingToc.append(tocTitle);
      bookToc.css('height', bookToc.height()); //목차 박스 크기에 이상 있으면 제거하세요
      var tocBody = $('<div id="toc-body" style="display:none; overflow-y: auto; max-height: 200px;"></div>').append(bookToc.find('#toc'));
      floatingToc.append(tocBody);

      floatingToc.css('padding', '0');
      $('#toc-title').css('padding', '10px');

      floatingToc.css('top', '20px');
      floatingToc.css('left', '20px');
      floatingToc.css('position', 'fixed');

      // 목차 클릭
      $('#toc-title').on('click', function() {
        if (floatingToc.hasClass('closed')) {
          showToc();
        } else {
          hideToc();
        }
      });

      // 목차 항목 클릭
      $('#toc-body').find('a').on('click', function() {
        setTimeout(function() {
          checkPosition();
        }, 200);
      });

      floatingToc.css('visibility', 'hidden'); // visibility 값을 hidden으로 주어 잠시 숨김
      showToc();
      setTimeout(function() {
        if ($('.tt_article_useless_p_margin').offset().left < $('.floating-toc').width() + 40) {
          hideToc();
        }
      }, 500);
      setTimeout(function() {
        floatingToc.css('visibility', ''); // 완전히 접힌 후 다시 보이도록 함
      }, 1100);

      // 스크롤 이벤트 처리
      function checkPosition() {
        var titleList = $('.tt_article_useless_p_margin').find('h2, h3, h4');
        var scrollY = window.scrollY + 50;
        if (titleList.length > 1) {
          for (var i = 0; i < titleList.length; i++) {
            var tocList = $('#toc').find('a');
            if (i < titleList.length - 1) {
              if (titleList.eq(i).offset().top < scrollY && titleList.eq(i + 1).offset().top > scrollY) {
                tocList.removeAttr('style');
                tocList.eq(i).css('font-weight', 'bold');
                break;
              }
            } else {
              if (titleList.eq(i).offset().top < scrollY) {
                tocList.removeAttr('style');
                tocList.eq(i).css('font-weight', 'bold');
                break;
              }
            }
          }
        }
      }

    } else {
      checkPosition();
    }
  } else {
    hideToc();
    bookToc.append(floatingToc.find('#toc'));
    floatingToc.find('div').remove();
    floatingToc.removeAttr('style');
    floatingToc.css('display', 'none');
    $('#toc').find('a').removeAttr('style');
  }
}

/* DOM 로드 직후 실행 */
$(document).ready(function() {
  /* 스크롤 이벤트 리스너 */
  $(window).on('scroll', function() {
    appendToc();
  });
  appendToc(); // 초기에도 목차를 추가하도록 호출
});
</script>
<!-- 플로팅 목차 -->
<div class="floating-toc"></div>

 

플로팅 목차 css

플로팅 목차 css.txt
0.00MB

 

 

/* 플로팅 목차 스타일 */
.floating-toc {
position: absolute;
cursor: pointer;
border: 1px solid #b0d197;
background: #fff;
padding: 10px;
z-index: 999;
line-height: 1.5em;
}

.floating-toc p {
font-weight: bold;
font-size: 1em !important;
margin: 0;
}

.floating-toc #toc-body {
margin-top: 10px;
}

.floating-toc #toc-body #toc * {
font-size: 15px;
}

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

.floating-icon:after {
font-family: "Font_Awesome_5_Free";
content: "\f03a";
font-size: 0.8125em;
color: #548a25;
}

.floating-toc #toc-title p span {
display: none;
}

.floating-toc #toc-body #toc * {
font-size: 15px; /* 기존 크기: 15px */
}

/* 수정된 부분: 목차 내용 크기 20% 줄이기 */
.floating-toc #toc-body #toc ul li a {
font-size: 12px;
}

.floating-toc #toc-body #toc ul li ul li a {
font-size: 11px;
}

/* 수정된 부분에는 목차 내용에 스크롤을 추가하는 부분이 포함되어 있습니다.*/

.floating-toc #toc-body {
    margin-top: 10px;
    overflow-y: auto;
    max-height: 200px;
}

 

사용하시기 전에 꼭 테스트해보시고 적용하세요.

추가글

자동목차가 있는 경우와 없는 경우의 SEO에서의 차이점

  • 검색 엔진 크롤링: 자동목차가 있는 페이지는 목차의 구조를 인식하여 검색 엔진 크롤러가 페이지의 구조를 파악할 수 있습니다. 이는 검색 엔진이 페이지의 콘텐츠를 이해하고 인덱싱하는 데 도움이 됩니다. 반면에 자동목차가 없는 경우, 페이지의 구조를 파악하기 어려워 검색 엔진이 콘텐츠를 이해하는 데 어려움을 겪을 수 있습니다.
  • 내부 링크 구성: 자동목차가 있는 페이지는 목차 항목들을 내부 링크로 활용하여 콘텐츠 간의 관련성을 강조할 수 있습니다. 이는 검색 엔진이 페이지 내의 중요한 섹션들을 식별하고 페이지의 구조를 이해하는 데 도움이 됩니다. 자동목차가 없는 경우, 페이지 내의 섹션들 간의 관련성을 명확하게 표현하기 어려울 수 있습니다.
  • 사용자 경험: 자동목차가 있는 페이지는 사용자에게 내비게이션과 정보 탐색의 편의성을 제공합니다. 사용자들은 목차를 통해 관심 있는 섹션으로 바로 이동할 수 있으며, 필요한 정보를 빠르게 찾을 수 있습니다. 이는 사용자들의 만족도와 페이지 이탈률 감소에 긍정적인 영향을 미칠 수 있습니다. 자동목차가 없는 경우, 사용자는 페이지 내의 정보를 찾기 위해 스크롤하거나 검색 기능을 활용해야 할 수 있으며, 이는 사용자 경험을 저하시킬 수 있습니다.
  • 키워드 타겟팅: 자동목차가 있는 페이지는 목차 항목을 통해 주요 키워드를 포함할 수 있습니다. 이는 검색 엔진에게 페이지의 핵심 토픽을 알려주고 검색 결과에서 노출될 기회를 높일 수 있습니다. 자동목차가 없는 경우, 키워드 타겟팅을 위한 구조적인 요소가 부족할 수 있으며, 이는 검색 엔진에서의 페이지 노출에 제한을 줄 수 있습니다.

결론

자동목차를 활용하는 것은 검색 엔진 최적화와 사용자 경험 측면에서 이점을 가져다줄 수 있습니다. 자동목차를 페이지에 구성하느냐 안 하느냐의 차이도 있을 것으로 예상되며 이러한 편의 기능은 페이지에서 제공하여 사용자들에게 좀 더 정확한 정보와 내용을 제공하면 좋은 결과로 이어질 것입니다.

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