Dropdown/Untermenüs in KeystoneJS

Question

Ich bin gerade dabei, eine Website zu entwickeln. Als Teil der Anforderungen, muss ich Dropdown-Menü/Untermenü von einigen der Hauptmenüpunkte enthalten. Ich kann Hauptmenüpunkte mit KeystoneJS erstellen, aber ich finde kein Tutorial, wie man Untermenüs einrichtet. Wie soll ich vorgehen?

Answer 1

Ihre Frage ist ein wenig unklar, aber ich nehme an, Sie sprechen über die Aktualisierung der Navigationsleiste, die Sie nach dem Ausführen des Generators erhalten, und nicht über die Admin-Benutzeroberfläche selbst?

Wenn ja, hängt es davon ab, welche Templat-Engine Sie verwenden. Ich habe das selbst mit der Lenkerschablonenmaschine gemacht. Ich habe gerade eine locals.subsection, ähnlich locals.section hinzugefügt.

ich dann routes/middleware aktualisiert wie folgt aussehen:

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' } 
]; 

wo in dem obigen Beispiel das „Über uns“ Menüpunkt nach unten ein Tropfen sein, und die anderen beiden wird nicht sein. Dann müssen Sie auf den Routen für Ihre einzelnen Seiten die section und auch die subsection angeben, wenn Sie möchten, dass es ein Dropdown ist. Im obigen Beispiel hat die Route whatwedolocals.section: about und locals.subsection: whatwedo.

Sie müssen dann Ihr Standardlayout aktualisieren. Für mich ist es in Lenker geschrieben, und sah so wie folgt aus:

{{# 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}} 

Ich weiß, Sie wahrscheinlich verwenden Jade statt Lenker, aber hoffentlich werden Sie in der Lage sein, diesen Code ‚übersetzen‘.

Entschuldigung, wenn ich Ihre Frage falsch interpretiert habe. Hoffe das hilft.