Как изначально установить активный пункт меню с metalmith? - PullRequest
Новая
       33

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

0 голосов
/ 06 декабря 2018

Я получил простой статический сайт с основной навигацией.работа с генератором по металлу.

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

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

Я только что сделал обходной путь

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 класс на Page1 в меню.

Вопрос

Мое решение пока работает, но мой сайт масштабируется.Мне нужно определить «текущий» для каждого сайта снова и снова.Если я не буду следить за этим, это приведет к неправильной настройке ... Мне действительно нравится иметь свободу в моей основной навигационной разметке, поскольку есть некоторые особенности. Так что я в порядке, создавая это для новых страниц самостоятельно.

Могу ли я как-то установить активные пункты меню с помощью плагина metalsmith-permalinks или metalsmith-canonical или существует плагин metalmith, подходящий для этого случая или, может быть, с другой умной манипуляцией JS?

1 Ответ

0 голосов
/ 09 декабря 2018

Используйте 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}}

Вам необходимо зарегистрировать блокhelper как это: Handlebars.js если блок helper ==

Убедитесь, что каждый идентификатор страницы уникален.

Например: 

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