如何使用 metalsmith 本地设置活动菜单项？

Question

我得到了一个带有主导航的简单静态站点。使用金属匠发电机。

是否有一种本机方法可以将当前菜单项设置为活动状态？

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

我刚刚做了如下解决方法。

一个 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 用作引擎。我只是 post 菜单的一部分：

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

两者都在进行金属加工渲染。我在菜单的第 1 页上得到了 current class。

问题

我的解决方案目前有效，但随着我网站的扩展。我需要一次又一次地为每个站点定义 "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 本地设置活动菜单项？

How natively to set active menu item with metalsmith?

static-site

metalsmith

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

问题