📝

【Hugo】Learnテーマで、目次を非表示にする方法

2021/09/17に公開

Hugo

tech

TL; DR

HugoのLearnテーマで目次を非表示にするには、各ページの front-matter に、 disableToc = true を指定する
Hugoはテーマごとに機能や設定方法が異なるので、調査方法についても記載しています。

1. 発端

個人開発している強化学習用の cpprb は、プロジェクトWebサイトをHugoを利用して作成しています。

ある時、ふと気がついたのですが、ページの上部のナビゲーション上に、謎の領域が表示されていました。

左上に不思議な領域が

利用しているLearnテーマのデモページを見てみると、マウスオーバーによって目次 (Table of Contents) が表示される領域だということがわかりました。

何故かうまく表示されていないし、また各ページの上部に目次が必要なほど各ページの情報量は大きくないので、もう目次自体を非表示にすることにしました。

2. 非表示の仕方

後から気がついたのですが。。。

Learnテーマの場合は、disableToc = true と指定すれば良さそうと書いてありましたね。

Hugoはテーマによって利用できる機能や設定方法が異なるため、実際にソースコードを見て挙動を調査する方法を記載します。

Hugoのテーマは、layouts/partials 配下に置いたページのコンポーネントをテンプレートとして利用します。

目次を司っていると思われる toc.html があったので覗いてみました。

layouts/partials/toc.html

<div class="progress">
    <div class="wrapper">
{{ .TableOfContents }}
    </div>
</div>

このコンポーネントは、条件レンダリングなどの制御はなく、単純に目次を表示していますね。
{{ .TableOfContents }} はページのコンテンツの目次を表示するHugoの標準の機能です。

toc.html を呼び出している部分を探して、header.html を覗いてみるとありました。

layouts/partials/header.html（82行目-84行目）

{{ if $toc }}
  {{ partial "toc.html" . }}
{{ end }}

これは $toc 変数が真のときに、toc.html を呼び出すことを意味しているので、目的である目次の表示・非表示の切り替えを切り替えられそうなことがわかりました。

$tocの定義を探してみると、同じファイルの63行目にありました。

layouts/partials/header.html（63行目）

{{$toc := (and (not .Params.disableToc) (not .Params.chapter))}}

.Params.disableToc が真になるように指定してあげれば良いことがわかりました。

よって、個別のページの markdown ファイルの front-matter に disableToc = true と指定すれば、目的を達成できます。

ページ.md

+++
title = "hogehoge"
author = ["name"]
+ disableToc = true
+++

以下、普通のmarkdownドキュメント

3. おまけ

markdownファイルを直接編集する場合は以上で完成ですが、私はREADMEの内容をWebサイトに流用したいし、ページ毎にfront-matterを毎回書くのが面倒なので、Emacs Org Mode で集約したファイルを書いて ox-hugoで、ノード毎にmarkdownファイルにエクスポートしています。

エクスポート時の front-matter の指定は以下のページに記載がありました。

#+hugo_custom_front_matter: :disableToc true

ドキュメントからは、このプロパティの指定が、front-matterの上書きなのか、デフォルト設定への追加なのかは判別できませんでしたが、やってみると追加になるので上記の設定だけで、目次の非表示にできました。