超簡易ティストリー自動目次を作成する（シンプルなJavaScript）

組織には目次機能が搭載されていないため、外部TOCスクリプトをロードして手動または自動で目次を挿入することがよくあります。私は、Thistory BlogにシンプルなJavaScriptとCSSコードで直接作成した目次（TOC）を使用しています。

超簡易ティストリー自動目次の作成

WordPressには、さまざまな無料および有料目次プラグインがあります。この WordPress ブログには現在、Fixed TOCという有料目次プラグインが使用されています。

私の記事のブログには、シンプルなJavaScript（JavaScript）とCSSの目次が適用されています。😄

外部目次スクリプトをロードしてカスタムする方法を利用するオデッセイに置き換えて、簡単な目次スクリプトを作成しました。

以下のJavaScriptとCSSコードが使用されました。

JSコード：


<script>
document.addEventListener("DOMContentLoaded", function() {
    function smoothScrollTo(element) {
        document.querySelector(element).scrollIntoView({
            behavior: 'smooth'
        });
    }

    var toc = document.createElement('nav');
    toc.id = 'table-of-contents';
    toc.setAttribute('aria-label', 'Table of Contents');
    toc.setAttribute('itemscope', '');
    toc.setAttribute('itemtype', 'http://schema.org/SiteNavigationElement');

    var tocLabel = document.createElement('div');
    tocLabel.id = 'toc-label';
    tocLabel.innerText = '목차';
    toc.appendChild(tocLabel);

    var ul = document.createElement('ul');
    var counter = { h2: 0, h3: 0, h4: 0 };

    var headings = document.querySelectorAll('.contents_style h2, .contents_style h3, .contents_style h4');
    if (headings.length > 1) {
        Array.prototype.forEach.call(headings, function(heading) {
            var headingLevel = heading.tagName.toLowerCase();
            if (headingLevel === 'h2') {
                counter.h2++;
                counter.h3 = 0;
                counter.h4 = 0;
            } else if (headingLevel === 'h3') {
                counter.h3++;
                counter.h4 = 0;
            } else if (headingLevel === 'h4') {
                counter.h4++;
            }

            var sectionNumber = counter.h2 + (counter.h3 ? '.' + counter.h3 : '') + (counter.h4 ? '.' + counter.h4 : '');
            var anchor = document.createElement('a');
            var headingId = 'heading' + sectionNumber.replace(/\./g, '-'); // 점(.)을 하이픈(-)으로 대체
            anchor.href = '#' + headingId;
            anchor.innerText = sectionNumber + ' ' + heading.innerText;
            anchor.setAttribute('itemprop', 'url');

            var li = document.createElement('li');
            if (headingLevel === 'h3') {
                li.classList.add('toc-h3');
            } else if (headingLevel === 'h4') {
                li.classList.add('toc-h4');
            }
            li.setAttribute('itemprop', 'name');
            li.appendChild(anchor);
            ul.appendChild(li);

            heading.id = headingId;
            heading.setAttribute('itemprop', 'name');
        });
        toc.appendChild(ul);

        var firstH2 = document.querySelector('.contents_style h2');
        if (firstH2) {
            firstH2.parentNode.insertBefore(toc, firstH2);
        }
    }

    var tocLinks = document.querySelectorAll('#table-of-contents a');
    tocLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            var href = this.getAttribute('href');
            smoothScrollTo(href);
        });
    });
});
</script>

CSSコード：

/* TOC */
#table-of-contents {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#toc-label {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 22px;
  color: #333;
  position: relative;
  display: inline-block;
    padding-bottom: 5px;
   border-bottom: 4px solid #007bff;
}

#table-of-contents ul {
  list-style: none;
  padding: 0;
  margin-left: 20px;
}

#table-of-contents ul li {
  margin-bottom: 10px;
  position: relative;
}

#table-of-contents ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

#table-of-contents ul li a:hover {
  color: #007bff;
}

#table-of-contents ul li.toc-h3 {
  margin-left: 15px;
}

#table-of-contents ul li.toc-h4 {
  margin-left: 30px;
}

同じコード WordPress サイトにも適宜変更して使用しています。