HUGO Stackテーマで目次（TOC）を追加した

~~当ブログで使用しているHugo Themes Stackに目次~~を追加する方法をまとめます。
現在はStackテーマに標準のTOC機能が追加されたので使用していません。

なお、本内容は以下のサイトを参考にしました。

Hugo Coderに目次(ToC)を追加する

Stackテーマに目次機能を追加する

目次の機能自体はHUGOで用意されているがStackテーマのデフォルトでは目次表示は有効化されていません。そこで、HUGO自体の機能を利用して目次（ToC）を追加したいと思います。

以下のパスとコードでhtmlファイルを作成します。

layouts\partials\toc.html

<div class="page-toc">
    <b>目次</b>
    {{ .TableOfContents }}
</div>

記事内に目次が表示されるように1.の内容を追加します。

themes\hugo-theme-stack\layouts\partials\article\components\content.html

<section class="article-content">
    {{ partial "toc.html" . }}
    {{ .Content }}
</section>

目次の見た目調整

Hugo Themes StackにおいてCSSの調整を行う場合、layouts\partials\head\custom.htmlを編集するようです。
もしかしたら他の方法もあると思うため、今後わかりましたら更新します。

目次を任意の表示に調整します。

<style>
        /// Overwrite CSS variable
    :root {
        --base-font-family: "Noto Sans JP", sans-serif, "Merriweather", var(--base-font-family);
    }
    .page-toc {
        margin: 1em;
        padding: 1em;
        width: auto;
        border: 1px solid #ddd;
    }
</style>

<script>
        (function () {
            const customFont = document.createElement('link');
            customFont.href = "https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap";

            customFont.type = "text/css";
            customFont.rel = "stylesheet";

            document.head.appendChild(customFont);
        }());
</script>

最終的に以下のような目次が表示されるようになります。

まとめ

Hugo Themes Stackにて目次が表示されるようにしました。Hugo自体に目次機能があるため用意に追加することができました。
Hugoに関しては使い始めたばかりであるため、今後も定期的にまとめていきます。