KeystoneJS中的下拉菜单/子菜单

Stalin Kay 发表于 Dev

斯大林·凯

我目前正在开发网站。作为要求的一部分，我需要包括一些主菜单项中的下拉菜单/子菜单。我可以使用KeystoneJS创建主菜单项，但似乎找不到有关如何实现子菜单项的教程。我应该怎么做？

杰克·斯托克温

您的问题尚不清楚，但是我假设您是在谈论更新运行生成器后获得的导航栏，而不是关于管理UI本身？

如果是这样，那将取决于您使用哪种模板引擎。我自己使用车把模板引擎完成了此任务。我刚刚添加了一个locals.subsection，类似于locals.section。

然后routes/middleware，我更新为如下形式：

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