Bootstrap 5 へのバージョンアップ

このサイトの Bootstrap をバージョン3から5へとメジャーバージョンアップした。

以前、バージョン3から4に上げようとした時に、表示が崩れてうまくいかずにしばらく放置していたけれど、そろそろメジャーバージョンアップをしておいた方が良いかなと思い、バージョン5に上げた。

bootstrapテーマのcssのリンクが散らばっていたので、base-jsにまとめて、Flatlyのcssについては cdn.jsdelivr.net を直接参照するようにした。ナビゲーションバーが壊れたので、FlatlyページのNavbarsからヘッダへとコードをコピーし、さらに現在のページと一致する場合だけに nav-link active とするように、

{%- for item in site.data.navigation %}
<li class="nav-item">
  <a href="{{ item.link | prepend: site.baseurl }}" class="nav-link{% if item.link == page.url %} active{% endif %}">{{ item.name }}</a>
</li>
{% endfor -%}

というコードを書いた。site.data.navigation は _data/navigation.yaml から読み込まれる。英語版も同様に。

Bootstrap 5 では jQuery は使わないようになったとのことなので、削除した。ただし、UNSODAビューアとKaTeXのヘッダには直接書いた。

これでだいたいのところは良くなったようなので、あとは何かおかしいことがあれば、あるいは見栄えを修正する方が良ければ、気がついた時に直していく。