注意

未だにBootstrap 4.6.2に留まっている怠惰な人の話なので、 Bootstrap 5ではより良い簡単な方法があるかもしれません。

全ページに各記事の年別一覧ページへのリンクを追加することにしました

メニューが乏しくて寂しいのと、インデックスページにリンクを追加しないとGoogleくんがかなりの記事をクロールしなくて良いと判断するためです。特に何故か2017年の記事がなかなかクロールされません。サイトマップはちゃんと書いているのに。

これがメニューにズラッと横並びするのは流石に異様なので、ドロップダウンメニューとすることにしましょう。

JavaScriptを追加しないといけないのが痛手ですが。 Bootstrap 5はjQuery非依存らしいのでアップデートするモチベージョンになりましたね。

実装して開くとこんな感じです。

ダサいけど機能は満たせているでしょう。

モバイルユーザーに2回もタップさせたくない

さてモバイル版のメニューは、 Navbar · Bootstrap v4.6 に従うことにしたので、いわゆるハンバーガーメニューでメニュー一覧を開くことにします。

ハンバーガーメニューでメニューを開いた時、デフォルトだとドロップダウンメニューは閉じているのですが、これはちょっと嫌ですね。

私がユーザだとするとメニューの一覧を見たいという確固たる思いでメニューを開いたのですから、もう一度タップしてメニューを開く、などということはしたくありません。それがよほどのメニュー量であるならば話は別ですが、それはもう別のインデックスページを用意したほうが良さそうです。

なるべく追加の生のJavaScriptやCSSを書かずに実現できないかと思って色々見てみました。

navbarを開くボタンである.navbar-togglerは、 data-target="#navbar-supported-content"のようにidを指定して開いていることに気が付きました。これをdata-target=".navbar-supported-content"のようにclassを指定するように書き換えて、 <div class="dropdown-menu navbar-supported-content">のようにdropdownのclassにこれを追加すれば、モバイル版でnavbarを開いただけで指定したドロップダウンメニューが自動的に開かれます。

aria-controlsの方はidを指しているようなので残念ながら消しておきましょう。

UX的に嬉しい挙動なのかは知りませんが、機能的に私の欲しい物は手に入りました。

まあそもそも真面目にやるならばReactあたりで記述して、大部分はSSRするとしてもコントロールをReactで制御するからこんなことをいちいち思い悩まなくて済むのですが、基本静的サイトなここに独自のscriptをあまり持ち込みたくはありませんでした。