Question

我有一个带有主要导航的简单静态站点。与Metalsmith发电机一起工作。

是否有本机设置当前菜单项处于活动状态？

我当前的非自动化解决方案：

我只是做了如下的解决方法。

作为内容源的MD文件page1.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插件以某种方式设置活动菜单项吗？或者是否存在适合这种情况的Metalsmith插件，或者可以使用其他巧妙的JS操作？

Answer 1

使用metalsmith-collections创建页面集合

.use(collections({
    pages: {
        pattern: '*.html'
    }
}))

然后在模板中循环浏览它们以创建链接：

{{#each collections.pages}}
    <li>
         <a href="{{path}}" {{#if_eq ../id this.id}} class="active" {{/if_eq}}>{{title}}</a>
     </li>
 {{/each}}

您将需要注册一个这样的阻止助手：Handlebars.js if block helper ==

确保每个页面ID都是唯一的。

例如：

---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---

如何与Metalsmith一起设置活动菜单项？

我当前的非自动化解决方案：

问题

1 个答案: