1

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

是否有一种将当前菜单项设置为活动的本地方法？

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

我刚刚做了一个解决方法，如下所示。

一个 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>

两者都经过金属匠渲染。我current在菜单的第 1 页上有一个课程。

问题

到目前为止，我的解决方案有效，但随着我的网站规模扩大。我需要一次又一次地为每个站点定义“当前”。如果我不注意这将导致配置错误......我确实喜欢在我的主要导航标记上拥有自由，因为有一些专业。所以我可以自己为新页面创建这个。

我可以使用metalsmith-permalinksormetalsmith-canonical插件以某种方式设置活动菜单项，或者是否存在适合这种情况的金属匠插件，或者可能有另一个聪明的 JS 操作？

4

1 回答 1

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
---
于 2018-12-08T21:16:10.527 回答