у меня есть простой статический сайт с основной навигацией. работа с генератором по металлу.
Есть ли собственный способ активировать текущие пункты меню?
Я просто нашел обходной путь, как показано ниже.
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-permalinks или metalsmith-canonical, или существует плагин для металлургов, подходящий для этого случая, или, может быть, с другой умной манипуляцией с JS?
Используйте 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 если блок-помощник ==
Убедитесь, что идентификатор каждой страницы уникален.
Например:
---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---