Question

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

Answer 1

您的问题有点不清楚，但我假设您正在谈论更新运行生成器后获得的导航栏，而不是管理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' }
];

在上面的例子中，＆＃34;关于我们＆＃34;菜单项将是一个下拉菜单，其他两个将不会。然后，在您的各个网页的路线上，如果您希望将其作为下拉列表，则需要指定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}}

我意识到你可能正在使用玉而不是把手，但希望你能够翻译＆＃39;这段代码。

如果我误解了你的问题，请道歉。希望这可以帮助。

KeystoneJS中的下拉菜单/子菜单

1 个答案: