アコーディオンメニューを Hugo で作ったこのブログ(gkzz.dev)で使いたい
1.この記事で達成したいこと アコーディオンメニューをHugoで作ったこのブログ(gkzz.dev)で使いたい アコーディオンとは、長い説明やサンプルコードを折りたたむようにすることで、見たいときだけクリックして見ることができるナビゲーションメニューのひとつ 参考：アコーディオンメニュー（accordion menu）とは - IT用語辞典 e-Words アコーディオンの一例 青空文庫から「こころ」の冒頭を抜粋します。 私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。 私が先生と知り合いになったのは鎌倉かまくらである。その時私はまだ若々しい書生であった。暑中休暇を利用して海水浴に行った友達からぜひ来いという端書はがきを受け取ったので、私は多少の金を工面くめんして、出掛ける事にした。私は金の工面に二に、三日さんちを費やした。 出所：https://www.aozora.gr.jp/cards/000148/files/773_14560.html 2.方針 アコーディオン（アコーディオンメニュー）をHTMLのdetailsタグとsummaryタグを使って実装する c.f. https://developer.mozilla.org/ja/docs/Web/HTML/Element/details 3.環境情報 $ grep VERSION /etc/os-release VERSION="20.04.3 LTS (Focal Fossa)" VERSION_ID="20.04" VERSION_CODENAME=focal ※ アコーディオンをHugoで使う上で求められる技術はHTML/CSSです。Hugoの推奨バージョンはドキュメントを読むかぎり、記載されていおりませんでした。私の環境では以下の2つのバージョンで動作確認をしております。ご参考までに。 $ hugo version hugo v0.88.1-5BC54738+extended linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio $ $ hugo version hugo v0.88.1-5BC54738 linux/amd64 BuildDate=2021-09-04T09:39:19Z VendorInfo=gohugoio $ 4.アコーディオンの設定方法 Hugoのテーマを使っていない場合、layouts/shortcodes/accordion.htmlを作成 e....