【Pug】手軽にナビゲーションのカレント表示

Pugでは共通のコンポーネントを外部ファイルとして分離しincludeすることができます。
コードの重複を避けメンテナンスを容易にできますが、ナビゲーションのように特定のページでカレント表示させたい場合には少し工夫が必要になります。
今回はそのような場合に役立つ簡単な方法を紹介します。

カレントページ判定関数の定義

ナビゲーションの各リンクが現在のページに対応しているかどうかを判断するための関数currentPage()を定義します。
指定されたページURLが現在のページURLの先頭部分と一致するかを判断し、一致する場合にaria-current属性に"page"を設定します。

includes/_navigation.pug

- const currentPage = (page) => currentNavSection.startsWith(page) ? 'page' : undefined

nav(aria-label='グローバルナビゲーション')
  ul
    li
      a(href='/news/' aria-current=currentPage('news/')) お知らせ
    li
      a(href='/contact/' aria-current=currentPage('contact/')) お問い合わせ

現在のページURLを定義

Pugテンプレート内で現在のページURLを示す変数を定義します。

news/index.pug

- const pageUrl = 'news/'

include /includes/_navigation

URLの構造が階層的である場合にも対応

お知らせがカレント表示される

news/article.pug

- const pageUrl = 'news/article.html'

お問い合わせがカレント表示される

contact/news/

- const pageUrl = 'contact/news/'

---

この方法によりPugで共通のナビゲーションを管理しつつカレント表示を動的に行うことが可能になります。