ブログに目次を追加した。このサイトをAMP完全対応するつもりはなけいど、目次の折り畳みはJavaScriptを使わずにCSSで実装。できるだけAMPに準拠しておけば、サイト表示も軽くなるよね、くらいのお気持ちだ。
更新履歴
- 2019/06/28：初期表示で目次を表示するように変更したので、その設定を追記
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;
}
初期表示で目次を表示するように変更
上述の設定では、最初は目次を非表示にして、アイコンクリックで目次を表示していたが、使っているうちに逆の方が良さそうだったので逆にした。また、目次全体に影を付けて、本文との境界がはっきりと分かるようにした。
/* 目次部分に影を追加 */
.toc-title {
box-shadow: 2px 2px 4px #ccc;
padding-bottom: 0.3em;
}
/* チェックボックスを非表示 */
.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: auto;
opacity: 1;
padding: 0 10px;
margin-left: 1.5em;
transition: 0.5s;
visibility: visible;
font-size: 0.9rem;
}
/* メニュー表示時のアイコン */
.toc-label:after{
content: '\f106';
display: block;
font-family: FontAwesome;
font-weight: 900;
padding: 0 0 0 20px;
}
/* チェックボックスにチェックが入った（メニュー非表示）状態の修飾 */
.toc-check:checked ~ .toc-chapter {
height: 0;
opacity: 0;
padding: 0 10px;
visibility: hidden;
}
/* メニュー非表示時のアイコン */
.toc-check:checked ~ .toc-label:after {
content: '\f107';
display: block;
font-family: FontAwesome;
font-weight: 900;
padding: 0 0 0 20px;
}
/* メニューの修飾 */
#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日）に目次を追加
コメント
コメントなどありましたら、GitHubのディスカッションへお願いします。（書き込みには、GitHubのアカウントが必要です）