블로그스팟 테마 목차 이동이 안되는 버그 수정

무료 테마에 대한 영상을 업로드하고 구독자 분께서 목차가 작동 안되는것 같다고 알려주셨습니다.

정작 제 블로그 확인은 하지않고, 다시 확인해보라고 답글을 달았는데(정말 죄송해요~)

확인해보니 한글만 입력된 경우 문자로 인식하지 않는 버그가 있는 것 같습니다.

지금 바로 수정하는 방법 알려드릴께요!

한글만 입력된 경우 목차에서 소제목을 클릭하게 되면 해당 소제목으로 이동이 안됩니다.

그래서 일부 코드를 변경해야 합니다. 이게 베트남 분이 만들어서 그런지 한글 호환이 좀.. 그렇네요 😅

우선 블로그스팟 테마 > HTML 편집을 눌러줍니다.

그리고 HTML 코드가 나올텐데요! 컨트롤+F 키를 눌러서 검색창을 띄웁니다.

검색창에 toc* 이라고 입력하고 엔터를 칩니다(toc 시프트8 입니다)

그러면 toc* 에 대한 검색이 진행되고 사진에 보이는 코드부터 마우스로 드래그합니다.

<b:if cond='data:skin.vars.autotoc == "1px"'>

드래그(선택)하는 이유는 이 부분이 잘못되어서 목차가 제대로 작동하지 않기 때문인데요!

그래서 이 부분을 새로운 코드로 교체해줄거라서 기존 코드를 선택해서 제거 할겁니다.

까지 선택한 후 제거

사진에서 보시는 위치까지 드래그 한다음 삭제하면 됩니다.

삭제한 자리에 새로운 코드를 붙여넣기 할건데요!

새로운 코드는 본문 하단에 있습니다!!

이렇게 새로운 코드로 교체한 후에 오른쪽 상단의 <저장> 버튼을 꼭 눌러주세요!

그리고 다시 접속하시면 정상 작동하는 것을 알 수 있습니다.

<b:if cond='data:skin.vars.autotoc == &quot;1px&quot;'>
<script>
    //<![CDATA[
    /*!Remove Manual ToC*/
    $(".post-body b").each(function(){var t=$(this);t.text().toLowerCase().trim().match("{tocify}")&&t.remove()});
    //]]>
    </script>
<b:if cond='data:view.isPost or (data:view.isPage and data:skin.vars.pagetoc == &quot;1px&quot;)'>
<script>
    //<![CDATA[
    // 변경된 TOC 생성 코드
    var toc_html='<div id="tocid" class="tocify-wrap"><div class="tocify-inner"><a href="javascript:;" class="tocify-title" role="button" title="'+toc_title+'"><span class="tocify-title-text">'+toc_title+'</span></a><ol id="tocify"></ol></div></div>';
    var toc_head=$("#post-body h2,#post-body h3,#post-body h4");
    if(toc_head.length>1){
        toc_head.first().before(toc_html);
        var _0xb767x3=".tocify-wrap";
        $(".tocify-title").each(function(t){
            (t=$(this)).on("click",function(){
                t.toggleClass("is-expanded");
                $("#tocify").slideToggle(170);
            })
        });
        
        // 헤딩 ID 생성 함수
        function generateValidId(text) {
            return text.toLowerCase()
                       .replace(/[^a-z0-9가-힣 ]/g, '')
                       .replace(/\s+/g, '-');
        }

        // 헤딩에 ID 추가
        toc_head.each(function() {
            var $heading = $(this);
            var headingText = $heading.text();
            var validId = generateValidId(headingText);
            $heading.attr('id', validId);
        });

        // TOC 생성
        $("#tocify").toc({
            content: "#post-body",
            headings: "h2,h3,h4",
            headerText: function(i, heading, $heading) {
                return $heading.text();
            }
        });

        // TOC 링크 클릭 이벤트
        $("#tocify").on('click', 'a', function(e) {
            e.preventDefault();
            var target = $($(this).attr('href'));
            if(target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top - 60
                }, 500);
            }
        });
    }
    //]]>
    </script></b:if>

블로그스팟 테마 목차 이동이 안되는 버그 수정

블로그스팟 테마 목차 이동이 안되는 버그 수정

Related Posts