티스토리 TOC 코드 복붙으로 종결하는 방법

티스토리에서 TOC 를 넣고자 하는 분들을 위한 TOC 1코드 복붙종결 코드이다. AI Gemini 를 사용하여 tocStyles 과 script 를 모두 하나로 합쳐서 작동하도록 하였다. 스타일 자체는 Gemini 에게 iOS Liquid Glass에서 영감을 받은 디자인으로 구성하도록 명령하였다. 

다음의 코드를 복사- 붙여넣기 하면 바로 TOC , 목차 기능이 작동한다. 

---

<script>
(function() {
    const tocStyles = `
        #toc-glass {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            width: fit-content;
            min-width: 250px;
            max-width: 90%;
            margin: 40px auto;
            padding: 24px;
            overflow: hidden;
            transition: transform 0.3s ease;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        @media (prefers-color-scheme: dark) {
            #toc-glass {
                background: rgba(30, 30, 30, 0.6);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: #fff;
            }
            #toc-glass .toc-title { color: #f5f5f7; }
            #toc-glass a { color: #d1d1d6; }
            #toc-glass a:hover {
                background: rgba(255, 255, 255, 0.1);
                color: #fff;
            }
        }
        #toc-glass .toc-title {
            font-size: 18px;
            font-weight: 700;
            color: #1d1d1f;
            margin-bottom: 16px;
            padding-left: 8px;
            letter-spacing: -0.5px;
        }
        #toc-glass ul { list-style: none; padding: 0; margin: 0; }
        #toc-glass li { margin-bottom: 4px; list-style: none !important; }
        #toc-glass li::before { content: none !important; }
        #toc-glass a {
            display: block;
            text-decoration: none;
            color: #424245;
            font-size: 15px;
            padding: 10px 14px;
            border-radius: 12px;
            transition: all 0.2s ease-in-out;
            line-height: 1.4;
        }
        #toc-glass a:hover {
            background: rgba(0, 0, 0, 0.05);
            color: #007aff;
            transform: scale(1.01);
        }
        #toc-glass .h1 a, #toc-glass .h2 a { font-weight: 600; }
        #toc-glass .h3 a { padding-left: 24px; font-size: 14.5px; color: #6e6e73; }
        #toc-glass .h4 a, #toc-glass .h5 a { padding-left: 34px; font-size: 14px; color: #86868b; }
    `;

    function injectStyles() {
        const style = document.createElement('style');
        style.textContent = tocStyles;
        document.head.appendChild(style);
    }

    function generateGlassTOC() {
        const contentArea = document.querySelector('.contents_style') || document.querySelector('.entry-content') || document.querySelector('article');
        if (!contentArea) return;

        let tocPlaceholder = null;
        const allPTags = document.getElementsByTagName('p');
        for (let p of allPTags) {
            if (p.textContent.trim() === '[목차열기]') {
                tocPlaceholder = p;
                break;
            }
        }

        const headers = contentArea.querySelectorAll('h1, h2, h3, h4');
        if (headers.length === 0) return;

        const tocContainer = document.createElement('div');
        tocContainer.id = 'toc-glass';
        
        const tocTitle = document.createElement('div');
        tocTitle.className = 'toc-title';
        tocTitle.innerText = 'On This Page';
        tocContainer.appendChild(tocTitle);

        const tocList = document.createElement('ul');

        headers.forEach((header, index) => {
            if (!header.id) header.id = 'toc-header-' + index;

            const li = document.createElement('li');
            li.className = 'toc-item ' + header.tagName.toLowerCase();

            const link = document.createElement('a');
            link.href = '#' + header.id;
            link.textContent = header.textContent;

            link.addEventListener('click', (e) => {
                e.preventDefault();
                document.querySelector(link.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });

            li.appendChild(link);
            tocList.appendChild(li);
        });

        tocContainer.appendChild(tocList);

        if (tocPlaceholder) {
            tocPlaceholder.parentNode.replaceChild(tocContainer, tocPlaceholder);
        } else {
            const firstHeader = headers[0];
            firstHeader.parentNode.insertBefore(tocContainer, firstHeader);
        }
    }

    injectStyles();
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', generateGlassTOC);
    } else {
        generateGlassTOC();
    }
})();
</script>

---

본문 작성시 html 모드에서 에서  맨 앞에 넣어줘도 되며, 스킨 편집 - html 편집 모드로 진입하여  </body></html> 바로 윗 줄에 붙여넣기 해줘도 정상적으로 작동하는 것을 확인하였다.