1

メイン ナビゲーションを備えたシンプルな静的サイトを取得しました。メタルスミス ジェネレーターを操作します。

現在のメニュー項目をアクティブに設定するネイティブな方法はありますか?


私の現在の自動化されていないソリューション:

次のような回避策を作成しました。

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 操作を使用できますか?

4

1 に答える 1