[Hugo v0.55] IcarusテーマにTOCをつける

Hugo.TableOfContents で目次を出力できる。

layouts/partials/single_article.html に目次をつける

フロントマッターで toc: true とした場合にのみ表示するようにする。 (この記事は toc: true としてあるので、目次が表示されている)

  <div class="article-entry" itemprop="articleBody">
+   {{ if .Params.toc }}
+   <div class="toc"><p>目次</p>
+     {{ .TableOfContents }}
+   </div>
+   {{ end }}
+ 
    {{ .Content }}
  </div>

static/css/style.css を編集してスタイルを整える

出力されるHTMLに応じて好きに編集する。

.toc {
  float: right;
  background: #f8f8f8;
  margin-top: 20px;
  padding: 10px;
  font-size: 90%;
}
.toc > p {
  font-weight: bold;
  font-size: 105%;
  margin: 0;
}
#TableOfContents code {
  color: inherit;
  font: inherit;
  background: inherit;
  border: inherit;
}
#TableOfContents > ul {
  list-style-type: none;
  margin: 0;
}
#TableOfContents > ul > li > ul {
  list-style-type: decimal
}
Share
関連記事