Mono Works

チラシのすきま

hugoの記事にCSSだけで折り畳める目次を追加

ブログに目次を追加した。出しっぱなしにしておくと邪魔なので、必要な時に開くタイプの目次とした。このサイトをAMP完全対応するつもりはなけいど、目次の折り畳みはJavaScriptを使わずにCSSで実装。できるだけAMPに準拠しておけば、サイト表示も軽くなるよね、くらいのお気持ちである。

お花見の帰りに通りすがった大林組技術研究所

参考:Table of Contents | Hugo

single.htmlに目次パーツを追加

Hugo公式サイトのテンプレを参考に、/layouts/_default/single.htmlの目次パーツを表示させたい箇所に下記を追加。

{{ if and (gt .WordCount 400) (ne .Params.toc false) }}
  {{ partial "toc.html" . }}
{{ end }}

これで、記事の文字数が400字以上、かつFront Matterにtoc = falseと書かれていなければ、目次が表示される。あとは、archetypes配下のテンプレに適宜、toc = trueなり、toc = falseを追加しておく。

目次パーツの内容

/layouts/partials/toc.htmlを新規に作成して、下記内容を記述。

<div class="toc-title">
  <input class="toc-check" id="toc-check-1" type="checkbox">
  <label class="toc-label" for="toc-check-1">目次</label>
  <div class="toc-chapter">
    {{ .TableOfContents }}
  </div>
</div>

目次の表示/非表示の切り替えフラグとして、チェックボックスを利用。チェックボックスは、フラグとして使うだけなので、inputをCSSで非表示にする。inputのidとlabelのforを同じ値にすることで、CSSでデザインできるlabel要素をinputの代替として利用する。

設定したCSS

チェックボックス(input要素)を非表示にして、その他見た目を整える。

/* チェックボックスを非表示 */
.toc-check {
  display: none;
}
/* ラベル部分の修飾 */
.toc-label {
  background: #3F9FBF;
  color: #fff;
  display: flex;
  margin-top: 0.5em;
  padding: 6px 6px 0 12px;
  height: 36px;
}
/* チェックボックスにチェックが入っていない(メニュー非表示)状態の修飾 */
.toc-chapter {
  height: 0;
  opacity: 0;
  padding: 0 10px;
  visibility: hidden;
}
/* メニュー非表示時のアイコン */
.toc-label:after{
  content: '\f107';
  display: block;
  font-family: FontAwesome;
  font-weight: 900;
  padding: 0 0 0 20px;
}
/* チェックボックスにチェックが入った(メニュー表示)状態の修飾 */
.toc-check:checked ~ .toc-chapter {
  height: auto;
  opacity: 1;
  padding: 0 10px;
  margin-left: 1.5em;
  transition: 0.5s;
  visibility: visible;
}
/* メニュー表示時のアイコン */
.toc-check:checked ~ .toc-label:after {
  content: '\f106';
}
/* メニューの修飾 */
#TableOfContents > ul > li > ul{
  display: block;
  text-align: left;
  list-style-type: disc;
}
#TableOfContents > ul > li > ul > li > ul{
  padding-left: 0.75em;
  list-style-type: circle;
}

平成最後の土曜日(平成31年4月27日)に目次を追加した。

comments powered by Disqus
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内