KeystoneJSのドロップダウン/サブメニュー

Question

私は現在ウェブサイトを開発中です。要件の一部として、私はいくつかのメインメニュー項目のドロップダウンメニュー/サブメニューを含める必要があります。私はKeystoneJSでメインメニュー項目を作成することができますが、サブメニュー項目を実装する方法についてのチュートリアルを見つけることはできません。それについてどうすればいいですか？

Answer 1

あなたの質問は少し不明ですが、私はあなたがジェネレータを実行した後に与えられたナビゲーションバーを更新することを話していると仮定しています。

もしそうなら、使用するテンプレートエンジンによって異なります。私はハンドルバーのテンプレートエンジンでこれを自分でやっています。私はちょうどlocals.sectionに似たlocals.subsectionを追加しました。

私は、このように見えるroutes/middlewareを更新：上記の例では、「お問い合わせ」メニュー項目がドロップダウンになり、他の2つはなりません

locals.navLinks = [ 
    { label: 'Home',  key: 'home',  href: '/' }, 
    { label: 'About Us',  key: 'about',  pages: [ 
     { label: 'What We Do',  subkey: 'whatwedo', href: "/whatwedo" }, 
     { label: 'Our Journey',  subkey: 'journey',  href: "/journey" } 
     ] }, 
    { label: 'Blog',  key: 'blog',  href: '/blog' } 
]; 

。その後、個々のページのルートで、ドロップダウンにしたい場合は、sectionとsubsectionを指定する必要があります。上記の例では、whatwedoルートはlocals.section: aboutとlocals.subsection: whatwedoです。

デフォルトのレイアウトを更新する必要があります。私にとって、それはハンドルバーに書かれているので、このように見えた：

{{# each navLinks}} 
    {{#if href}}  
     <li {{#ifeq ../../section key}}class="active"{{/ifeq}}> 
      <a href="{{ href }}">{{ label }}</a> 
     </li> 
    {{else}} 
     <li class="dropdown{{#ifeq ../../section key}} active{{/ifeq}}"> 
      <a href="#" class="dropdown toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ label }} <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       {{#each pages}} 
        <li {{#ifeq ../../../subsection subkey}}class="active"{{/ifeq}}> 
         <a href="{{ href }}">{{ label }}</a> 
        </li> 
       {{/each}} 
      </ul> 
     </li> 
    {{/if}} 
{{/each}} 

私は、あなたはおそらく、むしろハンドルバーよりもヒスイを使用していますが、うまくいけば、あなたはこのコードを「変換」することができます実現しています。

私はあなたの質問を誤解している場合はお詫び申し上げます。お役に立てれば。