Как нативно установить активный пункт меню с кузнецом?

У меня есть простой статический сайт с основной навигацией. работа с кузнечным генератором.

Есть ли собственный способ сделать текущие пункты меню активными?

Мое текущее неавтоматизированное решение:

Я только что сделал обходной путь, как показано ниже.

Файл 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?


static-site metalsmith
person André Kelling    schedule 06.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Используйте 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
---
person James Khoury    schedule 08.12.2018
comment
эй, мне нужно попробовать ваше решение в ближайшие дни. path и id — это переменные, поставляемые с плагином collections? я точно знаю, что у меня нет path по умолчанию - person André Kelling; 11.12.2018
comment
@AndréKelling Нет, я должен быть указан в метаданных страницы, и я думаю, что может быть плагин для указания пути, но я просто поместил его на страницу. - person James Khoury; 11.12.2018
comment
--- id: phillip layout: base.hbs Слоган: Я об этом не подумал. pagename: phils page href: /phil/ navorder: 3 private: true --- изменить: нельзя вставлять новые строки. Я добавлю это в качестве примера - person James Khoury; 11.12.2018