メイン ナビゲーションを備えたシンプルな静的サイトを取得しました。メタルスミス ジェネレーターを操作します。
現在のメニュー項目をアクティブに設定するネイティブな方法はありますか?
私の現在の自動化されていないソリューション:
次のような回避策を作成しました。
page1.md
上部に定義できるいくつかの変数を含むコンテンツのソースとしての MD ファイル:
---
title: this is the site title
currentPage1: current
layout: main.html
---
<article class="featurette">
<p class="lead">Some content text...</p>
</article>
と私のレイアウト HTML ファイルmain.html
. handlebars
エンジンとして使用される場所。ここにメニューの一部を投稿するだけです:
<ul class="nav">
<li>
<a href="/page1/" class="{{ currentPage1 }}">Link to Page1</a>
</li>
<li>
<a href="/page2/" class="{{ currentPage2 }}">Link to Page2</a>
</li>
</ul>
どちらも金属細工のレンダリングを行っています。メニューの Page1にcurrent
クラスがあります。
質問
私のソリューションはこれまでのところ機能していますが、サイトが拡大するにつれて. すべてのサイトの「現在」を何度も定義する必要があります。気をつけないと設定ミスにつながります... いくつかの専門分野があるので、メインのナビゲーション マークアップに自由を持たせたいと思っています。
または プラグインを使用してアクティブなメニュー項目を設定できますか、metalsmith-permalinks
またはmetalsmith-canonical
このケースに適した金属細工師のプラグインが存在するか、または別の巧妙な JS 操作を使用できますか?